CSS 三大特性
1. CSS层叠性
所谓层叠性是指多种CSS样式的叠加。(样式冲突,遵循的原则时就近原则
样式不冲突,不会层叠)
2. CSS继承性
子承父业,既子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
3. CSS优先级
两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
(权重不同看权重,权重相同就近原则)
*CSS的特殊性(权重的计算)
css特性有四个数字组成,从左到右,左边最大,数位没有进制,级别之间不可超越
继承的贡献值 | 0,0,0,0 |
---|---|
每个元素贡献值 | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个id | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
总结优先级
1.!important
2.行内样式
3.id选择器
4.类选择器,属性选择器,伪元素,伪类
5.元素选择器
6.通配符选择
7.同一类选择就近原则
css盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
盒子边框写法
设置内容 | 样式属性 | 常用属性值 |
上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
设置边框弧度:border-radius(半径): 左上 右上 右下 左下
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白” (这段空白通常不能放置其他内容。)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
注:取值顺序跟内边距相同。
盒子居中设置
可以让一个盒子实现水平居中,需要满足一下两个条件:
- 必须是块级元素。
- 盒子必须指定了宽度(width)
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改为 auto
为了更方便地控制网页中的元素,制作网页时,需要清除元素的默认内外边距:
注意:当上下相邻的两个块级元素相遇时,他们之间的垂直间距不是top,bottom的和,而是两者的较大者,相邻块元素的垂直外边距的合并
解决方案:把较大值改成期望的值嵌套块级元素垂直外边距的合并