一、网页布局
1.display属性常用的值
值 | 说明 |
block | 变成块元素 |
inline | 变成行内元素 |
Inline-block | 既是块又是行内元素 |
none | 元素不会被显示 |
二、浮动
1、简介
块元素在文档流中默认是垂直排列,如果希望块元素横向布局,可以用float。
float 可以使元素浮动,向父元素的左侧或右侧浮动,脱离文档流。
float(浮动)属性的值
属性值 | 说明 |
left | 左浮动 |
right | 右浮动 |
none | 默认值,不浮动 |
2、特点
(1)浮动元素脱离文档流之后,不会再占有文档流的位置,它下边的元素会立即向上移动
(2)元素浮动之后,元素会尽量的向页面的左上或右上浮动
(3)浮动元素默认会在父元素区域内活动,不会从父元素中移出
(4)浮动元素上面是一个没有浮动块元素,则浮动元素无法上移
(5)浮动元素不会超过它上边的兄弟,最多一边齐
(6)浮动可以让页面中元素水平排列,也可以做图文效果,目前以布局为主。(浮动的元 素不会盖住文字,文字会自动环绕在浮动元素的周围,所以可以利用浮动来设置文字 环绕图片的效果。)
(7)脱离文档流之后,不会再区分块和行内元素。
当元素设置浮动以后,会脱离文档流,块,行内元素的特点也会发生改变。
块元素:不会独占一行;块元素的宽高被内容撑开
行内元素:可设宽高
三、清除浮动
由于受到浮动的影响,box上移,希望清除其他元素浮动对当前元素产生的影响。
清除浮动原理:设置浮动后,浏览器会自动为元素添加一个上外边距,以使位置不受其他元素的影响 。 可以用clear属性来完成。
可选值:
none 默认值 不清除浮动
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
四、解决高度塌陷
在文档流中,父元素的高度是被子元素撑开,若子元素浮动,脱离文档流,会导致我们父元素高度丢失,我们叫高度塌陷。会影响页面布局,这个必须解决。
解决方案一:给父元素设置固定高度,但在实际开发过程中,高度都是被内容撑开
解决方案二:
页面元素中的隐含属性:Block Formatting Context 即块格式化上下文,简称BFC。
当开启了BFC后,元素会变成一个独立的布局区域,会有以下特点:
1:父元素的垂直外边距不会和子元素重叠
2:开启BFC的元素不会被浮动元素所覆盖
3:开启BFC的元素可以包含浮动的子元素(可以解决高度塌陷)
如何开启BFC?
1:设置元素浮动
-不推荐,还是会改变页面的布局,而且父元素的宽度会丢失
2:设置元素为inline-block
-不推荐,会丢失父元素的宽度
3:将元素的overflow设置为一个非visible的值
-可以使用,也会产生一些小的副作用
4:设置元素绝对定位。
overflow属性的值
值 | 说明 |
visible | 默认值,内容不会被修剪,会呈现在盒子外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会加滚动条 |
auto | 如果内容被修剪,则浏览器会显示滚动条 |
解决方案三:利用 clear: both;清除浮动影响
解决方案四 : 添加一个伪类,将内容转成块元素,清除两侧的浮动。
.box1:after {
/* 添加一个内容 */
content: "";
/*将内容转成块元素 */
display: block;
/* 清除两侧的浮动 */
clear: both;
}