前端课程——盒子模型
什么是盒子模型
盒子模型又称为框模型，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-topborder-rightborder-bottomborder-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-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展.
border-image-source
用于声明元素的边框图片（border-image）的资源
border-image-slice
引用边框图片后，**border-image-slice**属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
上图说明了每个区域的位置。
- 区域 1-4 为角区域。 每一个都用一次来形成最终边界图像的角点。
- 区域 5-8 边区域。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。
- 区域 9 为中心区域。它在默认情况下会被丢弃，但如果设置了关键字
fill，则会将其用作背景图像。
中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)
border-image-repeat
定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。
border-image-outset
定义边框图像可超出边框盒的大小。
内边距
内边距不能设置颜色 颜色与元素的背景颜色保持一致.
同时可以简写,
- 一个值:上下左右
- 两个值:上下,左右
- 三个值:上,左右,下
- 四个值:上右下左
同时支持拆开写
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页面中所占区域为盒子的大小+外边距。.
外边距常见的问题
外边距重叠
外边距重叠的问题只出现在上外边距和下外边距中 左外边距和右外边距之间不存在外边距重叠
解决方案:
- 简单的解决方案有两种:
- 为上一个元素设置下外边距为300px
- 为下一个元素设置上外边距为300px
- 网上的方法 可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容。
外边距传递
应用示例
实现三角形
实现步骤
- div的宽高为0
- 设置边框的宽度
- 设置边框样式
- 设置颜色
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>