概述
这里我只是写了一些我一般不怎么注意到的东西，帮自己加强一下记忆
CSS 核心
选择器
选择器种类
-
基本选择器
* * 通用选择器 匹配任何元素 * E 标签选择器 匹配所有使用 E 标签的元素 * .info class 选择器 匹配所有 class 属性中包含 info 的元素 * #footer id 选择器 匹配所有 id 属性中等于 footer 的元素 -
多元素的组合选择器
* E,F 多元素选择器 同时匹配所有 E 或 F 元素，E 和 F 之间用逗号分隔 * E F 后代元素选择器 匹配所有属于 E 元素后代的 F 元素，E 和 F 之间用空格分隔 * E > F 子元素选择器 匹配所有 E 元素的子元素 F * E + F 毗邻元素选择器 匹配所有紧随 E 元素之后的同级元素 F -
CSS 2.1 属性选择器
* E[ att ] 匹配所有具有 att 属性的 E 元素，不考虑它的值 * E[ att = val ] 匹配所有 att 属性等于 ‘val’ 的 E 元素 E[ att ~= val ] 匹配所有 att 属性具有多个空格分隔的值、其中一个值等于 ‘val’ 的 E 元素 E[ att | val ] 匹配所有 att 属性具有多个连字号分隔的值，其中一个值以 ‘val’ 开头的 E 元素 -
CSS 3 属性选择器
E[ att^=‘val’ ] 属性 att 的值以 ‘val’ 开头的元素 E[ att$=‘val’ ] 属性 att 的值以 ‘val’ 结尾的元素 E[ att*=‘val’ ] 属性 att 的值包含 ‘val’ 字符串的元素
选择器优先级
关于优先级的规定，常用的方法是给不同的选择器分配权值
- id 选择器优先级很高，权值为 100
- class、属性和伪类选择器的权值为 10
- 标签选择器权值为 1
在比较样式的优先级是，只需统计选择符中的 id、class 和标签名的个数，然后把相应的权值相加即可，最后根据结果派出优先级
- 权值较大的优先级较高
- 权值相同的，后定义的优先级较高
- 样式值含有！important，优先级最高
后代选择器的定位原则
- 浏览器 CSS 匹配不是从左到右进行查找，而是从右到左进行查找，为的是尽早过滤掉一些无关的样式规则和元素
伪类/伪元素 选择器
伪元素
伪元素的前缀是两个冒号(:?，由于向默写选择器设置特殊效果
-
CSS 2.1 中的伪元素
* E::first-line 匹配 E 元素的第一行 * E::first-letter 匹配 E 元素的第一个字母 * E::before 在 E 元素之前插入生成的内容 * E::after 在 E 元素之后插入生成的内容
伪类
伪类的前缀是一个冒号(?，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类
-
CSS 2.1 中的伪类
* E:firs-child 匹配父元素的第一个子元素 * E:link 匹配所有为被点击的链接 * E:visited 匹配所有已被点击的链接 * E:active 匹配鼠标已经在它上面按下、还没有释放的 E 元素（点击） * E:hover 匹配鼠标悬停其上的 E 元素（悬停） * E:focus 匹配获得当前焦点的 E 元素（焦点） E:lang© 匹配 lang 属性等于 c 的 E 元素 -
CSS 3 中与用户界面有关的伪类
E:enabled 匹配表单中激活的元素 E:disabled 匹配表单中禁用的元素 E:checked 匹配表单中被选中的 radio 或 checkbox 元素 E::selection 匹配用户当前选中的元素 -
CSS 3 中的结构性伪类
E:root 匹配文档的根元素 对于 HTML 文档，就是 HTML 元素 * E:nth-child(n) 匹配其父元素的第 n 个子元素 第一个编号为 1 * E:nth-last-child(n) 匹配其父元素的倒数第 n 个子元素 第一个编号为 1 * E:nth-of-type(n) 与 :nth-child(n) 作用类似 仅匹配使用同种标签的元素 * E:nth-last-of-type(n) 与 :nth-last-child() 作用类似 仅匹配使用同种标签的元素 * E:last-child 匹配父元素的最后一个子元素 等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素 等同于:nth-of-type(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素 等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素 等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素 等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) * E:empty 匹配一个不包含任何子元素的元素 文本节点也被看做子元素 -
CSS 3 的反选伪类
* E:not(s) 匹配不符合当前选择器的任何元素 -
CSS 3 中的 :target 伪类
E:target 匹配文档中特定的 ‘id’ 点击后的效果
BFC（块格式化上下文）
必看！！
是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
- 属于普通流
- 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性
创建 BFC
body根元素- 浮动元素（元素的
float不是none） - 绝对定位元素（
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 弹性元素（
display为flex） - 网格元素（
display为grid） display等等overflow除了visible以外的值 (hidden、auto、scroll)
特性和应用
- 同一个 BFC 下外边距会发生折叠
- 当两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 时，第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。
- 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
- BFC 可以包含浮动的元素（清除浮动）
- 浮动的元素会脱离普通文档流
- 如果使触发容器的 BFC，那么容器将会包裹着浮动元素
- BFC 可以阻止元素被浮动元素覆盖
- 如果想避免元素被覆盖，可触第二个元素的 BFC 特性
规则
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin 子元素盒子的的左边， 与包含块border 父元素盒的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- 计算BFC的高度时，浮动元素也参与计算。
盒子模型
MDN-CSS-Box-Model
必看！！
当对一个文档进行布局(laying out)的时候，浏览器渲染引擎会根据 CSS-Box 模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。CSS 决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸…)
在 CSS 中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
W3C 盒模型
W3C标准下padding、border所占的空间不在width、height范围内
IE 盒模型
- IE盒模型width包括content尺寸＋padding＋border的总和(出现在IE5.5及其更早的版本中)
- 避免触发IE盒模型的方法是使用
<!DOCTYPE html>声明，告诉IE采用W3C盒子模型即可
这里要引申一个属性：border-box
-
在 ie8+ 浏览器中使用哪个盒模型可以由 box-sizing (CSS新增的属性) 控制
-
默认值为content-box，即标准盒模型
- 如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
-
border-box 则用的是IE盒模型
- 如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。
-
**一些专家甚至建议所有的Web开发者们[将所有的元素的box-sizing都设为border-box
-
最终盒子的大小为 content + padding + border，而不加上margin
display
简单盒模型需要进一步加工才能成为真正可以进行格式化的盒子，处理过程主要取决于一个css属性：display
定位
普通流
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
浮动/清除浮动
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
即：让block元素无视float元素，让inline元素像流水一样围绕着float元素实现浮动布局
float 的特性
- 包裹性
- 高度塌陷
- 块状化（可以像 block 元素一样设置宽高，但并不是真正的块元素）
- 没有任何 margin 合并
清除浮动
overflow设置为hidden- 使用
clear来清除float属性带来高度塌陷等问题- none：默认值，允许两边都有浮动对象；
- left：不允许左侧有浮动对象；
- right：不允许右侧有浮动对象；
- both：两侧不允许有浮动对象。
- clear属性只能清除元素的自身，不能影响其他的元素
- 不足：
- 如果
clear:both元素前面的元素就是float元素，则设置margin-top无效 clear:both后面的元素依旧可能会发生文字环绕现象
- 如果
相对/绝对定位
相对定位
在相对定位中，给元素加 left / top / right / buttom 元素会以原来的位置为基础加上这些值，即以原来的位置为基础定位，并且没有脱离文档
绝对定位
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
- 当给一个元素设置 position:absolute 时，这个元素的位置就是以他父代元素 position 不为 static 的元素作为参考，如果他的父代元素都是 position:static 那就以 body 作为参考
z-index
- 元素的 position 必须为 relative 或者 absolute
- 顺序是 后来居上，先渲染的在下面，后渲染的在上面
- 如果想让父元素到子元素的下方，可以给子元素设置 z-index：-1
布局
flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局
.box{
display: flex;
}
行内元素也可以使用 Flex 布局
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
Grid
居中
POSITION 定位
使用 left: 0; right: 0; top: 0; bottom: 0; margin: auto; 可以实现水平垂直居中（前提是要制定宽度和高度）
垂直居中
vertical-align
只对行内元素、表格单元格元素有效，不能用它垂直对齐块级元素
- 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片
- 垂直对齐表格单元内容
行内或类行内元素（比如文本或链接）
单行
对于单行行内或者文本元素，只需为他们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中
也可以，给文本设置 line-height 和 height 一样，从而实现垂直居中
多行
对于多行文本，同样可以使用等值 padding-top 和 padding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align属性实现垂直居中
flex
可以使用 flexbox 实现垂直居中
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
块级元素
已知元素的高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
未知元素的高
先将元素定位到容器的中心位置，然后使用 transform 的 translate属性，将元素的中心和容器的中心重合，从而实现垂直居中
.parent {
position: relative;
}
.child {
position: absoulte;
top: 50%;
transform: translateY(-50%)
}
使用 flex
.parent {
display: flex;
flex-derction: column;
justify-content: center;
}
position 定位
可以使用 top:0; bottom:0; margin:auto 0; 实现垂直居中
水平居中
行内或类行内元素（比如文本和链接）
在块级父容器中让行内元素居中，只需给其父元素设置 text-align: center;
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中
块级元素
margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width ，否则块级元素的宽度会被拉伸为父级容器的宽度）
float 属性不能实现元素居中
- 使用伪元素充当占位符，并给要居中的元素绝对定位
多个块级元素
可以修改他们的 display 值，
position 定位
可以使用 left:0; right:0; margin:0 auto; 实现水平居中
垂直水平居中
宽高固定元素
设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%，最后使用负向 margin 实现水平和垂直居中，margin 的值为宽高（具体的宽高需要根据实际情况计算 padding）的一半
.parent {
width: 100%;
height: 500px;
background: pink;
position: relative; /**/
}
.child {
position: absolute; /**/
width: 300px;
height: 300px;
background: red;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px; /*值为宽高的一半*/
}
宽高不固定元素
如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中
.parent {
width: 100%;
height: 500px;
background: pink;
position: relative; /**/
}
.child {
position: absolute; /**/
width: 300px;
height: 300px;
background: red;
top: 50%;
left: 50%;
tranform: translate(-50%, -50%); /*值为宽高的一半*/
}
使用 transform 有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置 transform-style: preserve-3d;
flexbox
使用 flexbox 实现垂直居中，只需两条居中属性即可
.parent {
display: flex;
justify-content: center;
align-items: center;
}
动画
！！！未完待续 ！！！
最后
以上就是平淡犀牛为你收集整理的CSS 一些初学者不怎么注意的地方CSS 核心的全部内容，希望文章能够帮你解决CSS 一些初学者不怎么注意的地方CSS 核心所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复