深入CSS(上)| 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第4天. 今天继续学习CSS, 主要了解CSS选择器和CSS布局。

选择器的特异度

多个选择器也可能选中同一个元素. 此时就需要了解选择器的特异度, 也就是选择器的特殊程度. 越特殊的选择器优先级越高.

继承

某些元素会自动继承父元素的计算值. 除非指定一个值. 与盒模型相关的属性一般都是不可继承的, 如width等.

显式继承

如果要从父元素处继承不可继承的属性, 需将属性值指定为inherite.

初始值

用到初始值的情况:
- 当一个元素是不可继承的, 并且没有设置属性;
- 元素是可继承的, 但一层一层都没有找到可以继承的值.
每个元素都有一个初始值,例如 background-color:transparent; margin-left:0;
可以使用initial关键字显式重置为初始值.

CSS求值过程

formatting步骤时, 并不是所有百分比都会转换成绝对值. 得到的使用值也并不是直接使用, 有时候需要将其限制为可以使用的值, 如400.2px→400px才可以使用, 即constraining步骤.
计算值和使用值的区别: 计算值是分析CSS就可以得到的值(绝对值), 就可以在resolving阶段进行. 继承到的是父级的计算值.

CSS布局

布局是什么

布局是确定内容的大小和位置的算法. 一般根据元素, 容器, 兄弟节点和内容等信息来计算.

布局相关技术

三种布局方式

常规流 : 也称文档流, 有很多布局规则和方式, 如块级, 行级, 表格布局等.
浮动 : 例如把图片作浮动, 可以制造出文字围绕图片的效果.
绝对定位 : 直接覆盖在常规流上方, 改变元素位置而不影响常规流.

盒模型

box-sizing:content-box(默认)

width和height

是内容的宽高. 如果设置为auto, 则根据其他属性来确定. 百分数则相对于容器的content box的宽高.

padding

是内边距, 如果设置为百分数, 则四个方向都是相对于容器的宽度.

border

指定容器边框样式, 粗细和颜色. 可以单独指定, 也可以用border:1px solid #ccc一起指定. 也可以针对四个方向分别指定.

width, height设置为0的效果.

通过设置不同的边框颜色和粗细可以得到不同的三角形. 仅设置border-top-color, 其余方向为黑色的效果

四个方向边框设置不同颜色的效果, 连接处是斜线.

margin

外边距, 当前盒子距离容器的边距. 如果设置为margin:auto的时候, 浏览器会取平均值, 以实现content居中的效果.

margin collapse现象

margin在垂直方向上, 只会保留两者间较大的边距, 而不是相加. 例如第一个元素的margin-bottom:100px;, 第二个元素的margin-top:200px, 则两者垂直方向上的间距为200px.

box-sizing : border-box

与content-box不同的地方是, border-box的宽高是包含border和padding的.

超出盒子的内容怎么处理?

可以通过overflow属性设置, visible(默认)属性值表示超出部分内容也展示, hidden则截掉超出部分,scroll则表示超出部分可以通过滚动条查看.

深入CSS(上) | 青训营笔记