一.概述

1.什么是布局

就是把什么内容放在什么位置

2.文档流
（1）网页是多层结构，最底下的那一层成为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流进行排列的
用户只能看见多层结构最上面的那一层

（2）元素有两种状态

在文档流中
脱离文档流（不在文档流中）

（3）块元素在文档流中的特点

块元素肯定独占一行
自上向下垂直排列
默认的宽度是父类宽度（浏览器放大页面他就跟着放大，缩小他也跟着缩小）
默认高度是子元素高度

（4）行内元素在文档流中的特点

行内元素在页面中不会独占一行，只占自身的大小
自左向右水平排列，沾满一行才会换行继续自左向右继续排列
高度宽度都是看内容而定

二.盒模型(box model)

1简介：
（1）css将页面的所有元素都设置成了一个个矩形的盒子，所以对页面的布局就变成了矩形的摆放
（2）一个盒子的大小由内容区，内边距，边框共同决定
（3）盒子组成：内容区(content)，边框(border)，内边距(padding)，外边距(margin)

2.内容区
（1）元素中所有子元素和文本内容都会在内容区排列，内容区的大小由width和height决定（子元素出现在父元素的内容区）
width设置内容区的宽度
height设置内容区的高度

3.边框
（1）盒子的边缘，边框内是盒子内部，边框外是盒子外部，边框的大小会影响整个盒子的大小
（2）设置边框至少要设置三个样式（缺一不可），分别为：
border-width：边框宽度
border-color：边框颜色
border-style：边框样式
以上三个属性均可指定一到四个值，代表上下左右 | 值的个数 | 含义 | | —- | —- | | 1 | 代表上下左右都取这个值 | | 2 | 上下取第一个值，左右取第二个值 | | 3 | 上取第一个值，左右取第二个，下取第三个值 | | 4 | 代表上右下左，顺时针取值 |

（3）边框宽度还可以单独指定：

border-left-width 左边框宽度
border-right-width 右边框宽度
border-top-width 左边框宽度
border-bottom-width 左边框宽度

（4）边框样式：

solid：实线
dotted：点状虚线
dashed：虚线
double：双线

（5）常用简写样式：border：边框宽度边框颜色边框样式；

中间用空格隔开
例如：border: 10px red solid；

（6）border-collapse属性用来设置边框的合并

border-collapse：collapse；//表示合并边框
不设置该属性合并处会颜色加深，用来该属性就不会了

4.内边距
（1）内容区与边框的距离就是内边距，同样四个方向
padding-left，padding-top，padding-bottom，padding-right

（2）内边距影响盒子大小，背景色会延伸到内边距
（3）也可以简写，规则同上： padding：10px 20px 30px 40px；

值的个数	含义
1	代表上下左右都取这个值
2	上下取第一个值，左右取第二个值
3	上取第一个值，左右取第二个，下取第三个值
4	代表上右下左，顺时针取值

（4）若不想让内边距影响盒子大小，就不要设置width或height，没设置的属性就不会影响
（5）还可以在外边加一个不设置宽度和高度的父元素，这样子元素设置内边距也不会影响盒子的大小

5.外边距

（1）不影响可见框的大小，但是会影响盒子的位置，也会影响实际占位置大小
（2）四个方向：margin-top，margin-left，margin-bottom，margin-right
（3）外边距可以设置负值
（4）简写方法同上

6.水平方向的布局

（1）一个元素在其父元素中水平方向的布局跟以下因素有关：

左右边框宽度，左右内边距，左右外边距，子元素宽度

（2）应满足水平布局等式：

左边框宽度+右边框宽度+左内边距+右内边距+左外边距+右外边距+子元素宽度 = 父元素宽度

（3）若不满足该等式，则称为过度约束，且会自动调整（auto理解为自动调整）

没有auto情况下：浏览器会自动调整右外边距，外边距可以为负值（margin-right）

例如只有子元素宽度200，父元素宽度800，其余为0；等式不成立，浏览器会自动跳转margin-right为600；

有atuo的情况下（只有width，margin-left，margin-right这三个可以设置为auto）

若有一个值为auto，浏览器会自动调整该值使等式成立
若有宽度和一个外边距为auto，则浏览器会自动调整外边距为0，宽度调到最大
若只有两个外边距为auto，那么浏览器会让他们平分需要的宽度（经常利用这个特点来设置水平居中）
若有宽度和两个个外边距为auto，则浏览器会自动调整两个外边距为0，宽度调到

7.垂直方向的布局

