前端学习-HTML/CSS刷题笔记02

1 外边距折叠

用处：当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。
如何去除外边距折叠：给目标盒子设置以下属性：

display: inline-block
float属性值不是"none"的元素
绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top,
        .bottom {
            width: 100px;
            height: 100px;
            margin: 10px;
            /* 方法1： */
            /* display: inline-block; */

        }

        .top {
            background-color: skyblue;
        }

        .bottom {
            background-color: pink;
            /* 方法3： */
            /* position: absolute; */
            /* 方法2： */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。 -->
    <section class="top"></section>
    <section class="bottom"></section>
    <script>
        
    </script>
        

</body>
</html>

2 浮动

了解浮动

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。
现在给"body"标签设置宽度为300px，再给类名为"left"、"center"、"right"的盒子（左、中、右盒子）皆设置宽度、高度且都为100px，三个盒子的颜色可以自定义以便于观测。继续给中间盒子设置"float: left"属性，此时中间盒子已经是一个浮动盒子，不再占据流中的位置空间，右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。现在再给左、右盒子皆设置"float: left"属性，此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px，可以观察到因为"body"盒子较窄，所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子，右盒子被卡在了中间盒子下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 300px;
            height: 300px;
        }

        .left,
        .center,
        .right {
            width: 100px;
            height: 100px;
            float: left;
        }

        .left {
            width: 120px;
            height: 120px;
            background-color: red;
        }

        .center {
            background-color: pink;
        }

        .right {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

</body>
</html>

清除浮动

要点：

文本被浮动元素覆盖后，会识别到浮动盒子并且绕开浮动盒子。
没有清除浮动时，父级元素的高度不会将浮动元素高度计算进去
使用clear来清除浮动
清除浮动后，非浮动元素位置会发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .media {
            width: 100px;
            height: 100px;
            float: left;
            background-color: skyblue;
        }
        .clear-left {
            clear: left;
        }
    </style>
</head>
<body>
    <section>
        <div class="media"></div>
        <p>hello</p>
        <p class="clear-left">universe</p>
    </section>
        

</body>
</html>

3 定位

static

在流中的元素定位属性值默认都为"static"，即没有定位。
此时元素会忽略"top"、"bottom"、"left"、"right"和"z-index"定位属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            width: 100px;
            height: 100px;
            background-color: black;
            /* 以下语句无效 */
            left: 10px;
        }
    </style>
</head>
<body>
    <section></section>
</body>
</html>

inherit

要点：

子元素设置position:inherit属性时，继承父元素的定位position属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 100px;
            height: 100px;
            background-color: black;
            /* left: 10px; */
            position: relative;
        }
        .inner {
            width: 80px;
            height: 80px;
            background-color: red;
            position: inherit;
            left: 10px;
        }
    </style>
</head>
<body>
    <section class="outer">
        <section class="inner">
            
        </section>
    </section>
        

</body>
</html>

absolute

要点：

position:absolute; 绝对定位元素默认位置为当前绝对定位盒子在流中的位置（也就是，元素会从流中出来，但位置还是不变，可能会覆盖后面的元素）
绝对定位元素的父级是距离该元素最近的定位祖先，也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素"html"进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
            margin: 0;
            padding: 0;
        }
        .outer,
        .middle,
        .inner {
            width: 100px;
            height: 100px;
            padding-left: 10px;
        }

        .outer {
            background-color: greenyellow;
        }
        .middle {
            background-color: skyblue;
            position: absolute;
        }
        .inner {
            background-color: pink;
            position: absolute;
            left: 0;
        }
        </style>
    </head>
    <body>
    	<div class="outer">
            <div class="middle">
                <div class="inner">
                    
                </div>
            </div>
        </div>
    </body>
</html>

z-index

决定元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。
z-index可以设置为负数，且该属性只能作用于定位元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
    <h1>The countdown to Christmas starts here.</h1>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100">
    <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

relative

要点：

