CSS基础2-盒子模型、定位、浮动

盒子模型

1、宽高所划分的区域 contents

2、内边距 padding

3、边框 border

4、外边距        margin

box-sizing: border-box;    //以边界为尺寸内容   content-box  以内容为边界

-moz-box-sizing: border-box;  //firefox

-webkit-box-sizing: border-box;    //chrome、Safari

-ms-box-sizing: border-box;    //IE8以下

-o-box-sizing: border-box;     //presto opera

4上  右  下  左

3上   左右   下

2上下      左右

1上下左右都是这个值

body 的margin值

IE8 -->上下16px,左右8px;

IE7 -->上下16px,左右11px;

定    位

绝对定位  position：absolute

与 left/right       top/bottom 组合使用   /前后只能选其一

绝对定位就相当于在现有文档层新开了一个层

<div class='box1'>

     <div class='box2'>

           <div class='box3'></div>

    </div>

</div>

.box1{width:300px;height:300px;background-color:green;margin:100px;}

.box2{width:200px;height:200px;background-color:blue;margin:50px}

.box3{width:100px;height:100px;background-color:red;

positon:absolute;}

这时box3往上找，box2没有定位元素，box1也没有，所以box3在HTML文档里定位在全局定位.。这时如果box1 的 position：relative|absolute的话，box3在box1里定位.同理，如果box2有position就在box2里

相对定位  position：relative

浮动：float

浮动流，块级元素（不带浮动和溢出隐藏属性的块级元素）无法识别浮动流元素的位置

内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置

清除浮动：

<div class='box1'>

   <div class='box2'></div>

   <div class='box3'> </div>

//  () 

</div>

.box1{width:200px;background-color:green;border:10px solid #000}

.box2{width:100px;height:100px;background-color:blue;float:left}

.box3{width:100px;height:100px;background-color:blue;float:left}

这时因为块级元素无法识别float，所以box1无法被撑开，这时需要加清除浮动：在box3同级出加一个块级元素（可选为p）属性为clear: both

float以后，元素变成内联块级元素

伪类，伪元素

伪类：before  after

一个冒号  是伪类   两个冒号就是伪元素

::after

伪类、伪元素里必须包含 content：

伪类伪元素可以很好地清除浮动：

div::after,

ul::after {

content："";

display: block;

clear: both;

}

转载于:https://juejin.im/post/5b6c084c5188251b166f2842