（1）在不设置父元素高度的情况下，父元素会被子元素撑开，由子元素决定
（2）子元素的高度超过父元素，则子元素会溢出，使用overflow属性来设置如何处理溢出（这是父元素的属性）
（3）overflow的属性值（切记overflow是父元素的属性）

visible：默认值，子元素会溢出，在父元素外部显示
hidden：溢出内容将会被裁剪掉，不在显示
scroll：生成两个滚动条，上下和左右，通过滚动条来查看完整内容（肯定两个，即使不需要左右滚动，也是两个滚动条）

auto：根据需要生成滚动条

8.外边距的折叠（相邻且垂直才会重叠）

（1）兄弟元素的外边距重叠：会取两者间的较大值（两者都是正值）
特殊情况：

一正一反，取和
都为负，取绝对值较大的

（2）父子元素的外边距重叠：子元素会传递给父元素（父随子动）

解决方法：
- 为父元素设置上边框
- 为父元素设置上内边距
- 为父元素添加overflow：hidden；
  9.行内元素的盒模型
  （1）行内元素不支持设置宽度和高度
  （2）行内元素可以设置padding，垂直方向可能会覆盖下边的盒子，但不会改变他们的位置，不会影响布局
  （3）行内元素可以设置border，垂直方向可能会覆盖下边的盒子，但不会改变他们的位置，不会影响布局
  （4）行内元素可以设置margin，垂直方向可能会覆盖下边的盒子，但不会改变他们的位置，不会影响布局
  （5）display属性：用于设置元素显示的类型，可选值如下：
inline：将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为行内块元素（行内块元素：既可以设置宽度高度，又不会独占一行）
table：将元素设置为一个表格
none：将元素设置为不在页面中显示（不占位置）

（6）visibility属性也用来设置元素显示的状态，可选值如下：

visible：元素在页面中正常显示
hidden：元素在页面中不显示，但是占位置

10.浏览器默认样式：

（1）通常情况下，在开发人员没有设置样式时，浏览器为了确保页面不会没有样式，会设置默认样式
（2）默认样式会影响布局，通常编写网页必须去除默认样式
（3）去除下划线：text-decoration: none;
（4）开发人员工具可查看样式

（5）在去除样式是，可以采用通配符去除，比较简便。但是复杂页面还是要用各种选择器一个一个去除

*{
  margin：0；去除所有外边距
  padding：0；去除所有内边距
}

（6）去除列表的点用list-style：none；
（7）准确去除所有默认样式，可以用link标签引入下面的代码

