本文介绍了CSS中的伪类和伪元素，包括:focus、:first-child、:lang等伪类以及:first-letter、:first-line、:before和:after等伪元素。接着详细阐述了CSS盒模型，包括行级元素与块级元素的区别，以及display属性在布局中的应用。还讨论了如何使用display、float进行布局，并详细讲解了边框、内边距和外边距的设置，以及盒模型的计算方式。最后提到了外边距的重叠和传递性，以及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，左右居中
扫一扫
4357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
