三大特性
层叠性
样式冲突:就近原则
样式不冲突:不会层叠
继承性
子承父业
降低样式复杂性
可继承样式(text- ,font- ,line-,color属性)
行高的继承性
body {
font :12px/1.5 microsoft yahei;
}
行高可以跟单位也可以不跟
如果子元素没有设置行高,则会继承父元素的行高为1.5
此时的子元素的行高是当前子元素的文字大小*1.5
优先级
排序
选择器相同 则执行层叠性
选择器不同 根据选择器权重执行
继承 或者 * 0 0 0 0 /0
元素选择器 0 0 0 1 /1
类选择器 伪类选择器 0 0 1 0 /10
id选择器 0 1 0 0 /100
行内样式 1 0 0 0 /1000
注意点
1.权重不会有进位
2.先判断左侧,依次往下比较
3.继承的权重是0
4.a链接浏览器默认制定了一个样式 蓝色的有下划线
权重的叠加
eg:
div ul li --->0 0 0 3
.nav ul li ---> 0 0 1 2
a:hover ---> 0 0 1 1
.nav a ---> 0 0 1 1
盒子模型
盒子模型
浮动
定位
看透网页布局的本质
1.准备好网页元素基本为盒子
2.设置盒子样式(CSS)摆放
3.往盒子里面装内容
组成
border边框
边框粗细
border-width
边框样式
border-style
solid实线边框
dashed 虚线
dotted 点线边框
边框颜色
border-color
边框的复合写法
border: 1px solid red; 没有顺序!!
边框可以分开写
border-top:
border: 1px solid blue;顺序不能替换
border-top: 1px solid red;
border-collapse: collapse;
表示相邻边框合并到一起
边框会影响盒子的实际大小
content内容
padding内边距
padding-top
padding-left
padding-right
padding -bottom
复合写法
padding:5px;
如果padding后面只跟1个值,上下左右全部都是5
padding:5px 10px;
两个值:上下为5,左右为10;
padding:5px 10px 20px;
三个值:上5 左右10 下20
padding:5 px 10px 20px 30px;
四个值:上5 右10 下20 左30 顺时针
注意点
内边距也会影响盒子大小
解决方案:用width/height减去内边距大小
字数不同用padding值
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
margin外边距
控制盒子与盒子之间的距离
用法
margin-left
margin-right
margin-top
margin-bottom
复合属性
简写方式代表的意义与padding一致
典型应用
块级盒子水平居中对齐
要求
1.盒子必须指定宽度
2.左右外边距设置为auto
常见写法
margin-left:auto; margin-right: auto;
margin: auto;
margin:0 auto;
以上为块元素方式
行内元素或者行内块元素水平居中给其父元素添加text-align : center即可
嵌套块元素塌陷问题
垂直外边距的塌陷
对于父子关系的块元素,父元素有上边距同时子元素也有上边距,此时父元素塌陷较大的外边距值。
解决方案:
1.为父元素定义上边框
2.为父元素定义上边距
3.为父元素添加overflow:hidden
清除内外边距
网页元素有默认的内外边距,不同浏览器默认不一致,使用前先清除内外边距
* {
margin: 0;清除内边距
padding: 0;清除外边距
}CSS开头第一句话
行内元素尽量只设置左右的内外边距,不要设置上下外边距。转化为行内块元素就行了。