深入CSS ｜ 青训营笔记

zhouzh
56 阅读5分钟

这是我参与「第四届青训营」笔记创作活动的第3天

多个选择器对应同一个元素的同一属性值?

根据选择器特异度决定，比如根据id、（伪）类、标签的数量

更特殊的选择器可以覆盖更普遍的选择器的属性值

CSS中元素属性的继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

一般来说，

和文字相关的属性都可以隐式继承，

和模型相关的属性都不能隐式继承，比如子元素不能隐式继承父元素的宽度

也可以使用inherit显式继承

* {
	box-sizing: inherit;
}

如果没有指定也没有显式继承或隐式继承，则使用初始值

可以使用initial 关键字显式重置为初始值

CSS求值过程

  1. 对应用到该页面的规则用一些条件进行筛选，如选择器匹配、属性有效、符合当前media等等，最终筛选出元素的声明值。一个元素的某属性的声明值可能有零个或多个。
  2. 按照来源、!important、选择器特异性、书写顺序等选择出优先级最高的一个属性值，最终筛选出元素的层叠值。层叠值可能是空的。当层叠值为空时，使用继承；没有继承时，使用初始值。
  3. 将一些相对值或关键字转换成绝对值，比如em转为px，相对路径转为绝对路径，得到计算值（在不进行实际布局时能得到的最具体的值，子元素继承父元素的属性值时继承计算值）。
  4. 再经过进一步转换，得到使用值，适配属性值的一些限制（比如像素不能是小数，要转换为整数）后，最终得到渲染时实际生效的值。

盒模型

盒模型

padding

  1. padding-top
  2. padding-left
  3. padding-right
  4. padding-bottom

border

  • 三种属性
    1. border-width
    2. border-style
    3. border-color
  • 四个方向
    1. border-top
    2. border-right
    3. border-bottom
    4. border-left
border: 1px solid #ccc;
border-color: green;
border-top-color: #f00;
  • 使用小技巧

可以给四条边框设置不同的颜色

默认一条边框的两边是三角形

所以可以将一条边框设置颜色，其他边框设置为透明，得到一个三角形

效果如下：

triangle-demo

#box{  
    display: block;  
    width: 50px;  
    height: 50px;  
    box-sizing: border-box;  
    border-top-width: 2em;  
    border-bottom-width: 2em;  
    border-left-width: 2em;  
    border-right-width: 2em;  
    border-style: solid;  
    border-top-color: rgba(66, 204, 255, 0.5);  
    border-bottom-color: rgba(0, 0, 0, 0.0);  
    border-left-color: rgba(0, 0, 0, 0.0);  
    border-right-color: rgba(0, 0, 0, 0.0);  
}

margin collapse

margin在垂直方向上会合并，取二者间的最大值，

如: 上边的元素设置margin-bottom、下边的元素设置margin-top

块级 Vs. 行级

块级盒子行级盒子
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子
body article div main
section h1~h6 p ul li等		span em strong cite code等
display: blockdisplay: inline

注：盒子是CSS的概念，元素是HTML的概念

display 属性

可以用display将任意的元素转换为行级盒子或块级盒子

属性效果
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行级盒子中；
可以设置宽高；
作为一个整体不会被拆散成多行
none排版时直接忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局
    1. 行级排版上下文
    2. 块级排版上下文
    3. Table排版上下文
    4. Flex排版上下文
    5. Grid排版上下文

行级排版上下文

  • Inline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    1. 盒子在一行内水平摆放
    2. 一行放不下时换行显示
    3. text-align决定一行内盒子的水平对齐
    4. vertical-align决定一个盒子在行内的垂直对齐
    5. 避开float元素

块级排版上下文

  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC，如：
    1. 根元素
    2. float元素、绝对定位元素、inline-block元素
    3. Flex子项和Frid子项
    4. overflow值不是visible的块盒
    5. display: flow-root;的元素
  • BFC内的排版规则
    1. 盒子从上到下摆放
    2. 垂直margin合并(margin collapse)
    3. BFC内盒子的margin不会与外面的合并
    4. BFC不会与float元素重叠

Flex排版上下文

  • Flex Box可以控制子级盒子的:
    1. 摆放的流向
    2. 摆放顺序
    3. 盒子宽高
    4. 水平垂直对齐
    5. 是否允许拆行
  • Flex流向分为主轴和侧轴
  • 主轴属性 justify-content
    1. flex-start
    2. flex-end
    3. center
    4. space-between
    5. space-around
    6. space-evenly
  • 侧轴属性 align-items
    1. flex-start
    2. flex-end
    3. center
    4. stretch (默认)
    5. baseline
  • 弹性Flexibility
    • 可以设置子项的弹性
    • 当容器有剩余空间时，会伸展
    • 当容器空间不够时，会收缩
属性效果
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时的收缩能力
flex-basis没有伸展或收缩时的基础长度

position 属性

属性值效果
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位
fixed相对于视口绝对定位
sticky粘性定位

学习CSS的几点建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习CSS新特性
avatar
文章
阅读
粉丝