古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。这篇文章主要讲述#yyds干货盘点# CSS盒子模型相关的知识,希望能为你提供帮助。
【#yyds干货盘点# CSS盒子模型】网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子,实现对整个网页的布局。
盒模型由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分。
盒子的实际大小为各部分之和,下图所示的盒子宽度为:左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
文章图片
一、盒模型的组成 1.内容内容(content)是盒子里的“物品”,是盒模型中必须有的部分,可以是网页上的任何元素,如文本、图片、视频等各种信息。
定义盒模型语法格式如下:
width: auto | length;
height: auto | length;
overflow: auto | visible | hidden | scroll;
举个例子
代码
<
!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>
效果
文章图片
四、总结CSS盒子模型在CSS中算是比较重要的部分了,他已经开始涉及到网页布局和设计了,对于这一块内容要引起重视,多加练习。
推荐阅读
- #yyds干货盘点# 学python,怎么能不学习scrapy呢,这篇博客带你学会它
- #yyds干货盘点#JUnit5学习之六(参数化测试(Parameterized Tests)基础)
- ClickHouse在大数据领域应用实践
- 甜甜酱OH文档补充OpenHarmony Toggle组件
- LNMP如何对接redis服务
- nginx相关配置
- 腾讯出品腾讯游戏内部是用这款产品做运维的
- dd 命令
- 产品经理(你能不能用div给我画条龙())