必须掌握的前端基础知识, 什么是浮动?

看浮动前,先学几个前面文章补充的:

圆角边框原理

border-radius:10px (radius半径)10px 半径值,越大越圆

border-radius:50% 百分比

正方形是宽度和高度的一半就是圆形

矩形设高度的一半就是圆角矩形

复合属性:

border-radius: 10px 20px 30px 40px (左上, 右上,右下,左下)

boeder-radius:10px 20px {(左上,右上),(右上,左下)}对角

三个值:左上,(右上,左下)右下

分开写: border-top-left-radius=10px 左上角 等

盒子阴影

box-shadow:h-shodow v-shadow blur soread color inset /(outset外部阴影不能写)

box-shadow: x轴 y轴 模糊距离(虚实) 阴影尺寸 颜色 内部阴影

box-shadow: 10px 10px 10px 10px rgba(0,0,0, . 3) (x,y 必须写)

文字阴影

text-shadow: h-shodow v-shadow blur color

text-shadow: 5px 5px 6px rgba(0,0,0, .3)

浮动 float

float: left/right

浮动特性:

浮动元素脱标不占位置

一行顶部对齐 (排序以结构为准,前面有高的元素盒子过不去)

浮动元素具有行内块特性(类似行内块特点)

浮动总结

float 浮漏特

1.浮:浮起来,离我们更近

2.漏: 不占位置,标准流,没有位置

3.特:特性类似于行内块

4.排序:以结构为准

清除浮动

父盒子在很多情况下不方便给高度所以要清除

方法一 额外标签法 (隔墙法)

clear:both

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

必须是块元素, 在父元素里面最后一个子元素后加这个块元素

方法二 overflow:hidden (溢出隐藏) 给父元素添加

方法三 :after 伪元素清除法

单伪元素法

.clearfix::after {

content: "";

height: 0;

visibility: hidden;

display: block;

clear: both;

}

.clearfix {

*zoom: 1;

}

双伪元素法

.clearfix::before,

.clearfix::after {

content: "";

display: table;

}

.clearfix::after {

clear: both;

}

.clearfix {

*zoom: 1;

}

注意:

1.浮动元素必须配合标准流的父元素进行使用

2.兄弟元素一浮全浮

3.竖直排列看标准流,水平排列看浮动

总结; 浮动是我们前端必须掌握的技能,在页面布局中是会遇到的.因此我们要重点地学习,掌握.