CSS要点与项目实战：元素布局与对齐技巧-优快云博客

本文探讨了CSS中的关键点，包括如何实现淘宝页面内容在浏览器窗口缩小时保持居中，display属性的三种类型，以及文本类元素的行为。还讨论了如何通过position或float改变行级元素的宽高，并详细阐述了文本底对齐和调整对齐线的策略，以适应如淘宝头部导航栏的设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css要点补充，项目演练

淘宝的页面两边有留白，当缩小浏览器窗口时，中间的内容不会缩小，而是两边的留白在缩小？
在内容部分加上margin，上下是0，左右自适应。

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="content"></div>
        </div>
        
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    height: 30px;
    background-color: #123;
}

.content{
    /* 外边距，上下是0，左右自适应 */
    margin: 0 auto;
    width: 800px;
    height: 30px;
    background-color: hotpink;
}

display属性有三种元素：inline, block, inline-block
inline inline-block --> 文本类元素
凡是带有inline属性的元素都有文本属性，所有它叫文本类元素。
我们的两个文本之间，无论加多少个空格，显示出来的都只有一个空格。span是一个文本类元素，两个span之间无论加多少个空格，显示出来的也只有一个空格。
img是inline-block，是文本类元素，能被文字分隔符分割。四个img标签之间的换行符是文字分隔符，所以在本机显示的四张图中间会有一个空格。但是一旦html代码上传到服务器，服务器会将html代码中的空白字符都去掉，所以四个img标签之间就没有换行符了，所以在服务器上展示的效果是四个图片能正常合并在一起。

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
        <img src="images/spring.jpeg" alt="">
        <img src="images/spring.jpeg" alt="">
        <img src="images/spring.jpeg" alt="">
        <img src="images/spring.jpeg" alt="">
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

img{
    width: 100px;
}

    <body>
        <img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt="">
    </body>

正常情况下，行级元素不能加宽高，比如span。但是我们给这个标签加一个position: absolute或者是float: left，就可以改宽高了。

只要我们有postion: absolute;或者float: left/right;之一，这些元素在内部会自动被转换为display: inline-block;

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
      <span>123</span>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

span{
    /* position: absolute; */
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}

文本底对齐

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
      <div>多多最爱谁，<span>鹏哥</span></div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

span{
font-size: 50px;
}

正常情况下，图片和文本也会底对齐

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
      <img src="images/spring.jpeg" alt="">多多
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

img{
    width: 100px;
}

当行级块元素中没有文字时，外面的元素和该行级块元素底对齐。但是一旦行级块元素中有文字，外面的文字就和行级块元素中的文字底对齐。

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
        <span>鹏哥</span>阿多米尼斯多雷特
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

span{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 50px;
}

调整对齐线

*{
    margin: 0;
    padding: 0;
}

span{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 50px;
    /* 调整对齐线 */
    vertical-align: middle;
}

淘宝头部导航栏，一部分向左浮动，一部分向右浮动

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson9</title>
        <link rel="stylesheet" href="css/lesson9.css">
    </head>
    <body>
        <div>
            <ul style="float: left;"></ul>
            <ul style="float: right;"></ul>
        </div>
    </body>
</html>