目录:
♥一. css三大特性
♥二. 盒子模型
♥三. 边框
♥四. 内边距padding
♥五 : 外边距margin
♥六. 外边距塌陷象形
————————————————
♥一. css三大特性:继承性&层叠性&优先级
1.继承性:子元素有默认继承父元素样式的特点:
例如:1.color
2.文字样式的属性都可以,例如:font-size,font-weight,font-style,font-family
3.text-indent首行缩进,text-align对齐方式
4.line-height 行高
但是 不是就不可以,例如背景,宽高
2.层叠性:样式冲突时,只有选择器优先级相同时,才能通过层叠性判断的结果。
1.给一个标签设置:不同的样式,样式会层叠作用到一个标签上
相同的样式,此时 样式会层叠,最终写在最后的样式才会生效
3.优先级:看选择器的选择谁更精准,谁的优先级就越高,谁的范围就越大,谁就越低,important的权重最大,前提是能是继承的;
计算比较公式:行内个数:id选择器个数;类选择器个数;标签选择器个数
♥二. 盒子模型:内容&边框&内边距
1.内容:content:宽度
高度
♥三. 边框:border:复合属性最常用
例如: border:10px soild red;单个取值的连写,取值之间空格隔开
单个属性:连写形式:边框粗细:border-width
边框线条: border-style
边框杨色:border-color
边框单向:设置边框:顶部边框:border-top
底部边框:border-bottom
左边边框:border-left
右边边框:border-right
边框线条:虚实线: 实线:solid
虚线:dashed
点线:dotted
♥四. padding
边框与内容的距离:布局是如果内容居中且上下左右的边距一样-可以放大设置盒子-设置内边距
一般设置:四个值:padding: 10px 20px 30px 40px;表示:上-右-下-左
单方向设置:上-下-左-右边距:padding-top
padding-bottom
padding-left
padding-right
♥五 : 外边距margin
盒子与盒子的距离:写法同内边距一样,就是把padding变成margin
外边距:会出现,合并现象,垂直布局的块元素,上下margin 会合并需要,取取值大的,解决一般给设置一个。
♥六. 外边距塌陷象形:下回会持续分享!