CSS-2

继续上一节的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>

注意：margin后面的数字与padding相同。

盒子外边距存在的问题：
1、当第一个盒子和第二个盒子外边距不相等时，他们之间的距离以外边距大的一方为主。

2、当子盒子的外边距设置比父盒子的边框大时，子盒子会超出父盒子，

<!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;
        }![QQ截图20190521143522.png](https://upload-images.jianshu.io/upload_images/16673436-81fbfcd40fe3cd87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        .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没有偏移前的位置
绝对定位，参照物为浏览器或已定位父元素，脱离文档流
固定定位，脱离文档流,始终固定于浏览器视图某个位置，且不随滚动条滚动而变化（网页上很多的小广告做法）应用重点：元素参照已定位父级绝对定位

定位补充

定位还有很多内容，就不一一赘述，可以自行查询。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,402评论 6赞 499
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,377评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,483评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,165评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,176评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,146评论 1赞 297
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,032评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,896评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,311评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,536评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,696评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,413评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,008评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,659评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,815评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,698评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,592评论 2赞 353

CSS-2

CSS盒子模型

CSS的Reset

浮动

定位

定位补充

推荐阅读更多精彩内容