Python（三十六）CSS提升

作者: Lonelyroots | 来源:发表于2021-12-18 20:31 被阅读0次

前端第三课CSS提升来啦！涉及的内容有box model：盒子模型；CSS floating：CSS浮动；CSS positioning and hierarchy：CSS定位和层级；reset styles：重置样式。

1. 盒子模型

1.1. 盒子模型（Box Model）

所有的HTML元素可以看做是一个div盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。

1.2. 盒子模型的包含内容

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距，边框，填充和实际的内容。

1.3.盒子各部分解释

Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边框和内容外的边框。
Padding（内边距）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像。

border-top: pink 2px solid;：给盒子顶部加2px的标准线粉色边框。
double：双线；dashed：虚线；dotted：点线。
display: inline-block;：设置成行块元素，既可以在同一行，也可以设置宽高。
display: inline;：设置成行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            /*!*solid标准线*!*/
            /*border-top: pink 2px solid;*/

            /*!*double双线*!*/
            /*border-right: orange 5px double;*/

            /*!*dashed虚线*!*/
            /*border-bottom: blue 3px dashed;*/

            /*!*dotted点线*!*/
            /*border-left: darkblue 8px dotted ;*/

            /*border-color: crimson;*/
            /*border-style: solid;*/
            /*border-width: 5px;*/

            /*四边一起设置*/
            border: green 2px solid;

            /*!*内边距会把盒子撑大，不能设置成负数*!*/
            /*padding: 20px;*/
            /*padding-top: 20px;*/
            /*padding-left: 20px;*/

            /*!*上下 左右*!*/
            /*padding: 50px 100px;*/

            /*!*上 左右 下*!*/
            /*padding: 50px 100px 60px;*/

            /*上 右 下 左*/
            padding: 40px 50px 60px 70px;

            /*外边距*/
            margin-top: 0px;
            margin-left: 0px;
            margin-bottom: 80px;
        }
        .box3{
            width: 50px;
            height: 50px;
            border: blue 2px solid;
            background-color: blue;
            /*!*左右的外边距不重合直接相加，上下的外边距重合是取大值*!*/
            
            /*margin-left: 45px;*/
            /*margin-top: 50px;*/

            /*margin外边距可以设置负值，外边距不影响盒子大小*/
            /*!*上下左右*!*/
            /*margin: 50px;*/
            /*!*上下 左右*!*/
            /*margin: 50px 100px;*/

            /*小外边距（左）与大盒子（右）的左外边距相差50px*/
            margin-left: -50px;
            margin-right: -50px;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: crimson;
            border: yellow 1px solid;
        }
        .box1,.box3{
            /*!*行块元素，既可以在同一行，也可以设置宽高*!*/
            /*display: inline-block;*/

            /*!*设置成行内元素*!*/
            /*display: inline;*/
        }

    </style>
</head>
<body>

<div class="box2">
    <div class="box1">
        Then
    </div>
    <div class="box3">
        Then
    </div>
</div>

</body>
</html>

2. CSS浮动

2.1. 文档流

文档流流动的是元素，可以将屏幕中显示的内容一一对应为文档中的一个元素。

2.2. CSS浮动

浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。

2.3. CSS浮动优缺点

优点：使元素脱离文档流，按照指定的（左右）方向移动，遇到父级边界或者相邻元素停下来。
缺点：浮动会带来高度塌陷的问题。

高度塌陷解决方式如下：
①给父级盒子设置高度，因为要随时调整，所以不推荐使用这种方法；
②新建一个空的div，给它设置高度，不过不推荐使用这种方法；
③给父级盒子设置overflow，不过会隐藏下拉框，所以不推荐；
④解决方法四：清除浮动，只有块状元素可以使用，推荐使用这种方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS floating</title>
    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    !*!*!*浮动主要起从上往下变成从左往右或从右往左的作用*!*!*!*/
        /*    !*!*从左往右浮动*!*!*/
        /*    !*float: left;*!*/
        /*}*/
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*!*蓝色将橘色覆盖了*!*/
            /*float: left;*/
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*这样以后大盒子会产生高度坍塌，变为0*/
        .box1,.box2,.box3{
            float: left;
        }

        /*!*解决方法一：给父级盒子设置高度，因为要随时调整，所以不推荐使用这种方法*!*/
        /*.box{*/
        /*    height: 100px;*/
        /*}*/

        /*!*解决方法二：新建一个空的div，给它设置高度，不过不推荐使用这种方法*!*/
        /*.box4{*/
        /*    height: 100px;*/
        /*}*/

        /*!*解决方法三：给父级盒子设置overflow，不过会隐藏下拉框，所以不推荐*!*/
        /*.box{*/
        /*    overflow: hidden;*/
        /*}*/

        /*!*解决方法四：清除浮动，只有块状元素可以使用，推荐使用这种方法*!*/
        /*.box:after{*/
        /*    display: block;*/
        /*    content: "";*/
        /*    clear:both;*/
        /*}*/
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