/* 去除标签自带的margin和padding */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,td{margin:0;padding:0} 
/* 设置页面的统一的样式 */
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;word-wrap:break-word;}
/* 去除a标签默认样式 */
a{text-decoration:none}
/* i使斜体的文字正常 em使强调的内容正常 */
em,i{font-style:normal;}
strong,b{font-weight: 100;}
/* 去除li元素默认的小圆点 */
li{list-style:none}
/* 去除图片的margin和padding */
img{display: block;} 
/* 设置单元格为单线样式 */
table{border-collapse:collapse;border-spacing:0}
/* 首行缩进连两个单位 */
.indent{text-indent:2em;}
.noborder{border:0;}
/* 省略号 */
.ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/* 清除浮动 */
.clear::after{content:"." ;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

三.布局练习

1.京东图片列表

（1）目标：

（2）代码实现：

<!DOCTYPE html>
<img lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>

    <style>  
        body{/*去除默认样式*/
        margin:0;
        }
        div{/*按京东尺寸设置盒子*/
            width: 200px;
            height: 500px;
            overflow: hidden;
            /*设置边距 达到跟京东一样的位置*/
            margin-left: 1150px;
            margin-top: 115px;
        }
        img{/*100%显示，不然只显示一部分*/
            width: 100%;
            margin-bottom: 9px;
        }
    </style>
</head>
<body>
    <div>
        <!--表示没用的超链接-->
        <a href="javascript:;"><img src="./1.jpg"></a>
        <br>
        <a href="javascript:;"><img src="./2.jpg"></a>
        <br>
        <a href="javascript:;"><img src="./3.jpg"></a>
    </div>
</body>
</html>

（3）效果：

2.京东侧边导航

（1）目标：

（2）代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边导航栏</title>
    <style>
        body{/*去除默认样式*/
            margin: 0;
            background-color: cadetblue;
        }
        .left_nav{
            width: 190px;
            height: 460px;
            overflow: hidden;
            padding: 10px 0;
            background-color: rgb(216, 221, 226);
            margin-left: 356px;
            margin-top: 252px;
        }
        .item{
            height: 25px;
            padding-left: 5px;
            width: 100%;
        }
        .item a{
            font-size: 14px;
            text-decoration: none;/*去除下划线*/
        }
        a:hover{
            background-color: brown;
        }/*鼠标移入变色*/
    </style>
</head>
<body>
    <div class="left_nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">电脑</a>/
            <a href="#">办公</a>

        </div>
        <div class="item">
            <a href="#">家居</a>/
            <a href="#">家具</a>/
            <a href="#">家装</a>/
            <a href="#">厨卫</a>
        </div>
        <div class="item">
            <a href="#">男装</a>/
            <a href="#">女装</a>/
            <a href="#">童装</a>/
            <a href="#">内衣</a>
        </div>
        <div class="item">
            <a href="#">美妆</a>/
            <a href="#">个人清洁</a>/
            <a href="#">宠物</a>
        </div>
        <div class="item">
            <a href="#">女鞋</a>/
            <a href="#">箱包</a>/
            <a href="#">钟表</a>/
            <a href="#">珠宝</a>
        </div>
        <div class="item">
            <a href="#">男鞋</a>/
            <a href="#">运动</a>/
            <a href="#">户外</a>
        </div>
        <div class="item">
            <a href="#">房产</a>/
            <a href="#">汽车</a>/
            <a href="#">汽车用品</a>
        </div>
        <div class="item">
            <a href="#">母婴</a>/
            <a href="#">玩具乐器</a>
        </div>
        <div class="item">
            <a href="#">食品</a>/
            <a href="#">酒类</a>/
            <a href="#">生鲜</a>/
            <a href="#">特产</a>
        </div>
        <div class="item">
            <a href="#">艺术</a>/
            <a href="#">礼品鲜花</a>/
            <a href="#">农资绿植</a>
        </div>
        <div class="item">
            <a href="#">医药保健</a>/
            <a href="#">计生情趣</a>
        </div>
        <div class="item">
            <a href="#">图文</a>/
            <a href="#">文娱</a>/
            <a href="#">教育</a>/
            <a href="#">电子书</a>
        </div>
        <div class="item">
            <a href="#">机票</a>/
            <a href="#">酒店</a>/
            <a href="#">旅游</a>/
            <a href="#">生活</a>
        </div>
        <div class="item">
            <a href="#">理财</a>/
            <a href="#">众筹</a>/
            <a href="#">白条</a>/
            <a href="#">保险</a>
        </div>
        <div class="item">
            <a href="#">安装</a>/
            <a href="#">维修</a>/
            <a href="#">清洗</a>/
            <a href="#">二手</a>
        </div>
        <div class="item">
            <a href="#">工业品</a>
        </div>
    </div>
</body>
</html>

（3）效果：

四.盒子的大小

1.默认情况，盒子的大小由内容区，内边距和边框共同决定
2.根据box-sizing设定，决定盒子尺寸的计算方式，可选值有两个：
（1）content-box：默认值，指宽度和高度表示内容区的大小
（2）border-box：指宽度和高度表示可见框的大小（即内容区，内边距，边框）

这样就会挤压内容区使其变小

五.轮廓阴影和圆角
1.轮廓：outline
（1）用法：与border相同
（2）区别在于边框border会改变盒子的大小，而轮廓outline不会，会在保证盒子大小的基础上加轮廓
（3）用法举例：outline：10px red solid；
2.阴影：box-shadow
（1）阴影在盒子的正下方，不设置偏移量看不见
（2）阴影的设置不会改变盒子的大小
（3）用法：box-shadow：10px 10px 10px 10px red inset/outset；
第一个值表示水平偏移量，正值向右移动，负值向左移动
第二个值表示竖直偏移量，正值向下移动，负值向上移动
第三个值表示模糊半径，设置了会有较真实的阴影效果
第四个值表示阴影的大小
第五个值表示阴影颜色
第六个值表示将外部阴影改为内部阴影（inset表示内部阴影，outset表示外部阴影，默认是外部阴影）
前两个值默认为0，即不偏移，就看不见了；一般只有前两个值必须设置，其余的可有可无
外部阴影不用写，写了会失去阴影；像设置内部阴影写inset

3.圆角：border-radius
（1）可以设置一到四个值，表示上左，上右，下右，下左（顺时针）
（2）可以单独设置上下左右

border-top-left-radius 表示左上角圆角
border-top-right-radius 表示右上角圆角
border-bottom-left-radius 表示左下角圆角
border-bottom-left-radius 表示右下角圆角

（3）想将盒子设置为圆形，就用border-radius：50%

web前端

CSS3盒模型

一.概述

1.什么是布局

2.文档流

二.盒模型(box model)

1简介：

2.内容区

3.边框

4.内边距