如果有多条规则 如何确定选择哪条规则生效?
选择器的特异度(specificity)
根据 id (伪)类 标签 的数量确定
实际开发中 可以先写基础样式 通过将特殊样式添加class将将样式进行覆盖
继承
某些属性会自动继承父元素的计算值,除非显示指定 (个别属性无法继承)
strong没有显示指定 就看父标签p 继承其颜色 blue
显式继承 (inherit)
box-sizing本身为不可继承元素
利用 * {...} 通配选择器 将全局继承父元素的box-sizing
初始值
CSS布局 (layout)
布局相关技术
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
盒模型 (最基础)
width
- 指定content box 宽度
- 取值为长度 百分数 auto
- auto由浏览器根据其他属性确定
- 百分数是相对于容器的content box宽度
height
- 指定content box 高度
- 取值为长度 百分数 auto
- auto取值为内容计算得来
- 百分数相对于容器的content box高度
容器有指定的高度时 百分数才生效
padding (内边距)
- 指定元素四个方向的内边距
- 百分数相对于容器的宽度
border
- 指定容器边框样式 粗细 颜色
margin (外边距)
- 指定元素四个方向的外边距
- 取值可以是长度 百分数 auto
- 百分数相对于容器的宽度
margin-left和magin-right都是auto时能实现水平居中的效果
margin collapse:
- 两个元素的间距取决于上面元素的下外边距与下面元素的上外边距的最大值
box-sizing: border-box
指定宽和高的是border+padding的width和height
overflow (处理文本溢出)
- visible
- hidden
- scroll
- auto 超出就滚动
块级 VS 行级
- block level box
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
- inline level box
- 和其他行级盒子一起放在一行或者拆开成多行
- 盒模型的width height不适用
块级元素
- 生成块级盒子
- body article div main section h1~6 p ul li等
- display:block
行级元素
- 生成行级盒子
- 内容分散在多个行盒(line box)中
- span em strong cite code等
- display:inline
display 属性
block 块级盒子
inline 行级盒子
inline-block 本身为行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none 排版时完全被忽略
常规流 Nomal Flow
- 根元素 浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内(in-flow)
- 常规流中的盒子,在某种排版上下文中参与布局
行级排版上下文
- inline formatting content(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时,换行显示
- text-align决定 一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
块级排版上下文
- block formatting content(BFC)
- 某些容器会创建一个BFC
- 根元素 html
- 浮动 绝对定位 inline-block
- flex子项和grid子项
- overflow值不是visible的块盒
- display:flow-root;
- BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box (现在用的比较多的)
- 一种新的排版上下文
- 可以控制子级盒子的:
- 摆放流向
- 摆放顺序
- 合盒子的宽度 高度
- 水平 垂直方向的对齐
- 是否允许折行 -display:flex;
flex-direction
主轴与侧轴
justify-content
align-items
align-self
order
flexibility(弹性)
flex-grow
在有多余空间的条件下 将剩余的空间按2:1分配给a和b
flex
grid 布局
页面上的布局不仅仅是流式
display:grid
- 使元素生成一个块级的grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占那些行/列
template 划分网格
grid line 网格线
float 浮动
一般就用于图文混排
绝对定位
position 属性
- static 默认值 非定位元素
- relative 相对自身原本位置偏移 不脱离文档流
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用 top left botton right设置偏移长度
- 流内其他元素依旧正常布局
- absolute 绝对定位 相对非static祖先元素定位
- 脱离了常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
- fixed 相对于视口绝对定位
学习CSS的建议
- 充分利用MDN和W3C CSS规范
- 保持好奇心 善用浏览器的开发者工具
- 持续学习 CSS新特性还在不断出现
