盒子模型又称为框模型,HTML
页面所有的元素都具有盒子模型,该模型用于设计HTML
页面和实现HTML
页面布局。
相关概念
content
)
用于显示文本和图像
padding
)
内容区至边框的边距
border
)
内容区的边界
margin
)
两个元素的边距之间的距离
默认情况下,一个盒子的大小刚好容纳其中的内容(文本、图片等),并根据其中内容的变化而变化。
通过CSS的width
属性和height
属性可以设置盒子显示的宽度和高度,从而改变盒子的大小。.
div{
width:100px;
height:100px;
}
盒子的阴影广泛应用。但实现非常简单。
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
核心要素包括
1px
)显示效果:同时设置上下左右四个方向的边框
div{
border: 10px solid black;
}
以上简写属性相当于同时为一个border
设置宽度、样式和颜色。
例如上述代码可以写成以下形式
div{
border-width: 10px;
border-style: solid;
border-color: black;
}
关于三中属性的的取值问题(以border-width
为例)
border-width: 10px;
: 代表四个方向border-width: 10px 20px;
: 第一个值表示上下、第二个值表示左右border-width: 10px 20px 30px;
: 第一个值表示上、第二个值表示左右、第三个值表示下border-width: 10px 20px 30px 40px;
: 上、右、下、左按照上右下左的方向分别为
border-top
border-right
border-bottom
border-left
而每个方向上的边框也可以分别设置不同的属性,例如
div{
border-top-width:10px;
border-top-style:solid;
border-top-color:black;
}
border-radius: 30px;
属性的值代表(边框)到圆心的距离。当距离等于外部容器的一半时就形成了一个原型
使得边框可以引入图像,从而免去在某些情况下使用九宫格了。
/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
定义图像边框宽度。假如border-image-width大于已指定的border-width
,那么它将向内部(padding/content)扩展.
用于声明元素的边框图片(border-image
)的资源
引用边框图片后,**border-image-slice
**属性会将图片分割为9个区域:四个角,四个边(edges)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。
上图说明了每个区域的位置。
fill
,则会将其用作背景图像。中间的区域将不会被边框使用,但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)
定义图片如何填充边框。或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。
定义边框图像可超出边框盒的大小。
内边距不能设置颜色 颜色与元素的背景颜色保持一致.
同时可以简写,
同时支持拆开写
padding-left: 20px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 30px;
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#container{
height: 200px;
width: 200px;
background-color: blue;
/* padding: 100px; */
padding-left: 20px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 30px;
}
#content{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
</div>
</div>
</body>
</html>
左外边距(margin-left
)控制元素当前水平方向的位置.
上外边距(margin-top
)控制元素当前垂直方向的位置.
下外边距(margin-bottom
)控制控制块级元素的下一个兄弟元素的位置
右外边距(margin-right
)控制内联元素或行内会计元素的下一个兄弟元素的位置.
margin-left
margin-top
margin-bottom
margin-right
使用margin
即可.
div{
margin:0 auto;
}
固定写法,其中0表示上下 auto表示左右.
可以设置宽高
与块级元素相同
box- sizing属性用于设置盒子模型的类型,该属性的值具有两个: ●content-box: 默认值,称为标准盒子模型。 该模型设置元素在HTML页面中所占区域为内容区+内边距+边框的宽度+外边距。 ●border-box: 称为怪异盒子模型,最早是由微软提出的。 该模型设置元素在HTML页面中所占区域为盒子的大小+外边距。.
外边距重叠的问题只出现在上外边距和下外边距中 左外边距和右外边距之间不存在外边距重叠
解决方案:
实现步骤
border-color: white white white black;/* 左边为黑色 */
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框的特殊应用</title>
<style>
div {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: white white white black;/* 左边为黑色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册按钮效果的优化</title>
<style>
.container {
/* 当前元素的默认宽度为父级元素的100% */
width: 659px;
/* 当前元素的宽度不能是父级元素宽度的100% */
margin: 0 auto;
}
a {
display: inline-block;/* 显示效果设置行内块级元素 */
/* 设置显示区域大小 */
width: 111px;
height: 40px;
/* 引入背景图像 */
background: url("https://tva1.sinaimg.cn/large/005B3XPgly1gbmo8n9srbj30i212w761.jpg") no-repeat;
/* 修改链接的默认效果 */
color: #ffffff;
text-decoration: none;
/* 通过行高的设置实现垂直方向的居中效果 */
line-height: 40px;
/* 通过盒子模型的内边距设置文本内容的显示位置 */
padding-left: 50px;
font-size: 14px;
}
#phone {
background-position: -310px -461px;
}
#weibo {
background-position: -1px -601px;
}
#qq {
background-position: -1px -651px;
}
#wechat {
background-position: -213px -1191px;
}
#phone:hover {
background-position: -310px -521px;
}
#weibo:hover {
background-position: -199px -601px;
}
#qq:hover {
background-position: -199px -651px;
}
#wechat:hover {
background-position: -213px -1251px;
}
</style>
</head>
<body>
<!-- <div>元素称为容器元素 -->
<div class="container">
<a id="phone" href="#"> 手机注册</a>
<a id="weibo" href="#"> 新浪微博注册</a>
<a id="qq" href="#"> 腾讯QQ注册</a>
<a id="wechat" href="#"> 微信注册</a>
</div>
</body>
</html>