#yyds干货盘点# CSS盒子模型

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。这篇文章主要讲述#yyds干货盘点# CSS盒子模型相关的知识，希望能为你提供帮助。
【#yyds干货盘点# CSS盒子模型】网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子，实现对整个网页的布局。
盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。
盒子的实际大小为各部分之和，下图所示的盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < style type="text/css"> * font-size: 16px; .box1 height: 60px; width: 200px; background-color: #3CC; .box2 height: 60px; width: 70%; overflow: auto; background-color: #CCC; < /style> < /head> < body> < div class="box1"> 第一个盒子高度是固定的,但盒子里信息过多，超出内容属性所限定的大小，盒子的高度将自动放大< /div> < p> < div class="box2"> 第二个盒子高度和第一个盒子一样，是固定的，但设置了overflow属性为auto，出现滚动条，盒子高度不变。< /div> < /body> < /html>

效果

文章图片

2.边界边界（margin）是盒模型与其他盒模型之间的距离，使用margin属性定义。示例演示了边界设置.
定义盒模型边界语法格式如下：
margin: auto | length;
举个例子
代码

文章图片

效果

文章图片

3.填充填充（padding）用来设置内容和盒子边框之间的距离，可用padding属性设置。
定义盒模型填充语法格式如下：
padding: length;
举个例子
代码

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < style type="text/css"> div height: 20px; width: 150px; background-color: #999; margin: 10px; div#p1 padding: 20px; div#p2 padding: 10px 20px 30px 40px; < /style> < /head> < body style="font-size: 14px"> < div id="p1"> 填充设置1< /div> < div> 无填充设置< /div> < div id="p2"> 填充设置2< /div> < /body> < /html>

效果

文章图片

4.边框边框（border）是盒模型中介于填充（padding）和边界（margin）之间的分界线。
（1）边框样式
（2）边框宽度
（3）边框颜色
举个例子
代码

< !DOCTYPE html> < html> < head> < meta charset=utf-8> < style type="text/css"> div width: 200px; background-color: #EFEFEF; margin: 10px; padding: 10px; .b1 border-style: inset; border-width: 10px; border-color: rgb(100%, 0%, 0%); .b2 border-style: double; border-width: thick; border-color: black; ; .b3 border: groove thin rgb(255, 255, 0); .b4 border: #000 medium dashed; < /style> < /head> < body> < div class="b1"> 边框设置1< /div> < div class="b2"> 边框设置2< /div> < div class="b3"> 边框设置3< /div> < div class="b4"> 边框设置4< /div> < /body> < /html>

效果

文章图片

二、盒的类型CSS中的盒子可分为block类型与inline类型，使用display属性来定义。
直接来看个例子吧，这个例子看懂了，盒的类型你也就明白了
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> block、inline、inline-block对比< /title> < style> div.div1 display: block; /*div默认值*/ width: 120px; height: 40px; margin: 2px; background-color: green; div.div2 display: inline; /*修改为inline类型*/ width: 120px; height: 40px; margin: 2px; background-color: blue; div.div3 display: inline-block; /*inline-block类型*/ width: 120px; height: 40px; margin: 2px; background-color: red; div.div4 display: inline-block; margin: 2px; background-color: grey; < /style> < /head> < body> < div class="div1"> block类型< /div> < div class="div1"> block类型< /div> < hr/> < div class="div2"> inline类型< /div> < div class="div2"> inline类型< /div> < hr/> < h3> inline-block类型，设置width和height属性< /h3> < div class="div3"> inline-block类型< /div> < div class="div3"> inline-block类型< /div> < hr/> < h3> inline-block类型，无width和height属性< /h3> < div class="div4"> inline-block类型< /div> < div class="div4"> inline-block类型< /div> < /body> < /html>

效果

文章图片

block类型是独占一行，而inline是可一个多个在一行，拓展的inline-block则是把block转换成与inline相似

三、CSS3新增的与盒相关的属性 1.overflow-x与overflow-y属性指定了盒的宽度与高度后，可能出现盒子无法承载其中内容的情况，为了避免内容溢出，使用overflow属性来指定如何显示盒中容纳不下的内容。
举个例子
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> overflow< /title> < style> span display: block; width: 180px; height: 100px; background-color: #CCC; overflow-x: auto; overflow-y: auto; < /style> < /head> < body> < span> 这个示例将span元素定义为block类型，同时设置了overflow-x和overflow-y的属性。如果取消这两个属性的设置，指定的区域无法承载，将出现溢出…… < /span> < /body> < /html>

效果

文章图片

2.text-overflow属性text-overflow属性用于指定盒子中文本溢出的显示方式，可以在盒的末尾显示一个代表省略的符号" …" 。
举个例子
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> text-overflow< /title> < style> div white-space: nowrap; /*确保水平方向溢出*/ width: 300px; height: 30px; overflow-x: hidden; /*水平滚动条需要隐藏*/ text-overflow: ellipsis; /*text-overflow效果*/ border: 1px solid grey; < /style> < /head> < body> < div> text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效 < /div> < /body> < /html>

效果

文章图片

3.box-shadow属性box-shadow属性让盒在显示时产生阴影效果。
box-shadow属性的指定方式如下。
box-shadow: xlength ylength r color
举个例子
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> box-shadow< /title> < style> div width: 200px; height: 100px; background-color: blue; box-shadow: 10px 10px 5px grey; /*box-shadow: 10px 10px 0px grey; box-shadow: 0px 0px 5px grey; box-shadow: -10px -10px 5px grey; */< /style> < /head> < body> < div> < /div> < /body> < /html>

效果

文章图片

4.box-sizing属性使用box-sizing属性，可以指定用width属性与height属性指定的宽度值与高度值是否包含元素的填充区域（padding）与边框（border）的宽度与高度，从而实现更为精确的定位。
举个例子
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> box-sizing< /title> < style> div width: 300px; border: solid 30px blue; padding: 30px; background-color: #ccc; margin: 20px auto; div#div1 box-sizing: content-box; div#div2 box-sizing: border-box; < /style> < /head> < body> < div id="div1"> 在第一个div元素的box-sizing属性中指定content-box属性值< /div> < div id="div2"> 在第二个div元素的box-sizing属性中指定border-box属性值< /div> < /body> < /html>

效果

文章图片

下面这个例子使用了box-sizing属性，每个盒子的总宽度为浏览器宽度的50%，实现了一个精确的布局。
代码

< !DOCTYPE HTML> < html> < head> < meta charset=utf-8> < title> box-sizing< /title> < style> div width: 50%; height: 200px; float: left; padding: 20px; box-sizing: border-box; div#div1 border: solid 20px blue; div#div2 border: solid 20px green; < /style> < /head> < body> < div id="div1"> 使用box-sizing属性的目的是对元素的总宽度做一个控制< /div> < div id="div2"> 利用border-box属性值会使得页面布局更加方便< /div> < /body> < /html>

效果