每日一博|05 CSS的盒模型及弹性布局

CSS的盒模型及弹性布局

1、CSS和模型构成

2、边框

基本属性

粗细：border-width

样式：border-style（默认没有边框，实线边框：solid，虚线边框：dashed，点线边框：dotted

颜色：border-color

<style>
        div {
     
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-color: blue;
            /*也可以直接写：border: 5px solid blue；没有顺序要求*/
        }
    </style>

    <div>这是边框</div>

代码实现：

注意：设置边框会撑大盒子的大小，如果不想撑大盒子尺寸可以设置：box-sizing: border-box；

边框撑大盒子展示：

3、内边距

通过padding来设置内边距，基本写法：

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

<style>
        div {
     
            height: 200px;
            width: 300px;
            box-sizing: border-box;
            padding-top