继续上一节的CSS基础后，我们来看CSS的一些高级设置。
CSS盒子模型
盒子模型：可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念。盒子模型由内容，内边距，边框和外边距组成。
1、盒子模型之边框
| 参数 | 描述 |
|---|---|
| border | 复合样式 |
| border-color | 边框颜色 |
| border-width | 边框宽度 |
| border-style | 边框样式 |
| border-top | 上边框 |
| border-left | 左边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
注意：复合样式顺序为== >width==>style==>color
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 300px;
height: 400px;
border:1px solid red;
}
#box-1{
width: 100px;
height: 100px;
border-color: red;
border-width: 5px;
border-style: solid;
margin: 20px;
}
#box-2{
width: 100px;
height: 100px;
border-color: red;
border-width: 5px;
border-top: 3px solid greenyellow;
border-left:3px dotted blue;
border-right: 3px double aqua;
border-bottom: 3px dashed darkred;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<div id="box-1">第一个盒子</div>
<div id="box-2">第二个盒子</div>
</div>
</body>
</html>
2、盒子模型之内边距：
| 参数 | 描述 |
|---|---|
| padding-top | 上内边距 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 300px;
height: 400px;
border:1px solid red;
padding-top: 100px;
padding-left: 100px;
}
#box-1{
width: 100px;
height: 100px;
border-color: red;
border-width: 5px;
border-style: solid;
margin: 20px;
padding: 30px 30px <!--第一个数字代表y轴方向，第二个数字代表x轴方向 -->
}
#box-2{
width: 100px;
height: 100px;
border-color: red;
border-width: 5px;
border-top: 3px solid greenyellow; <!--solid 实线 -->
border-left:3px dotted blue; <!--dotted点线 -->
border-right: 3px double aqua; <!--double 双线 -->
border-bottom: 3px dashed darkred; <!--dashed 虚线-->
margin: 20px;
padding: 40px 50px 60px 70px <!--第一个数字代表向上方向，第二个数字代表向右方向，第三个数字代表向下方向，第四个数字代表向右 -->
}
</style>
</head>
<body>
<div class="box">
<div id="box-1">第一个盒子</div>
<div id="box-2">第二个盒子</div>
</div>
</body>
</html>
注意：padding后面跟一个数字，表示四个方向同时扩张相应的距离，两个数字，四个数字含义，在代码注释里有解释。三个数字表示 “上，左右，下”，盒子的内边距增大可以加大父盒子的边距，必须注意。
3、盒子模型之外边距：
| 参数 | 描述 |
|---|---|
| margin | 复合样式 |
| margin-top | 上外边距 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 300px;
height: 400px;
border:1px solid red;
}
#box-1{
width: 100px;
height: 100px;
border:1px solid green;
background-color: green;
margin: 20px;
}
#box-2{
width: 100px;
height: 100px;
border:1px solid blue;
background-color: blue;
margin-top: 40px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box">
<div id="box-1">第一个盒子</div>
<div id="box-2">第二个盒子</div>
</div>
</body>
</html>
盒子外边距存在的问题：
1、当第一个盒子和第二个盒子外边距不相等时，他们之间的距离以外边距大的一方为主。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 300px;
height: 400px;
border:1px solid red;
}
#box-1{
width: 100px;
height: 100px;
border:1px solid green;
background-color: green;
}
#box-2{
width: 100px;
height: 100px;
border:1px solid blue;
background-color: blue;
margin-top: 400px;
}
</style>
</head>
<body>
<div class="box">
<div id="box-1">第一个盒子</div>
<div id="box-2">第二个盒子</div>
</div>
</body>
</html>
盒子内边距存在的问题：
盒子的内边距设置超出父盒子边框时，子盒子会超出父盒子的边界。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 300px;
height: 400px;
border:1px solid red;
}
#box-1{
width: 100px;
height: 100px;
border:1px solid green;
background-color: green;
padding-top: 400px;
}
#box-2{
width: 100px;
height: 100px;
border:1px solid blue;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div id="box-1">第一个盒子</div>
<div id="box-2">第二个盒子</div>
</div>
</body>
</html>
盒子模型内外边距总结：注意四点：
A：margin调整内部div外边距；
B：padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；
C：border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
D：内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
CSS的Reset
Reset 翻译过来就是重置，重置CSS，浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致，公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS
https://meyerweb.com/eric/tools/css/reset/ 写了一套通用的ResetCSS，可以根据需要使用：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
想要自己写可以使用简单的通配符
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
</style>
</head>
<body>
</body>
</html>
浮动
浮动，其实就是让元素脱离正常的文档流，当正常文档布局不能解决的时候，则需要脱离正常文档流，浮动带来的问题就是高度塌陷
没有浮动之前
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 800px;
height: 400px;
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
}
#box-2{
background-color: green;
}
#box-3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" id="box-1"><p>第一个盒子</p></div>
<div class="box1" id="box-2"><p>第二个盒子</p></div>
<div class="box1" id="box-3"><p>第三个盒子</p></div>
</div>
</body>
</html>
浮动第一个盒子到右边
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 800px;
height: 400px;
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
float: right;
}
#box-2{
background-color: green;
}
#box-3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" id="box-1"><p>第一个盒子</p></div>
<div class="box1" id="box-2"><p>第二个盒子</p></div>
<div class="box1" id="box-3"><p>第三个盒子</p></div>
</div>
</body>
</html>
浮动第三个盒子到左边
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
width: 800px;
height: 400px;
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
float: right;
}
#box-2{
background-color: green;
float:left;
}
#box-3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" id="box-1"><p>第一个盒子</p></div>
<div class="box1" id="box-2"><p>第二个盒子</p></div>
<div class="box1" id="box-3"><p>第三个盒子</p></div>
</div>
</body>
</html>
此时设置第二个盒子为透明
}
#box-2{
background-color: blue;
opacity: 0.2;
}
QQ截图20190521135657.png
第三个盒子位于第二个盒子下面。也就是说，当浮动盒子的时候，他原本的位置已经不属于他自己，而他的位置变成了原本位置的上一层覆盖，就好比原先在一楼的第一个房间，现在去了二楼的第一个房间，从上向下看，位置没有变，事实上，位置却已经发送了变化。这就是浮动。
浮动带来的问题：
浮动前父盒子状态。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
/*float: right;*/
}
#box-2{
background-color: green;
/*float: right ;*/
}
#box-3{
background-color: blue;
/*float: right ;*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1" id="box-1">第一个盒子</div>
<div class="box1" id="box-2">第二个盒子</div>
<div class="box1" id="box-3">第三个盒子</div>
</div>
</body>
</html>
浮动后父盒子状态
可以看到父盒子已经包不住子盒子了，也就说，三人全去了二楼，一楼的地方就没有他们的了，那父盒子没有内容就无法撑开了。这就是高度塌陷的问题。下面来解决这个问题。
这个问题，在CSS中有三种解决之道：
1、设置父元素隐藏：父元素设置overflow：hidden：没有使用position时使用，不能和position配合使用，因为超出的尺寸的会被隐藏。
2、添加一个空div：如果页面浮动布局多，就要增加很多空div，不推荐使用。
3、使用伪元素：推荐使用，建议定义公共类，以减少CSS代码（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.clearfix::after{
display: block;
clear: both;
content: "这是伪元素";
}
.box{
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
float: left;
}
#box-2{
background-color: green;
float: left ;
}
#box-3{
background-color: blue;
float: left ;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1" id="box-1">第一个盒子</div>
<div class="box1" id="box-2">第二个盒子</div>
<div class="box1" id="box-3">第三个盒子</div>
</div>
</body>
</html>
定位
定位就是将元素定在网页中的任意位置，因为有时候需要对某些元素进行定位，想定哪里，定哪里。
| 定位属性 | 参数描述 | 参数说明 |
|---|---|---|
| static | 默认值 | 静态定位，默认值不会发生任何变化 |
| relative | 相对定位 | 相对定位，不会脱离文档流,以自身元素为参考,可以给 top/right/bottom/left |
| absolute | 绝对定位 | 绝对定位，脱离文档流,默认以整个文档为参考,有定位父级，则父级参考,可以给top/right/bottom/left |
| fixed | 固定定位 | 固定定位，脱离文档流,默认以窗口为参考，可以给top/right/bottom/left,窗口滚动，依然不会变 |
没有定位之前：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style>
.box{
border:1px solid red;
}
.box1{
width: 100px;
height: 100px;
border:1px solid red;
margin: 20px;
}
#box-1{
background-color: red;
/*position: relative;*/
/*left: 30px;*/
/*top: 20px;*/
}
#box-2{
background-color: green;
/*position: absolute;*/
/*left: 230px;*/
/*top: 20px;*/
}
#box-3{
background-color: blue;
/*position: fixed;*/
/*left: 430px;*/
/*top: 20px;*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1" id="box-1">第一个盒子</div>
<div class="box1" id="box-2">第二个盒子</div>
<div class="box1" id="box-3">第三个盒子</div>
</div>
</body>
</html>
定位之后：
相对定位，不脱离文档流,偏移前的位置还保留不动，覆盖不了前面div没有偏移前的位置
绝对定位，参照物为浏览器或已定位父元素，脱离文档流
固定定位，脱离文档流,始终固定于浏览器视图某个位置，且不随滚动条滚动而变化（网页上很多的小广告做法）应用重点：元素参照已定位父级绝对定位
定位补充
定位还有很多内容，就不一一赘述，可以自行查询。
网友评论