css有三大特性:层叠性,继承性,优先级。
层叠(覆盖)性:解决冲突
就近原则
恰当地使用继承可以简化代码,降低css的复杂性
行高的继承:font:12px/1.5 1.5表示当前文字大小的1.5倍
body行高1.5,这样写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
继承的权重是0,只要该元素没有被选中,那么不论父元素的权重多高,对孩子的都是0
这也是为什么body的样式不会影响到a标签的默认样式
权重叠加-复合选择中
css盒子模型
学习目标:
准确说出盒子模型的四个组成成分
使用边框复合写法去添加边框
能够计算盒子实际大小
给盒子设计圆角边框
给盒子添加阴影
给文字添加阴影
组成:边框(border),外边距(margin),内边距(padding)和实际内容(content)
margin可以控制盒子间的距离
边框:粗细,样式,颜色
复合写法:粗细 样式 颜色;(没有顺序)
table,
td{
border:1px solid pink;
}
使表格外部和内部都有边框
border-collaps:collaps 将相邻的边框合并在一起,而不是重叠更粗(针对表格内部的线)
边框会影响盒子的实际大小 增加
padding的复合写法
指定padding后:
1.内容和边距有了距离,添加了内边距,
2.padding影响了盒子的实际大小 增加
只指定左右padding,而不指定上下的:padding:0 20px;
在实际开发中,padding常常会带来一些坏的影响,因为我们指定了盒子的大小,但是添加pdding后又会破坏这个大小
如果盒子本身没有指定padding大小,那么padding不会撑开盒子大小
margin的复合简写和padding是一致的
外边距典型应用:让块元素水平居中
要求:必须指定宽度。左右的外边距都设置成auto
如何让行内元素或行内块元素水平居中:让其父元素添加text-align:center即可。 (例如div里面嵌套了一个span)
存在的问题1:相邻块元素外边距垂直合并时取外边距的最大值
解决的办法1:尽量只对一个块指定外边距
存在的问题2:嵌套块元素垂直外边距的塌陷-父子元素都有外边距,父元素会按较大的那个外边距塌陷
解决的办法2:
清楚内外边距企划
为了兼容性,尽量只对行内元素设置左右的内外边距。