CSS 浮动

CSS 浮动

盒模型

居中

margin：0px auto；  第一个代表上下   第二个代表左右   第三个参数下的数据   四个参数 上 右 下 左（顺时针）

• 标准盒模型 div宽=内容的宽

• 怪异盒模型 div=内容的宽+border+padding

标准盒模型

#box{
    width:200px;
    height:200px;
    border:1px solid black;
    font-size:0;   设置字体数量为零（去除空格所占的字数16）
}

怪异盒模型（不算边框所占位置）

box-sizing:border-box;

• 外边距居中条件，一定要有宽。使用margin：0 auto；

其他属性

rgba 带透明度的颜色

transparent 透明色

opacity：0.3； 透明度

overflow：visible； 默认溢出显示

overflow：hidden；溢出隐藏

display：none； 隐藏

display：block； 显示

.box{
    width:300px;  宽
    height：200px;  高
    background-color：rgb(120,120,120,0.3);  其中0.3为透明度，不透明盒子内的元素
    text-align:center;  居中
    opacity：0.3；透明度（盒子内所有元素都透明）
    overflow:scroll;  溢出部分变为滚动条
}

浮动

• 父盒子高度=子盒子的高度相加

• 文档流：代表元素的布局，宽高，背景颜色等等。

• 文本流：包含文字元素内容。

• 文本流的顺序：上 右 下 左 。

1.左浮：不脱离文本流，脱离文档流

float:left;

2.右浮:既脱离文本流，又脱离文档流

float:right;

3.浮动带来的问题

对自身有影响都脱离文档流，对兄弟改变了布局，对父级造成了坍塌

清楚浮动

1.给父设置高（不推荐，在不同的屏幕中会改变）

2.给浮动元素后面空的块级元素，clear：both；

<div style="clear: both;"> </div>

3.after伪类清浮动，在浮动元素父级上清除浮动

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

4.在父容器上添加溢出隐藏

overflow:hidden;

全局去默认

*{
    margin:0;
    padding:0;
}