CSS(盒子模型) 笔记03

 一. 四种盒子模型

<!-- 1.块级盒子（标签、元素）[display：block]   特点：独占一行，对宽度高度支持 e.g div h1~h6 p ul li-->
<!-- 2.内联级盒子[display:inline]   特点：不独占一行，对宽度高度不支持  e.g  a span -->
<!-- 3.内联块状盒子[display:inline-block]   特点：不独占一行，对宽度高度支持  e.g img  input -->
<!-- 4.弹性盒子[display:flex]    特点：默认该元素无论放不放的下子元素，子元素都横着布局-->
<!-- 注意：没有特定的弹性盒子，需要添加display：flex标签手动设置 -->
<!-- 由此得知，可以通过display元素更改盒子的属性 -->

div{
    background-color: blue;
    color:pink;
    display:flex; 
    /* 将div标签设置为弹性盒子 */
}

span,h1{
color:red;
display:block;
/* 将span,h1标签设置为块级盒子 */
}

二.盒子内部

 盒子由外至内：外边距>边框区>填充区>内容区

1.内容区

/* 内容区*/

 div{
    width:100px;
    height:100px;
    box-sizing:content-box;
    /* content-box 表示对内容区宽高进行设置，而border-box表示的是对整个进行处理 */
 }

2.填充区

 
 /* 填充区 padding（填充规则表达：从上开始，顺时针旋转，没有则对称） */

 div{
    padding:10px; /* 上下左右填充10px */
    padding:10px 20px; /* 上下，左右 */
    padding:10px 20px 30px;
    /* 上，左右，下 */
    padding:10px 20px 30px 40px;/* 上，右，下，左 */

 }

/* 特定方向填充：
 padding-top
 padding-bottom
 padding-left
 padding-right
*/

3.边框区

 /* 
 边框区 border 复合属性
 基础属性：
 border-style  边框样式-solid实线
 border-color  边框颜色
 border-width  边框宽度
 上下左右单独设置：
 border-top
 border-bottom
 border-left
 border-right
 自由组合型：
 e.g
 border-top-color
 border-right-style
 ...(12种组合)
  */

 

div{
    border-color: blue;
    border-style:dotted;
    border-width: 10px;
}


div{
    border-top:double 8px yellow;
    /* 对上边框单独设置 */
}

4.外边距区

/* 外边距区 (方向规则同边框区)*/
/* 特殊：auto局中-只能块级元素使用 */
*{
    margin:0;
    padding:0
}
/* margin常用于初始化消除初始空隙 */
 div{
    background-color: blue;
    width:100px;
    height:100px;
    margin:10px auto 10px;
    /* 上：10px,水平：居中，下：10px */
    /* auto 用于水平处理 */
    box-sizing:border-box;
    /* border-box 对整个盒子进行设置 */
 }