盒模型
盒模型包括四个部分：
content：内容区。盒子中的内容(如图中的手机)。
padding：内边距。盒子与内容之间的距离。
border：边框。盒子的边缘(盒子本身)。
margin：外边距。盒子与盒子之间的距离。
注：块元素、内联块元素可以设置宽高。内联元素设置宽高无效，浏览器不支持。
image.png
width
默认值为auto
块级元素: 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
内联元素,行内块: 靠内容撑开
绝对定位元素: 靠内容撑开
相对定位元素: 元素特性不变 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
固定定位: 靠内容撑开
浮动元素:靠内容撑开
是否是继承属性 否
百分比参照于谁 包含块的width
height
默认值为auto
都是代表靠内容撑开
是否是继承属性 否
百分比参照于谁 包含块的height
padding
margin
默认值为0
是否是继承属性 否
百分比参照于谁 包含块的width
border
border-width (一般直接指定px值 不写百分比)
left right top bottom
默认值:auto
是否是继承属性 否
百分比参照于谁 包含块的width
计算盒模型
image.png
image.png
盒子的总宽度：width+padding-left+padding-right+border-left+border-right=122px
盒子的总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right=142px（盒子在浏览器中占用的空间大小）
<!DOCTYPE html>
<html lang="zh-cn">
<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>mi demo</title>
<style>
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 1px dotted #4ff86e;
margin: 10px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">mi 8</div>
</body>
</html>
盒模型的宽高
盒模式中 width 和 height 默认定义的是内容区的尺寸，不包括 padding，border 和 margin。
可以使用 px 和 %（占父元素的百分比） 定义内容区的大小。
image.png
<!DOCTYPE html>
<html lang="zh-cn">
<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>
html,body{
/* html是body的父元素，所以body的宽度会受父元素html的影响 */
/* body默认的高度是内容的高度，将html和body的高度设置为100%后，body会占满整个浏览器 */
height: 100%;
}
.box{
/* 用像素px来定义宽高 */
width: 100px;
height: 100px;
background-color: brown;
}
.child{
/* 用百分比%来定义宽高，百分比是相对于父元素--.box的宽高来定义的 */
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="child">child</div>
</div>
</body>
</html>
padding--内边距
公式：四面相等，只设一个，对面相等，后者省略。
<!DOCTYPE html>
<html lang="zh-cn">
<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>padding demo</title>
<style>
div{
background-color: brown;
margin: 10px;
width: 100px;
height: 100px;
}
.simple1{
/* 四边相等只设一个 */
padding:5px;
}
.simple2{
/* 顺时针--上右下左 */
/* padding-top: 5px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 7px; */
padding:5px 10px 6px 7px;
}
.simple3{
/* 上下，左右 */
padding: 10px 11px;
}
.simple4{
/* padding: 10px 11px 5px 11px; */
/* 对面相等，后者省略 */
padding: 10px 11px 5px;
}
</style>
</head>
<body>
<div class="simple1">lorem.</div>
<div class="simple2">lorem.</div>
<div class="simple3">lorem.</div>
<div class="simple4">lorem.</div>
</body>
</html>
border--边框
注：如果不设置边框的颜色border-color，则边框采用字体的颜色color.
<!DOCTYPE html>
<html lang="zh-cn">
<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>border demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px;
}
.simple1{
/* 如果不设置边框的颜色，则边框采用字体的颜色 */
color: #d535eb;
/* border-width: 1px;
border-color: #86e72b; */
/* 简写方式 */
border:1px solid #62ce9c;
}
.simple2{
color: brown;
border-top: 1px dotted #62ce9c;
border-right: 2px solid #fabdec;
border-bottom: 1px double #d535eb;
border-left: 3px solid #4338e4;
}
input{
/* 清除文本框的默认样式 */
border: none;
/* 清楚文本框在获得焦点时出现的蓝色轮廓 */
outline: none;
}
</style>
</head>
<body>
<div class="simple1">lorem</div>
<div class="simple2">lorem</div>
<label>用户名：</label><input type="text">
</body>
</html>
border和padding可以设置给块元素、行内元素。
label{
padding: 10px;
border: 8px solid red;;
background: #4338e4;
}
margin--外边距
注意：margin 可以设置给块元素，对于行内元素只可以设置左右margin，不可以设置上下margin。
<!DOCTYPE html>
<html lang="zh-cn">
<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-01 demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
padding: 5px;
}
.simple1{
/* 四面相等，只设一个 */
margin: 10px;
}
.simple2{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 5px;
}
.simple3{
/* 上下，左右 */
margin:20px 10px;
}
.simple4{
/* 等价于margin:10px 5px 6px 5px; */
margin: 10px 5px 6px;
}
</style>
</head>
<body>
<div class="simple1">lorem.</div>
<div class="simple2">lorem</div>
<div class="simple3">lorem</div>
<div class="simple4">lorem</div>
</body>
</html>
外边距特性：
相邻元素的垂直margin合并--取下面元素的上边距和上面元素的下边距中较大的一个值。
捕获.JPG
<!DOCTYPE html>
<html lang="zh-cn">
<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 demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellowgreen;
padding: 5px;
}
.simple1{
margin: 20px;
}
.simple2{
margin: 30px;
}
</style>
</head>
<body>
<div class="simple1">margin</div>
<div class="simple2">合并</div>
</body>
</html>
相邻元素的水平margin相加
QQ截图20181203213101.png
QQ截图20181203213116.png
<!DOCTYPE html>
<html lang="zh-cn">
<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 demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellowgreen;
padding: 5px;
}
.simple{
display: inline-block;
}
.simple1{
margin: 20px;
}
.simple2{
margin: 30px;
}
</style>
</head>
<body>
<div class="simple simple1">margin</div>
<div class="simple simple2">合并</div>
</body>
</html>
外边距塌陷问题
子元素的上下外边距没有正常显示。
<!DOCTYPE html>
<html lang="zh-cn">
<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>外边距塌陷 demo</title>
<style>
.parent{
background-color: pink;
margin: 20px;
width: 300px;
}
.child{
margin: 20px;
background-color: brown;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">lorem</div>
</div>
</body>
</html>
问题：上面的代码 .child 的外边距和 .parent 重叠，看起来 .child 的外边距消失。
解决外边距塌陷的方法
1.用边框border来解决，设置自父元素的border-top,border-bottom的值。
.parent {
......
border-top: 1px solid pink;/*解决上边距塌陷问题*/
border-bottom: 1px solid pink;/*解决下边距塌陷问题*/
}
2.用内边距padding来解决，设置父元素的padding-top,padding-bottom的值。
.parent {
......
padding-top: 1px; /*解决上边距塌陷问题*/
padding-bottom: 1px; /*解决下边距塌陷问题*/
}
3.用overflow来解决，设置父元素的overflow:hidden.
.parent {
......
overflow: hidden;
}
标准盒模型&怪异盒模型
border-box怪异模式
盒子本身的宽度=width(width中已经包含了border和padding的值)。
content-box标准模式
盒子本身的宽度=width+padding(左右)+border(左右)。
绝对定位
包含块
离他最近且开启了定位(非static)的祖先元素,若没有开启了定位的祖先元素，那么包含块为初始包含块
初始包含块
一个视窗大小的矩形，默认情况下位置与视窗重合
image.png
绝对定位的使用场景
垂直水平居中布局
绝对定位的元素的 margin + border + padding + width = 包含块的width + padding
//实现垂直水平居中布局
<style>
*{
margin: 0;
padding: 0;
}
#father{
width: 200px;
height: 200px;
position: relative;
background-color: brown;
padding: 0 50px;
}
#son{
width: 100px;
height: 100px;
/*垂直水平居中*/
/* 已知高宽
绝对定位元素的特性:
m + b + p + w + left + right = 包含块的(w+p)
auto + 0 + 0 + 100 + 0 + 0 = 视口的宽度
auto + 0 + 0 + 100 + 0 + 0 = 200 + 50*2
m + b + p + h + top + bottom = 包含块的(h+p)
*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
--
绝对定位模拟固定定位
在移动端，固定定位兼容性并不友好，所以用绝对定位来实现固定定位的效果。
思路：固定定位一般是参照视口来固定位置，一般不使用html或body来充当视口(这两个标签做视口效果时而不灵)，所以我们自己用一个div标签来充当视口。
1.禁用系统滚动条
html,body{
overflow:hidden;
}
2.将滚动条加给一个包裹元素
包裹元素的id/class{
overflow:auto;
}
- 让包裹元素充当视口
body html 包裹元素的 width和height为百分百
完整代码如下：
<style>
*{
margin: 0;
padding: 0;
}
//禁用系统滚动条
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: hidden;
}
//div视口
#app{
overflow: auto;
width: 100%;
height: 100%;
}
#test{
width: 100px;
height: 100px;
position: absolute;
left: 40px;
top: 40px;
background: #c580fd;
}
</style>
</head>
<body>
<div id="app">
<div style="height:3000px"></div>
<div id="test"></div>
</div>
</body>
盒模型 浮动 定位的使用场景
margin为负值!!!!!
定位版的三列布局
浮动版的三列布局
圣杯
双飞翼
伪等高布局
粘连布局
<style>
*{
padding: 0;
margin: 0;
}
html,body{
overflow: hidden;
width: 100%;
height: 100%;
}
div{
text-align: center;
}
#wrap{
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(235, 108, 247);
}
#wrap .main{
min-height: 100%;
}
#wrap .main .main-content{
padding-bottom: 50px;
}
.clearfix{
*zoom: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
#wrap .footer{
margin-top: -50px;
height: 50px;
line-height: 50px;
background-color: crimson;
}
</style>
</head>
<body>
<div id="wrap">
<div class="main">
<div class="main-content" class="clearfix">
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
网友评论