css学习笔记-box模型

css学习

1.box模型

css学习

1.box模型

定义一个class为box的div

<div class="box"></div>

使用通配符‘*’可以使得元素边距初始化

    /* 通配符 '*' 使得元素边距初始化 */
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

margin(外边距)

表示两个div的边框之间的距离

margin:10;
margin:10 10;
margin:10 10 10 10

1.表示div元素的上下左右外边距均为10px

2.表示div元素的上下，左右外边距分别为10px

3.表示div元素的上、右、下、左的外边距分别为10px

padding(内边距)

表示div内容到边框之间的距离

padding:10;
padding:10 10;
padding:10 10 10 10

1.表示div元素的上下左右内边距均为10px

2.表示div元素的上下，左右内边距分别为10px

3.表示div元素的上、右、下、左的内边距分别为10px

border(边框)

表示div元素的边框

border: 1px solid red;

表示边框的 宽度(border-width) 边框样式(border-style) 边框颜色(border-color)

box-sizing(盒子大小)

box-sizing:border-box;

若定义box-sizing为border-box,则盒子的大小会固定，不会随着padding和border的改变而改变

元素的宽度和高度计算

默认情况：

元素的实际宽度 = border-left + boder-right + width + padding-left + padding-right

元素的实际高度 = border-top+ boder-bottom+ height+ padding-top+ padding-bottom

若不定义 box-sizing为border-box,元素的宽度和高度会随着padding和border的改变而改变

设置box-size:border-box:

元素的实际宽度 = width

元素的实际高度 = height

若定义 box-sizing为border-box,元素的宽度和高度不会随着padding和border的改变而改变

使box居中显示

    .box{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
    }

设置margin：auto可以使得元素的左右外边距距离相等

margin: 0 auto;