前端基础-04-盒子模型

盒子模型

1.盒子模型简介

#他是由内容、内边距、外边距、边框border:边框 类型 颜色;border-widthborder-style solid实线 dashed虚线 dotted点线 double双边框border-color一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下  右左三个值的时候： 上 右左 下四个值的时候： 上  右  下 左div {width: 200px;height: 200px;border: 10px double green; /*复合样式*/}

2.padding内边距

#padding  内边距，边框与内容之间的距离一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下  右左三个值的时候： 上 右左 下四个值的时候： 上  右  下 左p {    width: 100px;    height: 100px;    border: 2px solid red;    padding: 50px 20px 30px 40px;}

3.margin外边距

#margin 外边距 元素与其他元素的距离（边框以外的距离）一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下  右左三个值的时候： 上 右左 下四个值的时候： 上  右  下 左margin: auto; 左右才有居中效果，上下没有用处*/* {    margin: 0;/*去掉元素的默认margin*/    padding: 0;/*去掉元素的默认padding*/}

4.盒子宽高计算

盒子大小=样式宽 + 内边距 + 边框盒子宽度=左border+右border+width+左padding+右padding盒子高度=上border+下border+height+上padding+下paddingdiv {    padding: 20px;    margin: 30px;    width: 200px;    height: 200px;    border: 10px solid red;}width=200+10*2+20*2=260px

5.浮动属性

# float：浮动的特点如果只给前面的元素浮动，后面的要占据他的位置ul {    border: 1px solid red;    width: 204px;    height: 500px;}li {    width: 20px;    height: 20px;    background: green;    border: 1px solid #ddd;    list-style: none; /*去掉小黑圆点*/    float: right;/*右浮动*/    border-radius: 50%;/*标签导圆角*/}

6.清除浮动

#清除浮动三种方式：    1.给父级增加高度（不推荐使用）    2.给父级加overflow:hidden;    3.给父级加一个类        .clearfix:after{          content: "";          display: block;          clear: both;}div {    /*height: 200px;*/    width: 500px;    border: 10px solid red;    /*清除浮动*/    /*overflow: hidden;*/}p {    width: 200px;    height: 300px;    /*display: inline-block;*/    background: green;    float: left;}.clearfix:after {    content: "";    display: block;    clear: both;}

7.定位position

#position 定位1.static 静态定位（没有定位），默认2.relative 相对定位，相对于元素起始位置进行定位，元素占有位置=相对位置+元素本身位置.box1 {    width: 200px;    height: 200px;    background: red;    position: relative;    top: 50px;}3.absolute 绝对定位，没有占据位置，      没有定位父级，则相对于整个文档发生偏移        参考最近非static定位的父级进行定位.box2 {    width: 100px;    height: 100px;    background: green;    /*position: relative;*/    position: absolute;    top: 50px;}4.fixed  固定定位，相对于浏览器窗口进行定位.box3 {    margin-top: 200px;    width: 150px;    height: 150px;    background: blue;    position: fixed;    top: 50px;}#方向分为4个：  left  right  top  bottom