自学前端第五天-CSS

css特性优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

!important不能给继承添加，自己有样式，不能继承父级。

权重叠加计算：先比较行内数哪个数字高就显示哪个，以此类推。（在html标写style属性的样式才是行内样式）

/* 行内,id,类、标签 */

/* (0,1,0,1) */

div #one { color: blueviolet; }

/* (0,0,2,0) */

.father.son { color: aqua; }

体验盒子模型：

写法顺序：从外到内：先设宽高背景色，放内容，调节内容的位置，控制文字细节

边框线==纸箱子 border:粗细 线条样式 颜色---不分先后顺序（solid:实线 、dashed:虚线、dotted:点线 ）

边框线方位 border-top: 3px dotted #000;

border-bottom: 3px dotted #000;

border-left: 3px dotted #000;

border-right: 3px dotted #000;

内边距==填充泡沫：出现在内容和盒子边缘之间

padding属性可以当作复合属性使用，表示单独设置某个方向的内边距 padding最多取四个值,顺序是上 右 下 左 三个值：上 左右 下 两个值：上下 左右

内减模式：变成CSS3的盒子模型，好处：加了border和padding不需要手动做减法

写法：box-sizing: border-box; 外边距：出现在两个盒子之间，出现在盒子外面（同内边距 ）margin

盒子尺寸=width/height+边框线

清除内外边距：*{margin: 0; padding: 0;}

版心居中：margin: 0 auto;