CSS盒模型笔记

本文由编者通过观看尚硅谷关于盒模型的视频的笔记总结，希望能帮助到大家。

盒模型

又称为盒子模型、框模型（形状为矩形），是CSS的重要组成部分，我们可以通过对盒模型的摆放从而得到我们想要的排版。

盒模型的组成

1.内容区（content）                                           

2.边框（border）                                                      

3.内边距（padding）

4.外边距（margin）

如下图：

                                     

盒子可见框的大小：

1.内容区

2.内边距

3.边框  

盒子示例

.box1{
    width:200px;
    height:200px;
    background-color:black;
    border-width:200px;
    border-height:200px;
    border-style:solid;
    border-color：red；
    padding-top:200px;
    padding-left:200px;
    padding-bottom:200px;
    padding-right:200px;
    margin-top：200px;
    margin-left：200px;
    margin-bottom：200px;
    margin-right：200px;
}

background-color：盒子背景颜色

内容区

 width：盒子内容区的宽度；（默认值：auto）

height：盒子内容区的高度；

边框(border)

border-width：盒子边框的宽度（可以不写，其含有默认值）

border-height：盒子边框的高度

border-style：边框的样式 

        可选值：

                solid实线

                dotted点状虚线

                dashed虚线

                double双线

border-color：边框的颜色 默认值（黑色）

内边距(padding)

内容区与边框之间的距离是内边距

内容区的背景颜色会延伸到内边距之中

共有四个方向内边距：

            padding-top:上
            padding-left:左
            padding-bottom:下
            padding-right:右

外边距（margin）

            会影响盒子的大小

            margin-top：上;
            margin-left：左;
            margin-bottom：下;
            margin-right：右;        默认情况下不会产生任何的影响（原因在的盒模型的水平布局）

设置一个正值  往设置的反方向走

设置一个负值  往设置的方向走

挤自己

            margin-top
            margin-left

挤别人

            margin-bottom
            margin-right

通用

{以下border padding margin的属性皆适用}

下面以以border-width 为例

        可以同时设置四条边框的宽度 当输入

                四个值 上右下左 顺时针

                三个值 上 左右 下

                两个值 上下 左右

                一个值 全部

或者可以通过border-xxx-width来直接设置其中一条边框 上（top） 下（bottom）左（left） 右（right）

        简写属性

        border 可以同时设置边框所有的相关样式

        border-xxx 设置其中一条边框的相关形式

盒模型的水平布局

元素在其父元素中水平方向的位置右以下几个属性共同决定：

margin-left border-left padding-left width padding-right border-right margin-right=其父元素内容区的宽度

该等式必须成立，若等式不成立，则称为过渡约束，那么浏览器会自动调整margin-right使其满足。

以上七个值中 width margin-left margin-right三个值可以设置为auto

如果某个值设置为auto，那么它会代替margin-right自动调整使等式成立（如果前六个大于盒子宽度，那么margin-right将被设置为负值使其满足）

不同的设置：

如果将一个宽度和一个外边距设置为auto，那么宽度会调整到最大，另一个auto将会为0

如果将三个值设置为auto，则外边距为0，宽度最大

如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的大小（常用居中办法）

.juzhong{
    width:xxxpx;/*第一步设置盒子内容区宽度*/
    margin：0 auto;/*第二步设置盒子的上下外边距 以及让左右外边距为auto*/
}

盒模型的垂直布局

默认情况下父元素被内容撑开

如果父元素设置了高度

        -如果子元素的大小超过了父元素，则子元素会从父元素中溢出

可以通过使用overflow来设置父元素中溢出的内容

        可选值：

                visible 默认值，溢出，在父元素外部显示

                hidden 一处内容将会被裁减，不显示

                scroll 生成两个滚动条，通过滚动条来查看完整内容

                auto 根据需要生成滚动条

                overflow-x：水平方向设置                 overflow-y：垂直方向设置

外边距的折叠（重叠）

        -相邻的垂直方向外边距会发生重叠现象

 兄弟元素：

        兄弟元素之间的相邻垂直外边距会取两者之间的最大值（两个都是正值）

        如果一正一负，则两者相加  如果两者都负，取两者之间绝对值大的

父子元素：

        -父子元素间的相邻外边距，子元素会传递给父元素，会影响页面的布局（不利于页面布局）

                       

行内元素（内联元素）的盒模型

                -行内元素不支持设置宽高，被内容撑开

                -行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

                -行内元素可以设置border，垂直方向的border不会影响页面布局

        如果要通过宽高设置其大小，可以通过display用来设置元素显示的类型

                可选值：inline 将元素设置为行内元素

                                block 将元素设置为块元素

                                inline-block将元素设置为行内块元素（可以设置宽高而且不会独占一行）

                                none 元素不在页面显示（用于隐藏元素 可以与hover一起使用）不占用页面位置

         还可以通过visibility 用来设置元素的显示状态：

                可选值：visible 默认值 元素在页面中正常显示

                                hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置