目录
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
如图-2所示：
1.1 内容尺寸
-
一般情况下，为元素设置width/height，指定的是内容框的大小
-
内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow属性调整溢出部分的显示,取值如下：
取值 作用 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条
<style>
/* 内容尺寸 overflow */
.overflow a{color:red}
.content{
overflow: auto;
background-color: #ff0
width: 200px;height: 100px;
}
</style>
<div class="overflow">
<div>
<a href="javascript:;" >大</a>
<a href="javascript:;">中</a>
<a href="javascript:;" class="focus">小</a>
</div>
<div>
<a href="javascript:;" >红</a>
<a href="javascript:;">绿</a>
<a href="javascript:;" class="focus">蓝</a>
<select name="" id="select">
<option value="">请选择</option>
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select>
</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus architecto quod adipisci ipsam fugiat ipsa necessitatibus minima provident, distinctio facere aliquid sequi quibusdam voluptas eum dignissimos repellendus ipsum officia!</div>
</div>
1.2 边框border
- 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
1.2.1 边框实现
语法：
border:width style color;
边框样式为必填项，分为：
| 样式取值 | 含义 |
|---|---|
| solid | 实线边框 |
| dotted | 点线边框 |
| dashed | 虚线边框 |
| double | 双线边框 |
1.2.2 单边框设置
分别设置某一方向的边框，取值：width style color;
| 属性 | 作用 |
|---|---|
| border-top | 设置上边框 |
| border-bottom | 设置下边框 |
| border-left | 设置左边框 |
| border-right | 设置右边框 |
1.2.3 网页三角标制作
- 元素设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向边框可见色
1.2.4 圆角边框
- 属性：border-radius 指定圆角半径
- 取值：像素值或百分比
- 取值规律：
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下，左右保持一致
<style>
/* (圆角)边框设置 border:solid,dotted,dashed,doubled border-radius */
.border{
width: 200px;height: 100px;
border:5px solid blue;
border-left-style: dashed;
border-top-color: transparent;
border-radius: 5px;
}
.border:hover{
cursor: pointer;
border-top-color: green;
}
</style>
<div class="border"></div>
1.3 外边距
1.3.1 属性：margin
- 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
- 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
1.3.2 作用：调整元素与元素之间的距离
1.3.3 特殊取值
-
margin:0; 取消默认外边距
-
margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
-
margin:-10px;元素位置的微调
margin 负值
1.margin-left设负值会使元素向左移动,margin-top设负值会使元素向上移动
2.margin-bottom设负值，其下方元素上移，自身不受影响；margin-right设负值，其右方元素左移，自身不受影响<!DOCTYPE html> <!DOCTYPE html> <html> <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>margin 负值</title> <style type="text/css"> body { margin: 20px; } .float-left { float: left; } .clearfix:after { content: ''; display: table; clear: both; } .container { border: 1px solid #ccc; padding: 10px; } .container .item { width: 100px; height: 100px; } .container .border-blue { border: 1px solid blue; } .container .border-red { border: 1px solid red; } </style> </head> <body> <p>用于测试 margin top bottom 的负数情况</p> <div class="container"> <div class="item border-blue"> this is item 1 </div> <div class="item border-red"> this is item 2 </div> </div> <p>用于测试 margin left right 的负数情况</p> <div class="container clearfix"> <div class="item border-blue float-left"> this is item 3 </div> <div class="item border-red float-left"> this is item 4 </div> </div> </body> </html>
1.3.4 单方向外边距：只取一个值
margin-top
margin-right
margin-bottom
margin-left
1.3.5 子元素在父元素范围内居中显示：
-
垂直方向
1. 问题：子元素的margin-top作用于父元素上
解决：
a.为父元素添加顶部边框；
b.或为父元素设置padding-top:0.1px;
c.将块元素div设置为行内块inline-block
2. 元素之间同时设置垂直方向的外边距，最终取较大的值
margin 纵向重叠
问题：AAA与BBB之间的距离是多少？
可通过以下原则计算出结果为15px：1.相邻元素的margin-top与margin-bottom会发生重叠 2.空白内容<p></p>也会发生重叠<!DOCTYPE html> <html> <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>margin 纵向重叠</title> <style type="text/css"> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style> </head> <body> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p> </body> </html> -
水平方向
实现子元素在父元素范围内水平居中：在子元素中设置margin:0 auto 左右自动外边距
块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示<style> /* 外边距 margin*/ /* margin:single-value or multiple-value; */ /* 子元素在父元素中 水平居中:子元素中margin:0 auto 垂直居中:为解决子元素的margin-top作用于父元素上的问题， 父元素中padding: 0.1px or 顶部边框 */ .father{ background-color: rgb(3, 3, 3); width: 200px;height: 100px; position: relative; padding:0.1px } .child{ width: 100px;height: 50px; background-color: #ff0; /*1.父子元素高度未知*/ /* position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%) */ /* position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; */ /*2.子元素宽度高度已知*/ /* position: absolute; left:50% ; margin-left:-50px; top:50% ; margin-top:-25px; */ /*3.父子元素高度已知*/ margin: 25px auto; text-align: center;line-height: 50px; } </style> <div class="father"> <div class="child"> hello </div> </div>
1.3.6 带有默认边距的元素：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
1.4 内边距
1.4.1 属性：padding
- padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
- 可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的。所以，如果父元素的 width 改变，它们也会改变。
1.4.2 作用：调整元素内容框与边框之间的距离
1.4.3 取值：
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
1.4.4 单方向内边距,只能取一个值：
padding-top
padding-right
padding-bottom
padding-left
1.5 盒模型宽度offsetWidth计算
计算公式：offsetWidth = width + (padding + border)
注意：
1.盒模型宽度不包括外边距margin
2.可通过控制台访问元素的offsetWidth属性加以验证
3.可通过添加box-sizing:border-box使模型宽度offsetWidth=width
<!DOCTYPE html>
<html>
<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>盒模型</title>
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">
this is div1
</div>
<script>
// document.getElementById('div1').offsetWidth
</script>
</body>
</html>
1.6 块级格式化上下文（block format context,BFC）
1.一块独立渲染区域，内部元素的渲染不会影响外部元素，用于解决子元素从父元素中溢出从而影响外部元素的问题
2.应用：在父元素和父元素的末尾元素都添加样式overflow:hidden"
3.内容尺寸overflow内容溢出，hidden溢出部分隐藏；visible默认值，溢出部分可见；scroll强制在水平和垂直方向添加滚动条；auto自动在溢出方向添加可用滚动条
添加样式之前图片元素溢出（灰色区域是父元素）：
添加样式以后：
<!DOCTYPE html>
<html>
<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 type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 触发元素 BFC */
}
</style>
</head>
<body>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
</body>
</html>
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
