本文详细介绍了CSS中的伪类选择器、背景属性的使用（包括颜色、图片、重复模式等）、行高概念及其应用、标签嵌套规则，以及盒子模型（边框、内边距、外边距）的设定和常见问题解决方案。
目录
01 伪类选择器
伪类选择器：
：link 普通链接状态（主要针对a标签）
：visited 链接访问过后的状态（主要针对a标签）
：hover 鼠标悬停的状态
：active 鼠标按住的状态
：focus 针对表单元素 获取焦点时的状态
02 background 背景的使用
background 背景的设置:
背景颜色：background-color
背景图片：background-image:url(图片地址) 图片默认按原图大小平铺
背景图片重复模式：
background-repeat:
repeat(默认值 横向纵向都重复)
no-repeat(不重复)
repeat-x(横向重复)
repeat-y(纵向重复)
背景模式：background-attachment:scroll(默认)|fixed
fixed 背景图片固定 不会随着页面的滚动而滚动
背景位置：background-position 针对不重复的背景图片 所放的位置
方向单词：
横向：left center right
纵向：top center bottom
像素值：
距离左边的px 距离上面的px
百分比：
距离左边的百分比 距离上面的百分比
只写一边 另一边默认center
位置是整数 则往右下角位移
如果是负数 往左上角位移
背景大小：background-size:contain|cover
contain(纵向等比例缩放直到占满父元素的高度)
cover(横向等比例缩放直到占满父元素的宽度)
背景属性的连写：background:color image repeat attachment position/size
03 行高的使用及标签的嵌套规则
1.行高的使用
css的行高 = 文字的上边距+文字高度+文字的下边距
如果 一个元素内部只有一行文字 那么line-height设置为当前元素高度 单行文本垂直居中对齐
设置文字水平方向的排列方式:
text-algin:left(左对齐)|center(居中对齐)|right(右对齐)
2.标签的嵌套规则
1.块级标签可以嵌套一切其他标签
2. 行内和行内块 互相之间可以嵌套 但是不能嵌套块级
注意:
p标签是块级元素 但是不能嵌套其他的块级标签 ,一旦嵌套会出现两对p标签 然后块级元素在p标签之外.
04 盒子模型
1.border设置盒子的边框属性:
边框分为四个方向： top right bottom left
边框分为三个属性：边框颜色 边框样式 边框宽度
border-top-color:上边框颜色
border-top-style:上边框样式 solid dotted dashed double
border-top-width:px值 上边框宽度
四个方向连写：border：width style color;(表示四个方向统一设置)
三个属性连写：border-方向：width style color;(表示只给指定的方向设置)
2.padding 内边距:
padding内边距:表示当前盒子内的内容到盒子边的距离
内边距分为四个方向:
padding-left
padding-right
padding-top
padding-bottom
属性连写:
padding:四个值 (上 右 下 左)
padding:三个值 (上 左右 下)
padding:两个值 (上下 左右)
padding:一个值 (上下左右)
3.padding属性会撑大盒子及解决办法
padding属性会撑大盒子:
盒子最终的宽度=盒子自身设置的宽度+左右padding+左右border
盒子最终的高度=盒子自身设置的高度+上下padding+上下border
如何设置padding才能不撑大盒子?
块级元素不设置宽度时 会占满父容器
子元素在没有设置宽度的时候,设置左右padding不会撑大当前的盒子
子元素在设置左右padding时,加起来超过了父容器的宽度会撑大盒子
padding撑大盒子问题的解决方式:
box-sizing: content-box (谷歌盒子模型) | border-box (IE盒子模型)
谷歌盒子模型：盒子最终的宽高=盒子自身的宽高+padding+border
IE盒子模型： 盒子最终的宽高=盒子设置的宽高 padding border系统会自动减去
4.margin外边距：
margin外边距：表示盒子与盒子之间的距离
分为四个方向:
margin-left （左外边距）
margin-right (右外边距)
margin-top (上 外边距)
margin-bottom (下外边距)
margin连写:
margin: 四个值 (上 右 下 左)
margin:三个值 (上 左右 下)
margin:两个值 (上下 左右)
margin:一个值 (上下左右)
margin的特殊值：auto 表示外边距自适应 把剩余空间分配给当前外边距的方向
auto针对上下外边距不生效
margin:0 auto; 块级元素 横向居中(非常常用)
5.margin属性使用中会遇到的问题
1.边框合并：
元素之间设置边框时，相邻的元素两个边的会重叠在一起 导致变宽.
如何让相邻的两个边的边框和其他不相邻的边的边框相同.
解决方法是：
1.上下相邻 把上方元素的下边框或者下方元素的上边框设置为负的边框宽度
2.左右相邻 把左边元素的右边框或者右边元素的左边框设置为父的边框宽度
2.边框塌陷：
意思是子元素设置margin-top属性的时候会带着父元素一起下沉
解决方式：
1.给父元素添加透明的上边框
border-top: 1px solid transparent;
2.块级格式化上下文（BFC） 清除一些异常的现象
overflow：hidden；
3.行内元素上下margin不生效，所以如果使用上下margin时最好使用块级或者行内块元素
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
