响应式布局

最新推荐文章于 2025-05-24 22:11:29 发布

原创最新推荐文章于 2025-05-24 22:11:29 发布 · 980 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

18 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

移动Web开发

6 篇文章

订阅专栏

该博客围绕阿里百秀案例展开，介绍了width:100%在box-sizing为content-box和border-box时的不同含义，对比了max-width:100%和width:100%的区别，还提及max-width与width搭配使用可使标签具备可放缩特性，最后说明了小盒子满足条件时显示的情况。

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

阿里百秀案例

1.width：100%;

1.1 box-sizing为content-box时

width：100%;表示width=父级的width
父级的width不包括其内边距和边框值

1.2 box-sizing为border-box时

width：100%;表示width=父级的width
父级的width包括其内边距和边框值

1.3实践

在这里插入图片描述

3处的空白间隔：
1号盒子padding-right:10px
2号盒子width:100%，此处为默认的content-box
所以width：100%;表示width=父级的width
父级的width不包括其内边距和边框值

<li>
	<a href="#">
		<img src="upload/lg.png" alt="">
		<p>阿里百秀</p>
	</a>
</li>

.news li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.news li a img {
    width: 100%;
    height: 100%;
}

2.max-width:100%和width:100%的区别

max-width:100%：

图片默认192px*120px

.logo img {
    display: block;
    width: 100%;
    /* max-width: 100%; */
    margin: 0 auto;
}

在这里插入图片描述

.logo img {
    display: block;
    /* width: 100%; */
    max-width: 100%;
    margin: 0 auto;
}

在这里插入图片描述

width默认是auto,只设置max-width相当于没有设置width,那么width按照默认值自然就是图片的宽度。

max-width和width搭配使用：

很多场景max-width和width搭配使用，比如一个标签，width是（父元素）90%但是max-width不能超过1200px，那么这个标签就具有最基本的可放缩特性。

3.事先准备的小盒子隐藏，到了满足条件显示

在这里插入图片描述

<div class="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="" class="hidden-xs">
                        <span class="visible-xs">阿里百秀</span>
                    </a>
</div>

/* 1.我们如果进入了超小屏幕下  logo里面的图片就隐藏起来 */
/* 2. 我们事先准备好一个盒子 在logo里面，它平时是隐藏起来的，只有在超小屏幕下显示 */
.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}