3. CSS定位

定位就是将元素定在网页中的任意位置。

3.1. 静态定位

static静态定位（没有定位），默认。

3.2. 相对定位

relative相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置。

3.3. 绝对定位

absolute绝对定位，没有占据位置，使元素完全脱离文档流；没有定位父级，则相对整个文档发生偏移;参考最近非static定位的父级进行定位。

3.4. 固定定位

fixed固定定位，相对于浏览器窗口进行定位方形词;left 、 right、top、bottom。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS positioning and hierarchy</title>
    <style>
        *{
            /*将网页自带的样式，外边距和内边距给去除，方便绝对定位使用*/
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            background-color: orange;
            /*父级盒子最好用相对定位*/
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: crimson;
            /*!*静态定位*!*/
            /*position: static;*/
            /*top: 50px;*/

            /*!*相对定位，距离上边，往下移了50px，相对于外部的盒子*!*/
            /*position: relative;*/
            /*top: 50px;*/

            /*!*绝对定位，是相对于网页，不过也相对设置了定位父级盒子的位置进行改变*!*/
            /*!*子级盒子最好用绝对定位*!*/
            /*position: absolute;*/
            /*top: 200px;*/

            /*!*固定定位，相对浏览器改变位置，如下方显示则在右下角*!*/
            /*position: fixed;*/
            /*right: 0;*/
            /*bottom: 0;*/
        }
        .box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: yellow;
            position: absolute;
            top: 200px;
            /*层级默认是0*/
            z-index: 2;
        }
        .box3{
            background-color: blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
</div>
</body>
</html>

4. 重置样式

浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不—致。在这里我们可以使用别人提供的 ResetCSS来去掉浏览器的样式，重新开始写自己的样式。

4.1. CSS文件代码（文件名称为04、reset styles.css）

/* 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;
}

4.2. HTML文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reset styles</title>
    <link rel="stylesheet" href="04、reset%20styles.css">
    <style>
                .box{
            width: 200px;
            height: 300px;
            background-color: orange;
            /*父级盒子最好用相对定位*/
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
        .box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: yellow;
            position: absolute;
            top: 200px;
            /*层级默认是0*/
            z-index: 2;
        }
        .box3{
            background-color: blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
</div>
</body>
</html>

文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！

Editor：Lonelyroots

Python（三十六）CSS提升

1. 盒子模型

1.1. 盒子模型（Box Model）

1.2. 盒子模型的包含内容

1.3.盒子各部分解释

2. CSS浮动

2.1. 文档流

2.2. CSS浮动

2.3. CSS浮动优缺点

3. CSS定位

3.1. 静态定位

3.2. 相对定位

3.3. 绝对定位

3.4. 固定定位

4. 重置样式

4.1. CSS文件代码（文件名称为04、reset styles.css）

4.2. HTML文件代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

作业本

想法

好文有约

Python（三十六）CSS提升

1. 盒子模型

1.1. 盒子模型（Box Model）

1.2. 盒子模型的包含内容

1.3.盒子 各部分解释

2. CSS浮动

2.1. 文档流

2.2. CSS浮动

2.3. CSS浮动优缺点

3. CSS定位

3.1. 静态定位

3.2. 相对定位

3.3. 绝对定位

3.4. 固定定位

4. 重置样式

4.1. CSS文件代码（文件名称为04、reset styles.css）

4.2. HTML文件代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

作业本

想法

好文有约

1.3.盒子各部分解释