首页 > 代码库 > 恐怖，前端布局重点知识点之一，原来是它
恐怖，前端布局重点知识点之一，原来是它
一、本章学习的目标----盒模型
1、认识盒子模型
2、盒子模型的组成部分
3、学习盒子模型的相关元素
二、盒模型的概念
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
标准盒模型
三、padding属性
Padding是设定页面中一个元素内容到元素的边框之间的距离。 也称补白
用法：
1）用来调整内容(子元素)在容器（父元素）中的位置关系
2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。
Padding属性值的四种方式
四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/
可单独设置某一方向填充
上方向padding-top:10px;
右方向pahdding-right:10px;
下方向padding-bottom:10px;
左方向padding-left:10px;
注意：padding值不允许是负值
padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；
四、margin外边界
边界：margin,在元素外边的空白区域，被称为边距。
1、margin的使用方法
属性值的4种方式：
四个值：上 右 下 左 {margin:10px 2px 4px 3px ;}
三个值：上 左右 下 {margin:2px 4px 6px;}
二个值：上下 左右 {margin:2px 4px;}
一个值： 四个方向 {margin:2px;}
可单独设置某一方向填充
上方向margin-top:10px;
右方向margin-right:10px;
下方向margin-bottom:10px;
左方向margin-left:10px;
五、border属性
border的使用方法：
复合写法：border:边框宽度 边框风格 边框颜色; 例如：border:5px solid #f00;
网页中很多修饰性线条都是由边框来实现的。 边框三类属性：
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)/none; *
可单独设置一方向边框，
盒模型：Border的设置
1、 border:dashed/solid/dotted/double（默认的边框宽度为中等(大约3px和4px之间)，默认的颜色为文字的颜色）
2、 border-width:10px;(设置一个值时：四方向)
3、 border-width:5px 10px(设置两个时：第一个值的是上下、第二个值是左右)
4、 border-width:4px 10px 20px(设置三个值时：第一个值上，第二个值是左右，第三个指下；)
5、 border-width:10px 5px 7px 8px ;（分别设置四个方向的边框宽度；）
六、盒子大小的计算
盒子实际占有宽度区域=margin-left + border-left + padding-left+width+padding-right+border-right+margin-right
盒子实际占有高度的区域=margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom
六、文本属性
容器溢出
{overflow: visible/hidden/scroll/auto/inherit;}
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
2、空白空间
{white-space: normal/pre/nowrap/pre-wrap /pre-line /inherit;}
normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白会被浏览器保留；
pre-wrap：保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;
3、文本溢出
{text-overflow: clip / ellipsis;}
取值：
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
4、省略号设置：
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）
恐怖，前端布局重点知识点之一，原来是它
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。