盒子模型

布局

1.文档流

<!-- 
    网页是一个多层结构(蛋糕)
文档流是蛋糕的底层，是网页的基础
        元素的状态：
            在文档中
            不在文档中(脱离文档流)
        元素在文档流中的特点:
            -块元素
                ①独占一行(自上而下垂直排列)
                ②默认宽度是父元素的全部
                ③默认高度是被子元素撑开
            -行内元素
                ①行内元素只占元素自身大小
                ②行内元素在页面从左到右的排列,如果一行不能放下，则换行到另一行
                ③行内元素默认的宽度和高度都被撑开
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>

.box1{
    background-color: blueviolet;
    height: 30px;
}
.box2{
    background-color:burlywood;
     90px;
}

2.盒子模型

<!-- 
    css将页面中的所有元素都设置为了一个矩形的盒子
    内容区(content)
    内边距(padding)
    边框(border)
    外边距(margin) 
-->
<div class="box"></div>

内容区

/* 2.1 */
/* 内容区(content)：元素的所有的子元素和文本内容都在内容去中排列
        内容区的大小由width和height两个属性来设置
        width：设置宽度
        height：设置高度
*/
.box {
     200px;/*设置内容区*/
    height: 200px;
    background-color: #bfa;
}

边框

/* 2.2 */
/* 边框(border):边框属于盒子边缘，盒子内外部
边框至少需要设置的三个样式：
    宽度:border-width
    颜色：border-color
    样式：border-style 
*/
/* border-width 默认值，一般都是3px */
border- 10px;
border-color: red;
border-style: solid;

/* 2.2.1 */
/* border-可以用来指定四个方向的边框的宽度(顺时针方向) */
border-10px 20px 30px 40px;
/* 上右下左 */
/* 三个值：上 左右 下 */
border- 10px 30px 40px;
/* 两个值：上下 左右 */
border- 10px 40px;
/* 单独设置 */
border-top- 20px;
/* border-xxx-width
    xxx取值：top、right、bottom、left
 */

/* 2.2.2 border-color:
用来指定边框的颜色，可以分别指定四个边的边框
*/
border-color:orange red yellow green;
border-left-color:orange;

/* 2.2.3 border-style:指定边框的样式
    solid 实线
    dotted 点状虚线
    dashed 虚线
    double 双线
 */

/* 2.2.4 border简写，随便写，无任何顺序要求 */
border：10px solid red;
/* border-xxx */

/* 2.2.5 轮廓阴影和圆角 */

<!-- 2.2.5.1 轮廓 -->
<div class="box1"></div>
<span>dasdf</span>

/* outline用来设置元素的轮廓线，用法与borderi相同
差别：轮廓不会影响框的大小
 */
.box1{
     200px;
    height: 200px;
    background-color: #bfa;
    border: 10px red solid;
}
/* 常用hover情况下： */
.box1:hover{
    outline: 10px rebeccapurple solid;
}

<!-- 2.2.5.2 阴影
阴影不会影响页面布局
写法:box-shadow:颜色 偏移量(水平偏移量，垂直偏移量)、模糊半径
 -->
<div class="box1"></div>

.box1{
     200px;
    height: 200px;
    background-color: #bfa;
    box-shadow: rebeccapurple 20px 20px 50px;
}

<!-- 2.2.5.2圆角属性 -->
<div class="box1"></div>

border-radius: 25px;
/* 顺序：左上 右上 右下 左下 */
/* 三个值：左上 右上、左下 右下 */
border-radius: 10px 20px 50px;
/* 两个值：左上、右下 左下、右上 */
border-radius: 10px 50px;
/* border-top-left-radius */

内边距padding

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

.box{
     200px;
    height: 200px;
    background-color: #bfa;
    border: 5px solid orange;
}
/* 
内边距(padding)
    - 内容区和边框之间的距离是内边距
    方向：
        padding-top
        padding-right
        padding-bottom 
        padding-left
 */
 padding-top:50px;
 /* ①添加hello */
/*  内边距的设置会影响到盒子的大小 
    背景颜色会延伸到内边距上 
*/
/* ②添加一个inner的box */
.inner{
     100%;
    height: 100%;
    background-color: #415d9e;
}

外边距margin

<!-- 外边距(margin)
    - 外边距不会影响盒子可见框的大小(content+padding+margin)
    - 外边距会影响盒子的位置
    - 一共有四个方向的外边距
        margin-top
        margin-right
        margin-bottom
        margin-left
 -->

