前端（四）—— 盒模型成员、属性、布局

盒模型

一、盒模型概念与成员

1、什么是盒模型

广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content

2、盒模型的组成部分

（1）margin：外边距，控制布局

margin的成员：margin-left，margin-right，margin-top，margin-bottom

赋值：1.规定起始 2.顺时针 3.不足找对面

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

（2）border：边框

border成员：border-width(宽度)、border-color(颜色)、border-style(风格)

边框透明（透出背景颜色）：border-color:transparent

不透明时边框颜色一般设为：border-color: #333

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

（3）padding：内边距，控制布局

padding成员：padding-left、padding-right、padding-top、padding-bottom

赋值：1.规定起始 2.顺时针 3.不足找对面

与content共有背景颜色

赋值个数	方位
1	上下左右
2	上下 \| 左右
3	上 \| 左右 \| 下
4	上 \| 右 \| 下 \| 左

（4）content：内容显示区域

通过设置width与height来规定content
块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

二、边界圆角属性

1、成员

border-top-left-radius（左上），border-top-right-radius（右上），border-bottom-left-radius（左下），border-bottom-right-radius（右下）

2、单方位赋值

赋值个数(值类型：长度 \| 百分比)	解释
1	横纵
2	横 \| 纵

3、按角整体赋值

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下

强调（参考案例）：

不分方位(横纵)

1. 左上为第一个角,顺时针,不足找对角

分横纵

1. 前控制横向,后控制纵向
2. 横向又可以分为1,2,3,4个值,纵向毅然

4、案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边界圆角</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*单角设置*/
        .box {
            /*一个固定值: 横纵*/
            border-top-left-radius: 100px;
            /*两个固定值:横 纵*/
            border-top-left-radius: 100px 50px;
            /*百分比赋值*/
            border-top-left-radius: 100%;
        }

        /*整体赋值*/
        .box {
            /*不分方位(横纵)*/
            /*左上为第一个角,顺时针,不足找对角*/
            /*border-radius: 10px 100px 50px;*/

            /*区分横纵*/
            /*1./前控制横向,后控制纵向*/
            /*2.横向又可以分为1,2,3,4个值,纵向毅然*/
            border-radius: 10px 100px 50px / 50px;
            /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
            /*所有最多可以赋值8个值*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

边界圆角

三、其它属性

1、max-widht，min-width、height

2、overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

3、display

值	描述
inline	内联
block	块级
inline-block	内联块

四、布局

1、盒模型布局基本介绍

布局方位：margin-left、margin-right、margin-top、margin-bottom
影响自身布局：margin-left、margin-top
影响兄弟布局：margin-right、margin-bottom
正向 / 反向：正值 / 负值

2、margin布局坑位

很多语义标签具有默认margin
父子标签margin-top重叠取大者
兄弟标签margin-bottom、margin-top重叠取大者

赋值个数(值类型：长度 \| 百分比)	解释
1	左上右上左下右下
2	左上右下 \| 右上左下
3	左上 \| 右上左下 \| 右下
4	左上 \| 右上 \| 右下 \| 左下