【网页设计自习室#012】盒子模型

一.优先级/权重

第一级	第二级	第三级	第四级
0	0	0	0
行内样式的个数（style）	id选择器的个数	类选择器的个数	标签选择器的个数

权重决定了样式的优先级，可计算出在多重选择器下呈现的最终效果

二.盒子模型

   <div>盒子</div>

div{
    width: 400px;
    height: 400px;
    background-color: rgb(0, 179, 255);
    border: 1px solid brown;
    padding: 20px;
    margin: 70px;
}

2.1边框border

盒子标签属性：
width/height 宽高
background-color 背景颜色
border 边框（solid实线 dashed虚线 dotted点线） 快捷键bd+tap

//边框border单方向加线
border-left: 5px solid black;
border-right: 5px solid black;

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	solid实线 dashed虚线 dotted点线
边框颜色	border-color	颜色取值

2.2内边距padding

div{
    width: 380px;
    height: 380px;
    background-color: rgb(0, 255, 42);
    padding: 10px 5px 15px 90px ;
    //顺时针取值
}

div{
    width: 380px;
    height: 380px;
    background-color: rgb(0, 255, 42);
    padding: 10px 50px  ;
}

CSS3中

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 10px solid black;
    padding: 20px;
    box-sizing: border-box;//c3中的内减模式
}

2.3外边距margin

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 70px 20px;
}

三.初始化

* {
    margin: 0;
    padding: 0;
}

居中

{
    margin: 0 auto;
    //auto为左右相等
}

注1：垂直布局的块级元素，上下margin会合并 取两者之中的最大值

注2：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

解决方法：

1.给父元素设置border-top或者padding-top

2.给父级元素设置overflow:hidden

3.转换为行内块元素

4.设置浮动

注3：margin或padding无法改变行内标签的垂直位置

解决方法：使用line-height改变行高