目录
1. css的三大特性
1.1 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
- 样式不冲突,不会层叠
- 长江后浪拍前浪,前浪被拍死在沙滩上
1.2 继承性
现实中的继承:我们继承了父亲的姓
css中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。
注意:
- 恰当的使用继承可以简化代码,降低css样式的复杂性
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
- 龙生龙,凤生凤,老鼠生的孩子会打洞。
特殊:行高的继承
body{
font:12px/1.5 ;
}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高为1.5
- 此时子元素的行高是:当前子元素的文字大小*1.5
1.3 继承性
优先级:
优先级注意点:
1. 权重是有4组数字组成,但是不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
3.等级判断从左到右,如果某一个数值相同,则判断下一位数值
4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内选择器1000,!important无穷大。
5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0.
复合选择器的叠加问题:
权重会叠加,但永远不会进位
ul li 权重 0,0,0,1 +0,0,0,1 = 0,0,0,2权重比单独的li高,所以显示是绿色
ul li {
color:green;
}
li{
color:red
}
2.盒子模型
2.1 看透网页布局的本质
网页布局过程
1.先准备好相关的网页元素,网页元素基本都是盒子模型
2.利用css设置好盒子样式,然后摆到相应的位置。
3.往盒子里面装东西
网页布局的核心本质:css摆盒子
2.2 盒子模型的组成
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形盒子,也就是一个盛装内容的容器。
css盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距,和实际内容。
2.3 边框(border)
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
语法:
border :border-width || border-style || border-color
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的样式的属性值: solid 实线边框 dashed 虚线边框 dotted 点线边框
边框的复合写法: css边框属性允许你指定一个元素边框的样式和颜色。
border :1px solid red;
边框的分开写法:
border-top:1px solid red;
(只设置上边框 ,其余同理)
可以单独设定一条边
2.4 表格的细线边框
border-collapse属性控制浏览器绘制边框的方式。它控制相邻单元格的边框。
语法:
border-collapse :collapse;
collapse单词是合并的意思
boder-collapse :collapse;表示相邻边框合并在一起
2.4.1 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两方案解决;
1.测量盒子大小的时候,不量边框
2.如果测量的时候包含了边框,则需要width/height减去边框宽度
2.5 内边距
padding属性用于设置内边距,即边框与内容之间的距离
padding-left/right/top/bottom 可以分别设左右上下外边距的距离
2.5.1 内边距的复合属性
4个属性时按照上右下左的顺序设置
2.5.2 内边距会影响盒子的实际大小
如何盒子本身没有width/height属性,则此时padding不会撑开盒子大小。
2.6 外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离。
外边距可以让块级盒子水平居中,但是必须满足两个条件:
1. 盒子必须指定了宽度
2.盒子左右外边距都设置为auto
常见的写:
margin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto ;
注意:以上方式是让块级元素水平居中,行内元素或者行内块水平居中给其父元素添加text-align:center 即可。
2.6.1 外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距
解决办法:
1.可以为父元素上定义边框
2.可以为父元素定义上内边框
3.可以为父元素添加overflow:hidden。
还有其他方法,比如浮动,固定,绝对定位的盒子不会有塌陷问题。
2.7 清除内外边距
网页元素有很多都带有默认的内外边距,而且不同浏览器默认也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
*{
padding:0;
margin :0 ;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。