水平布局

<!-- 
    margin-left 
    border-left 
    padding-left 
    width
    padding-right
    border-right
    margin-right
    ※所有值求和=其父元素内容区的宽度
    以上式子必须满足，若不满足，则为过度约束，等式会自动调整
        调整的情况:
            若这7个值没有为auto的情况，则会自动调整margin-right
        auto
            width、margin-left、margin-right 默认值 auto、0
 -->

.outer{
     800px;
    height: 200px;
    border: 10px red solid;
}

.inner{
     auto;
    margin-left: 200px;
    margin-right: auto;
    height: 200px;
    background-color: #bfa;
}
/* 若将一个宽度和一个外边距设置为auto，则宽度会调整到最大，
设置为auto的外边距会自动为0 */
.inner{
     auto;
    margin-left: 200px;
    margin-right: auto;
}
/* 若将3个值都设置为0，则宽度最大，外边距为0 */
.inner{
     auto;
    margin-left: auto;
    margin-right: auto;
}
/* 若将两个外边距设置为auto，宽度为固定值，则外边距将会变为两个相同的值 */
.inner{
     400px;
    margin-left: auto;
    margin-right: auto;
}
/* 水平居中 */
/* margin可以为负值 */

垂直布局

<div class="outer">
    <div class="inner"></div>
</div>

/* ①未设置父元素 */
.outer{
    background-color: #bfa;
    /* 未设置父元素的宽高时，默认被子元素撑开 */
}
.inner{
     100px;
    height: 200px;
    
}

/* ②设置了父元素是多少就是多少 */
.inner{
    margin-bottom: 50px;
}
.outer{
    height: 600px;
}

溢出

<div class="box1">
    <div class="box2"></div>
</div>

/* ③子元素超过父元素出来了(溢出) */
.box1{
     200px;
    height: 200px;
    background-color: #bfa;
}
.box2{
     100px;
    height: 200px;
    background-color: blueviolet;
}
/* 
将height变为400px，
若子元素的大小超过了父元素则子元素会从父元素中溢出
*/

/* 使用overflow属性来设置父元素处理溢出的子元素 */
/* 可选属性：
        visible 默认值，显示子元素从父元素中溢出的
        hidden 溢出内容被cut掉
        scroll 添加两个滚动条
        auto 自动添加滚动条
 */
overflow: visible;
overflow:hidden;

<!-- 文字演示 -->
<div class="box1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad ipsam voluptates officiis, pariatur unde facere a magni aut labore nobis! Veniam, eveniet voluptatem. Facilis dolorum laboriosam molestiae, dicta fugit illum!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita debitis quas mollitia repudiandae dolores cupiditate qui. Ratione repellat earum quisquam veniam, quibusdam veritatis exercitationem dignissimos, soluta officia quas, culpa temporibus.
</div>

/* 修改为scorll  */
overflow: scroll;
/* auto根据需要生成scrollist */
overflow: auto;
/* overflow- x or y 单独处理横纵方向的，自行研究 */

垂直方向外边距的重叠

<div class="box1"></div>
<div class="box2"></div>

.box1,.box2{
             200px;
            height: 200px;
}
.box1{
    background-color: blueviolet;
}
.box2{
    background-color: brown;
}
/* 上左边距：改变元素自身的位置
   下右边距：挤别的元素
 */
.box1{
    margin-bottom: 100px;
}
.box2{
    margin-top: 100px;
}
/* 
    外边距的重叠
        - 相邻的垂直方向，外边距会发生重叠现象
        - 兄弟元素之间的相邻垂直外边距
            (两正值)会取两者之间的max
            (一正一负)取两者的和
            (负值)取绝对值较大的
        - 父子元素
            父子元素间相邻外边距，子元素的会传递给父元素(上外边距)
 */

<div class="box1">
    <div class="box2"></div>
</div>

.box1{
     200px;
    height: 200px;
    background-color: #bfa;
}
.box2{
     100px;
    height: 100px;
    background-color: orange;
    /* margin-top: 50px; */
}
/* 因而父子外边距的重叠会影响到页面的布局，必须要进行处理 */
/* 需求是将内部盒子挪下去,修改 */
.box1{
    height: 100px;
    padding-top: 100px;
}
/* 给子元素设置上边距将父元素一起挤下来了，看是否发生了重叠现象 */