首页 > 其他好文 > 详细

盒模型Box Model（浮动）

时间：2015-06-09 13:37:45 阅读：183 评论：0 收藏：0 [点我收藏+]

标签：

一、标准盒模型的大小：border+padding+content（width）

怪异盒模型大小：padding+border

二、display

inline 默认，且变为行由内容撑开
block 变为块元素，前后会自带有换行符
none 不会显示元素（只是隐藏掉，但还在布局中）
inline-block 不设置宽度，有内容撑开；行标签会实现宽高到校；块标签已不是独占一行
table 以表格的表现显示

三、float（浮动）用来在一定宽度中实现一行输出多个块

除非添加margin，否则块间会消除距离
行标签支持宽高，块标签不是独占一行
可实现文字环绕
可决定块输出是从左到右（left），还是从右到左（right）

对块标签的影响：

在没有设置宽高的情况下浮动后，内容撑开宽高；
可以使块元素并排排列
浮动元素不占父级的宽高

对行标签的影响：

浮动后能设置宽高属性，并支持margin和padding

四、overflow 通常用在已设置固定宽高的情况下

visible 显示超出内容，不剪切内容也不添加滚动条
hidden 隐藏超出内容
auto 默认，要剪切内容并添加滚动条
scroll 总是显示滚动条

五、clear（清除）

none 允许浮动元素出现在两侧
left 左侧不允许有浮动元素
right 右侧不允许有浮动元素
both 不允许有浮动

六、visitility（可视）

visble 元素可视
hidden 元素不可视（元素从布局中消失）
inherit 继承父元素可视性

七、zoom 使用对象的实际尺寸（加数字），同时亦有清浮动的作用

八、清浮动的三种常用方法：

overflow：hidden；
空标签清浮动：height：0；overflow：hidden；clear：both；
after清浮动。

盒模型Box Model（浮动）

标签：

原文地址：http://www.cnblogs.com/pan-hello/p/4563085.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！