盒子模型及其边框使用

盒子模型

margin  外边距

border   边框

padding   内边距

盒子的计算方式：你的元素到底的多大？

margin+border+padding+内容宽度

边框

        1）粗细

        2）样式

        3）颜色

 /*    border: 粗细，样式（solid 直线，dashed 虚线），颜色*/
border: 1px solid red

内外边距

        padding: margin:

                                   后面一个元素代表上下左右

                                  后面两个元素，第一个代表上下，第二个代表左右

                                 后面四个分别代表上左下右

                                 auto ：自动对齐

居中：

 margin:0 auto;

        要求：要有块元素，块元素有固定的宽度

圆角边框

border-radius
             一个值   左上   右上  右下   左下
             两个值   第一个值：左上右下   第二个值：右上左下
             四个值（顺时针）左上   右上  右下   左下

圆圈：  圆角=半径

width: 100px;
            height: 100px;
            background: red;
            border-radius: 50px;

盒子阴影

        x,y,模糊半径，颜色

box-shadow: 100px 10px 1px yellow;

浮动

1）块级元素：独占一行

h1~h6,p,div,列表......

2）行内元素：不独占一行

span,a,img,strong......

行内元素可以被包含在块级元素，反之不可以

display

display:
            block 块元素
            inline 行内元素
            inline-block  是块元素，但是可以内联，在一行
            none   不存在

float

float:
        right 右浮动
        left  左浮动

对比：

display方向不可以控制，不需要管父级边框塌陷问题

float浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题

父级边框塌陷问题

clear:
        right 右侧不容许浮动
        left  左侧不容许浮动
        both  两侧都不容许浮动

若不容许的一侧已经有浮动，会排练到浮动的下一级

解决方案：

        1.增加父级元素的高度（简单，但元素假设有了固定的高度，就会被限制）

        2.增加空的div标签，清楚浮动（简单，但代码中尽量避免空div）

        3.overflow（简单，但下拉的一些场景避免使用）

        在父级元素中增加一个overflow ：hidden  对内容修剪

                                            overflow ：scroll     增加滚动条

        4.父类增加一个伪类：after（推荐使用，写法稍微复杂，但是没有副作用）

#father:after{
    content: "";
    display: block;
    clear: both;
}