9.css4个要点补充_9css4-CSDN博客

本文链接：https://blog.csdn.net/xuexiaozhuguo/article/details/119680919

本文介绍了如何实现淘宝首行布局，通过CSS的`margin: 0 auto`实现两边留白自适应，中间内容固定宽度。同时探讨了文本类元素的特性，包括`position:absolute`和`float`属性对元素的影响，以及文本垂直对齐的各种方式。文章还详细讲解了如何消除文本和图片间的间隔，并展示了如何通过浮动元素实现左右布局。最后，讨论了使用`vertical-align`调整元素对齐线的方法。

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

文章目录

淘宝第一行，两边留白自适应，中间固定

在这里插入图片描述

<!-- 父子结构 -->
    <div class="wrapper">
        <div class="content"></div>
    </div>

.wrapper{
    height:30px;
    background-color: #123;
}
.content{
    /* 即上下外边距为0，左右外边距自适应 */
     margin:0 auto;


    width:1000px;
    height:30px;
    background-color: green;

}

淘宝

文本类元素

inline inline-block 凡是带有inline属性的都具有文本特性，所以都叫文本类元素
其中一个文本特性就是，文本之间写空格，空格是有具体的语法含义的，叫文本分隔符，所以显示在页面中的文本之间便会有间隔;解决办法，把空格去掉便可

   <span>123</span>
    <span>345</span>

去掉空格

<span>123</span><span>345</span>

图片也是文本类元素，因为他是inline-block 具有文本特性，中间也会存在间隔

    <img src="test.png" alt="" width="100px">
    <img src="test.png" alt="" width="100px">
    <img src="test.png" alt="" width="100px">
    <img src="test.png" alt="" width="100px">

解决办法同样是去空格

   <img src="test.png" alt="" width="100px"><img src="test.png" alt="" width="100px"><img src="test.png" alt="" width="100px"><img src="test.png" alt="" width="100px">

position:absolute|float:left/right 设置之后该元素便会变为inline-block元素

即行级元素若设置了以上两个属性之一，便变成了行级块元素，便可以设置宽和高了

文本垂直对齐方式

在一行文本里面是底对齐

<div>前端前端，<span>前端</span></div>

span{
    font-size:50px;
}

现把文本和图片放在一起，可以看出文本类元素所体现的特点和文本一样，也是和文本底对齐的

 <img src="test.png" alt="" width="100px">呵呵

将span行级元素变为inline-block，给他设置宽高，也是和文本底对齐

<span></span>呵呵

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

特殊情况：一旦上方的span里面放了文字，呵呵就不再和span底对齐了，他就和它里面的文字底对齐了；
即如果一个行级块元素里面有文字，那么外面文本就会和他里面的文字底对齐

调整一行元素的对齐线 vertical-align

淘宝第一行的布局一个左浮动，一个右浮动

在这里插入图片描述

    <div>
        <ul style="float:left">left</ul>
        <ul style="float:right">right</ul>
    </div>

div{
    /* 没有设置高度，由内容撑开，子级又都是浮动元素，最后要清除浮动流才可以 */
    width:1000px;

    border:1px solid;

    margin:0 auto;
}
ul{
    width:300px;
    height:30px;
    background-color:green;
}
/* 清楚浮动流，clear属性必须是块级元素才好使 */
div::after{
    content:"";
    display:block;
    clear:both;
}