相对定位元素，不会从流中出来
通过"top"、"right"、"bottom"和"left"属性使元素相对于初始位置进行移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        .center {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .right {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

fixed

要点：

衍生于absolute，但absolute父级是上一个非static的祖先冤死，fixed的父级是视口
固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等
固定定位也不在流中，要注意是否有遮挡其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        nav {
            position: fixed;
            width: 200px;
            background-color: pink;
            top: 0;
        }
        section {
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <nav><br /></nav>
    <section>1<br />2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
    

</body>
</html>

flex

要点：

Flexbox，也就是Flexible Box Layout模块，是CSS提供的用于布局的一套新属性
包含针对容器、容器直接子元素（弹性项）的两类属性
给容器的属性
属性flex-direction: row; 默认为row：水平排列，并且根据各自的内容宽度进行了收缩
属性justify-content: flex-start;默认为flex-start；修改为justify-content: center后：
辅轴（与主轴对应的另一方向的轴）(flex-direction: row;下主轴为水平）
控制辅轴对齐方式的"align-items"属性默认为"stretch"即拉伸，会占满"ul"的所有高度空间；修改为align-items: center:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            nav ul {
            height: 2rem;
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            nav ul li {
                border: 1px solid black;
            }
            nav ul li:first-child {
                font-size: 1.2rem;
            }
        </style>
    </head>
    <body>
    	<nav>
            <ul>
                <li>home</li>
                <li>spaceships</li>
                <li>planets</li>
                <li>stars</li>
            </ul>
        </nav>
    </body>
</html>

给弹性项（子元素）的属性

flex-grow:比如有4个子元素，flex-grow分别设为1，2，3，4，则这4个元素在主轴方向进行拉伸，按照1:2:3:4分配父元素剩余空间
看以下的例子：
- 主轴为column，父元素高度300px
- box1，box2，box3，box4原高度约19px
- 给box1，box2，box3，box4的flex-grow分别设置1，2，3，4，4个元素按照1:2:3:4分配父元素剩余高度300px-4*19px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            display: flex;
            height: 300px;
            flex-flow: column;
            align-items: stretch;
        }

        .box1 {
            flex-grow: 1;
        }

        .box2 {
            flex-grow: 2;
        }

        .box3 {
            flex-grow: 3;
        }

        .box4 {
            flex-grow: 4;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box1" style="background-color:red;">A</div>
        <div class="box2" style="background-color:lightblue;">B</div>
        <div class="box3" style="background-color:yellow;">C</div>
        <div class="box4" style="background-color:brown;">D</div>
    </div>
</body>
</html>

flex-shrink：和flex-grow相同原理，但分配的是溢出的空间
- 以下例子水平方向溢出200px，按1:2:3:4分配后，分别为80px，60px，40px，20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            display: flex;
            width: 200px;
            flex-flow: row;
            align-items: stretch;
        }

        .box {
            width: 100px;
        }
        
        .box1 {
            flex-shrink: 1;
        }

        .box2 {
            flex-shrink: 2;
        }

        .box3 {
            flex-shrink: 3;
        }

        .box4 {
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box box1" style="background-color:red;">A</div>
        <div class="box box2" style="background-color:lightblue;">B</div>
        <div class="box box3" style="background-color:yellow;">C</div>
        <div class="box box4" style="background-color:brown;">D</div>
    </div>
</body>
</html>

flex-basis
- 相当于设置子元素在主轴方向上的长度（如果flex-flow: column;设置高度；如果flex-flow: row;设置宽度）
- 和height、width的区别：优先级高于height、width；如果设置的flex-basis的值不为auto，那么height/width设置什么值都无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            display: flex;
            width: 200px;
            /* height: 200px; */
            flex-flow: row;
            align-items: stretch;
        }

        .box {
            width: 100px;
            flex-basis: 100px;
        }
        
        .box1 {
            flex-shrink: 1;
        }

        .box2 {
            flex-shrink: 2;
        }

        .box3 {
            flex-shrink: 3;
        }

        .box4 {
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box box1" style="background-color:red;">A</div>
        <div class="box box2" style="background-color:lightblue;">B</div>
        <div class="box box3" style="background-color:yellow;">C</div>
        <div class="box box4" style="background-color:brown;">D</div>
    </div>
</body>
</html>

优化布局方式

缩放布局混乱：给父元素添加display: flex;和flex-wrap: wrap;变为弹性盒子、换行
设置宽度，防止每行宽度不同：给弹性项添加flex: 1 0 auto;
防止某个元素由于缩放宽度变为整行：max-width: 10rem;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
                margin: 0;
                padding: 0;
                font-size: 12px;
                box-sizing: border-box;
            }
            nav ul {
                padding: 0.5rem;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
            }
            nav ul li {
                /* display: inline-block; */
                margin: 0.2rem;
                flex: 1 0 auto;
                max-width: 10rem;
            }
            nav ul li a {
                position: relative;
                display: block;
                padding: 0.2rem 0.6rem;
                color: white;
                line-height: 1rem;
                background-color: black;
                border-radius: 0.2rem;
                text-decoration: none;
                text-align: center;
            }
            nav ul li a:before {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                border: 0.7rem solid transparent;
                border-right-width: 0.7rem;
                border-right-color: black;
                left: -1.2rem;
                top: 0;
            }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">Fillithar</a></li>
            <li><a href="">Berzite</a></li>
            <li><a href="">Galidraan</a></li>
            <li><a href="">Gravlex Med</a></li>
            <li><a href="">Cato Neimoidia</a></li>
            <li><a href="">Coruscant</a></li>
            <li><a href="">Dantooine</a></li>
            <li><a href="">Dhandu</a></li>
            <li><a href="">Iktotchon</a></li>
            <li><a href="">Hosnian Prime</a></li>
            <li><a href="">Harkrova I</a></li>
            <li><a href="">Livno III</a></li>
            <li><a href="">Karfeddion</a></li>
            <li><a href="">Eriadu</a></li>
            <li><a href="">Jestefad</a></li>
            <li><a href="">Iridonia</a></li>
            <li><a href="">Malachor</a></li>
            <li><a href="">Gan Moradir</a></li>
            <li><a href="">Kethmandi</a></li>
            <li><a href="">Mirrin Prime</a></li>
            <li><a href="">Ezaraa</a></li>
            <li><a href="">Muunilinst</a></li>
            <li><a href="">Itapi Prime</a></li>
            <li><a href="">Nam Chorios</a></li>
        </ul>
    </nav>
</body>
</html>

其他

order：给弹性项设置order值，可以完全摆脱项目在源码中顺序的约束；默认值为0

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
            section img {
                order: -1;
            }
        </style>
    </head>
    <body>
        <section>
            <h2>countdown</h2>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100%">
            <article>The countdown to Christmas starts here.</article>
            <p><a href="#">more</a></p>
        </section>
    </body>
    </html>

grid

要点：

grid-template-rows: 300px 300px 300px; 这句设置了3行的网格高度均为300px；简便写法为grid-template-rows: repeat(3,300px);
grid-template-columns: 200px 1fr 2fr; 这句第一个网格宽度为200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3；
grid-gap: 10px 5px; 第一个值为行间距，第二个值为列间距

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                width: 500px;
                text-align: center;
                display: grid;
                /* grid-template-columns: ; */
                grid-template-rows: 100px;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 10px;
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
    </html>

grid-template-areas:属性用于定义区域;
- grid-template-areas: 'a b c''d e f''g h i'; 相当于为9个区域命名；用于父元素
- 配合grid-area: e;使用；用于子元素（网格项），可修改元素的位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                text-align: center;
                display: grid;
                grid-template-rows: repeat(3,100px);
                grid-template-columns: repeat(3,100px);
                grid-template-areas: 'a b c''d e f''g h i';
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
            section article:first-child {
                grid-area: e;
            }
        </style>
    </head>
    <body>
        <section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
    </html>

posted @ 2024-01-17 13:25 ayubene 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端学习-HTML/CSS刷题笔记03

· 前端学习-CSS-08-盒子模型

· CSS-架构教程-全-

· 深入解析CSS

· HTML&CSS基础（CSS2）

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称： ayubene
园龄： 2年4个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

ayubene