CSS基础知识点轨迹（二）

用两个冒号表示伪元素，一个冒号表示伪类

1.伪类：

：focus焦点键入样式

：first-child第一个子元素

：lang带有lang属性的样式

2.伪元素

：：first-letter 像文本的第一个字母添加样式

：：firt-line向文本的第一行添加样式

：：before向文本前添加内容

：：after向文本后添加内容

3.CSS盒模型（框模型）

A.行级元素和块级元素

块级元素：块级元素独占一行，块级元素后面无法再放任何内容，从页面布局和外观显示来看，一个网页的布局就类似于一篇报纸的排版，首先将网页分成大的模块，然后在模块里面再分成小的模块，所以块级元素多用来布局

B.行级元素：只占一小块空间，后面可以继续放内容，行级元素也称为行内标签，内联标签，使用块级元素将网页结构搭建好了后，使用行级元素来排版

C.行级元素和块级元素的区别：

块级元素独占一行

块级元素支持高和宽，行级元素不支持高和宽，行级元素高宽由内容来决定。

块级元素常常作为容器，可以容纳其他的行级元素，行级元素一般用来组织内容，即容纳文字图片超链接

块级元素：div、p、h、hr、table、ul、ol、form

行级元素：a、span、label、input、textarea、br、image

D.布局：

（1）使用div布局，在左右排列时，无法知晓，两块之间的空白有多大，table布局弥补了这个缺点。border-collapse：collapse -----table表双实线变单实线

（2）display：block表示将元素转换为块级

          display：inline表示将模块转换为行级

          display：inline-block行内块级元素，按照行级标签排列，但是具有块级标签的属性，但因为浏览器兼容的问题，两块之间有一小块空白，用float：left来替代

E.盒模型

（1）元素、边框（border）、外边距（margin）、内边距（padding）

（2）盒子宽度=元素宽度+padding*2+margin*2+border*2

（3）border-style：solid实线、dashed虚线、dotted点线

border-left左边边框-right右边边框-top上边边框-bottom下边边框

（4）内边距：padding；如果冒号后面只有一个参数，表示四周都是以这个参数为边距

如果是两个参数：第一个参数表示上下，第二个参数表示左右

如果是三个参数：第一个参数表示上，中间参数表示左右，最后一个参数表示下

四个参数就是上下左右；改变内边距会影响盒子大小，

（5）外边距：margin；外边距重叠：在一个方向如果设置多个外边距，会取得最大值

外边距的传递性：如果父类没有边框，设置margin-top，会将外边距传递到父类，

body距离windows窗口默认有5px的外边距

（6）设置最小宽度，min-width：900px，分辨率小于900后，会自动产生滚动条

（7）margin：0  auto，左右居中