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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值