一、 常用标签嵌套
https://developer.mozilla.org/zh-CN/docs/Web/CSS
1.内联元素不能含块元素，它只能包含其他的内联元素
2.有些块级元素不能放其他块级元素.
标题标记的
、
、
、
、
、
、;
段落标记的
; 如
中不能放
分隔线
和
3.a标签不能嵌套a和input标签,能嵌套的标签像 等等.
前端工具：https://c.runoob.com/front-end
二、相邻块元素垂直外边距的合并
两个外边距合并成一个外边距，谁大用谁的。
盒子的宽与高：
注意：
1.宽度属性的width和高度属性height仅适用于块级元素,对行内元素无效(标记和除外.
2.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况.
行内元素关于padding和marging问题
注意：
行内元素不要给上下的margin和padding
上下margin和padding会被忽略。
左右margin和padding会起作用.
嵌套块元素垂直外边距的合并
1.对于两个嵌套关系的块元素,如果父元素没有上内边距及边框，则父元素的上外距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外距为0，也会发生合并。
2.如果希望外边距不合并，可以为父元素定义1像素的上边框或上内边距。
三、文本外观属性
1.color: 文本颜色
.预定义的颜色值,如red,green,blue等
.十六进制，如#FF0000
RGB代码 如红色可以表示为rgb(255,0,0) 或rgb(100%,0%,0%).
2.letter-spacing:字间距
即字符与字符之间的空白.可以为负值。#p4 { letter-spacing: 20px;}
3.word-spacing ：单词间距
四、闭合浮动
把浮动元素包裹起来，避免浮动造成的高度塌陷。
BFC条件：
1.绝对定位、相对定位
2.float
3.display: table
- overflow: hidden|auto
5.zoom: 1;
BFC: 包裹性。（没有设置高宽）
子元素的位置不影响父元素.
<!DOCTYPE html>
夺春去春又回砝码顶替都烦死了森远股份粉色可爱的你大结局
五、伪类
:link
伪类将应用于未被访问过的链接.
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素，如被点击的链接、被按下的按纽等。
:visited
伪类将应用于已经被访问过的链接
:focus
伪类将应用于拥有链盘输入焦点的元素.
顺序问是:LoVe HAte原则vcxv
六、浮动高级
标准流式布局：从左到右，从上到下排列。块级元素独占一行。
元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移到到其父元素中指定位置的过程。
定义浮动：
选择器{float: 属性值;} none, left, right 默认:none
浮动特性：
- 在父容器中设置 overflow: hidden;
清除浮动
一个div 假如左侧有float 的div ，则向下放到没有浮动的div的位置开始放。
clear: right | left|both
七、边框的属性
/ border 这里是里面有边框/
| 1 | 2 |
| 1 | 2 |
1.表单的边框通常改为0;
border:0 none; //兼容所有浏览器
2.表格的细线边框
table { border-collapse: collapse; }
3.轮廓（链接有虚线 和 文本框 有蓝色边框）
outline-style: none;
八、CSS背景
.bg {
height: 400px;
width: 400px;
border: 1px solid saddlebrown;
/优先级高于背景色/
background-image: url(./img/1.jpg);
background-color: #cda;
/小技巧：如果是个小图标，留出位置来，让小图标与文字并排显示/
padding-left: 30px;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS
九、外边距属性
十、元素的定位
同理：
如果父容器设置了relative,子容器设置absolute 那么父容器触发了BFC特性，子容器就按父容器进行绝对定位。
子绝 父 相 定位。
**
十一、属性选择器
十二、CSS选择器优化效率
十三、复合选择器
十四、伪元素
若有收获，就点个赞吧
0 人点赞
