css常识原创
# CSS常识
# 选择器
标签名 span p 。。。
class .
id #
*
属性 [attr]/[attr="val"]/[attr^="#"]
伪类 LAHV / focus / disabled / 位置(nth-of-child) / 类型(nth-of-type)
伪元素
# 选择器的组合
并 AB
后代 A B
亲子 A>B
兄弟 A~B
相邻 A+B
# 颜色
RGB #aabbcc rgb(0,0,0) 分别是红绿蓝
HSL hsl(0,0,0) 分别是色相(0-360),饱和度(0-100%),亮度(0-100%) 适用于需要修改明暗度时使用
关键字 blue skyblue
alpha 不透明度(0-1),0完全透明,1完全不透明
使用alpha rgba,hsla,#aabbccdd
# 字体
font-family 单个指定字体,如果客户端不存在改字体则会应用失败,因此需要指定字体族
通用的字体族 Serif衬线体,Sans-Serif无衬线体,Cursive手写体 Monospace等宽字体
常用的字体:Serif——>微软雅黑 中文,Sans-Serif——>Helvetica 英文 一般是前边指定字体 ,最后加上字体族 ,英文字体放在中文字体前(中文可能会包含英文导致英文字体不生效)
引入外部字体:@font-face { font-family: "" , src:url() }
font-size:
- 通过关键字指定 large,small
- 通过px 或 em(相对于父元素字体) 或 rem(相对于根元素)
- 通过百分比 相对于父元素字体
font-weight: 范围100-900 但是一般字体只支持bold和normal
line-height: 设置的是字体基线间距,如果行高没有单位则表示与字体大小的倍数
font:所有属性的简写,顺序如下——> 斜体 粗细 大小/行高 字体族
white-space:设置空白。- normal 空格默认合并
- nowrap 不换行
- pre 保留换行和空格
# 选择器优先级
标签 1
class/伪类 10
id 100
# 继承
文本属性会自动继承
盒子属性不会继承
可以强制继承,使用inherit
继承只能继承计算值。
# CSS求值过程
- 找出与当前节点有关的的所有样式声明值。
- 将所有声明值进行过滤层叠,选出优先级最高的层叠值
- 指定所有的样式的值,未声明的样式使用初始值或默认值作为指定值
- 将一些相对单位转为绝对单位,比如em转为px,相对路径转为绝对路径(但是此时由于未进行实际布局,对于宽高等属性的百分比无法计算。)生成计算值
- 模拟布局时收集页面相关信息,从而计算出狂高等属性得到使用值
- 实际布局后生成的实际有效的实际值(由于使用值可能出现小数,布局时会省略小数)因此实际值不一定等于使用值。
# 布局
确定内容的大小和位置的算法
依据元素,容器,兄弟节点和内容等信息来计算
# 布局的相关技术
margin:计算方式同padding margin:在垂直方向会发生折叠,因此maigin本质是设置当前元素与其他元素的最小距离,因此如果重叠直接取最大的值即可满足。
padding:设为百分比则始终相对于父容器的宽度。
应用场景:需要一个盒子的高度始终等于宽度,但是盒子的宽度不固定时
代码如下
```
<div style="
width:100px;
">
<p style="
padding-top:100%;
background:pink;
"></p>
</div>
```
效果如下
border:四条border会平分盒子的四角,因此可以利用这个特点实现一个三角形
代码如下:
<p style="
width:0px;
height:0px;
border: 10px solid pink;
border-left-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
">
</p>
2
3
4
5
6
7
8
9
效果如下
# 常见布局分类
- 常规流:包括了行级,块级,table,flex,grid
- 浮动
- 绝对定位
# 常规流
- 行级和块级盒子的比较
行级 | 块级 |
---|---|
和其他的盒子并行排放在一行或拆分在多行 | 不和其他盒子并列排放 |
盒模型中的width和height不适用 | 适用于所有的盒模型属性 |
- 行级元素和块级元素的比较
行级元素 | 块级元素 | 行内块元素 |
---|---|---|
生成行级盒子 | 生成块级盒子 | 生成行内块级盒子 |
常见元素:h1-6,p,ul,li | 常见元素:span code em | img input |
inline | block | inline-block |
一个行级元素会生成一个行级盒子,但是一个行级盒子会分散在多行形成多个行盒,内容随之分散在各行盒中
一个行内块元素会生成一个块级盒子,但是本身是行级元素,因此可以放在行内,但是作为一个整体不会被拆散为多行
- 常规流的布局规则
- 根元素,浮动,绝对定位的元素会脱离常规流
- 其他元素均在常规流内
- 常规流中的元素会根据自身的排版上下文规则来进行布局
- 排版上下文是由display属性来决定的
- 一般是block,(inline,inline-block),flex,grid
- 行级排版上下文(Inline Formating Context)规则
- display设置为inline,且盒内无块级元素
- 盒子在一行水平摆放,放不下在换行显示
- text-align来决定盒子在行内的水平对齐方式
- vertical-align来决定一个盒子在行内的垂直对齐方式
- 垂直对齐设置的是行内元素的基线.默认基线都是下边缘,比如img或者text.
- 排列时会避开浮动元素
- 只包含行级盒子容器会形成一个IFC,如果容器内有块级元素则无法形成
- 块级排版上下文(BFC)规则
- display设置为block,并不会生成BFC
- 只有某些特定情况会生成BFC
- 根元素
- 浮动,绝对定位,inline-block
- flex子项,grid子项
- overflow非visible
- 内部盒子从上到下摆放
- 内部盒子间垂直margin合并
- BFC内部盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
即使是块级盒子,只要内部元素全部为行级元素就会形成IFC 即使是块级盒子,只要不是特定情况就不会形成BFC,存在外边距塌陷问题
- flex排版上下文规则
- 子级盒子的排版规则自行指定
- 摆放流向 flex-direction
- 摆放顺序 order 小的在前,默认为0
- 盒子宽度,高度 flex-grow,flex-shrink,flex-basis
- 水平,垂直方向的对齐方式
- 是否允许换行
- 单独设置某个元素的对齐方式 align-self
- flex: auto ---> grow shrink basis分别是 1 1 auto
- flex: none ---> grow shrink basis分别是 0 0 auto
- 子级盒子内部会开启BFC
- grid排版上下文规则
- 通过划分行列将容器切割为格子
- 指定子元素所占据的格子即可
# 浮动
本身是用于处理图文环绕效果的 原理是img问inline-block会开启BFC,而BFC盒子不会与外部盒子发生重叠
# 绝对定位
position: relative 设置相对于自身的偏移,不会影响其他元素的布局 absolute 设置相对于最近的非static祖先进行偏移,不会影响其他元素的布局 fixed 设置相对于屏幕偏移 sticky 又称为粘性定位,可以用于表头的固定,默认时作为普通元素滚动,当到达指定位置时停止滚动