响应式布局 媒体查询 弹性盒子 grid布局

已于 2022-08-07 10:43:28 修改
阅读量316 收藏 3
点赞数
文章标签： html
于 2022-07-26 19:02:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/red_HTML/article/details/125988865
版权

媒体查询   弹性盒子

<!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 type="text/css">
        .div {
            display: flex;
            width: 100%;
        }
        
        .div div {
            width: 200px;
            height: 100px;
            background: red;
        }
        
        @media screen and (max-width:768px) {
            .div {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="div">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</body>

</html>

@media screen and (max-width:768px) {

            .div {

                flex-direction: column;

            }

        }

and 后面与括号后面一定要记得加空格分开

 max-width：768px  屏幕最大是 768px

 min-width: 1000px 屏幕最小是 1000px

 ​

给父元素的来添加属性  来控制盒子的位置和排列方式

order 用来控制弹性盒子的顺序 值越小越靠前 默认值为0

flex-wrap :wrap 换行 

wrap-reverse  

<!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 type="text/css">
        .box {
            display: flex;
            /* 默认无效果 */
            flex-wrap: nowrap;
            /* 换行 */
            flex-wrap: wrap;
            /* 换行   第二行在上方 */
            /* flex-wrap: wrap-reverse; */
        }
        
        .box div {
            width: 200px;
            height: 200px;
            background: red;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>J</div>
            <div>Q</div>
            <div>K</div>
        </div>
    </div>
</body>

</html>

flex-wrap: nowrap;  /* 换行 */

/* 换行   第二行在上方 */ flex-wrap: wrap-reverse; 

<!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 type="text/css">
        .box {
            display: flex;
            /* 默认无效果 */
            /* 左 */
            /* justify-content: flex-start; */
            /* 右 */
            /* justify-content: flex-end; */
            /* 居中 */
            /* justify-content: center; */
            /* 中间平分 */
            /* justify-content: space-around; */
            /* 两端对齐 */
            /* justify-content: space-between; */
        }
        
        .box div {
            width: 200px;
            height: 200px;
            background: red;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>

        </div>
    </div>
</body>

</html>

 /* 左 *//* justify-content: flex-start; */

/* 右 */ /* justify-content: flex-end; */           

/* 居中 */ /* justify-content: center; */           

 

/* 中间平分 *//* justify-content: space-around; */           

 

/* 两端对齐 */

            /* justify-content: space-between; */

<!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 type="text/css">
        .box {
            width: 900px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            /* 上面 */
            /* align-items: flex-start; */
            /* 下面 */
            /* align-items: flex-end; */
            /* 中间 */
            /* align-items: center; */
            /* 拉伸 */
            align-items: stretch;
        }
        
        .box div {
            width: 200px;
            /* height: 200px; */
            background: red;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>

        </div>
    </div>
</body>

</html>

 /* 下面 */align-items: flex-end;       

/* 上面 */  align-items: flex-start;

    /* 中间 */  align-items: center;   

/* 拉伸 */ align-items: stretch;

 

<!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>
    <link rel="stylesheet" href="练习1.css">
</head>

<body>
    <div class="box">
        <div class="div_1">
            <header>
                <ul>
                    <li>手机</li>
                    <li>查看更多<span>></span></li>
                </ul>
            </header>
            <section>
                <div>
                    <img src="0726img/left.jpg" alt="">
                </div>
                <div>
                    <ul>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                        <li>
                            <img src="0726img/1.png" alt="">
                            <p>Xiaomi 12S Ultra</p>
                            <p>这真徕卡 | 专业徕卡映像</p>
                            <p>5999元起</p>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.box .div_1 {
  margin: 0 auto;
  width: 1200px;
  height: 620px;
  border: 1px solid red;
}
.box .div_1 header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px auto;
}
.box .div_1 header ul {
  border: 1px solid blue;
  grid-column-start: 1;
  display: flex;
  justify-content: space-between;
}
.box .div_1 header ul li {
  line-height: 40px;
}
.box .div_1 section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 580px auto;
}
.box .div_1 section div:nth-child(1) img {
  width: 300px;
  height: 580px;
}
.box .div_1 section div:nth-child(2) ul li {
  margin-bottom: 10px;
}
.box .div_1 section div:nth-child(2) ul li img {
  width: 200px;
  height: 200px;
}
.box .div_1 section div:nth-child(2) ul li p {
  text-align: center;
}
.box .div_1 section div:nth-child(2) ul li p:nth-child(2) {
  font-size: 20px;
}
.box .div_1 section div:nth-child(2) ul li p:nth-child(4) {
  font-size: 20px;
  color: red;
}
.box .div_1 section div:nth-child(3) ul li img {
  width: 200px;
  height: 200px;
}
.box .div_1 section div:nth-child(3) ul li p {
  text-align: center;
}
.box .div_1 section div:nth-child(3) ul li p:nth-child(2) {
  font-size: 20px;
}
.box .div_1 section div:nth-child(3) ul li p:nth-child(4) {
  font-size: 20px;
  color: red;
}
.box .div_1 section div:nth-child(4) ul li img {
  width: 200px;
  height: 200px;
}
.box .div_1 section div:nth-child(4) ul li p {
  text-align: center;
}
.box .div_1 section div:nth-child(4) ul li p:nth-child(2) {
  font-size: 20px;
}
.box .div_1 section div:nth-child(4) ul li p:nth-child(4) {
  font-size: 20px;
  color: red;
}
.box .div_1 section div:nth-child(5) ul li img {
  width: 200px;
  height: 200px;
}
.box .div_1 section div:nth-child(5) ul li p {
  text-align: center;
}
.box .div_1 section div:nth-child(5) ul li p:nth-child(2) {
  font-size: 20px;
}
.box .div_1 section div:nth-child(5) ul li p:nth-child(4) {
  font-size: 20px;
  color: red;
}/*# sourceMappingURL=练习1.css.map */

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;   分为五列

grid-template-rows: 580px auto;  最上面580px 下面自适应

grid-column-start: 1;  从第几列（从左边的单元格线）开始数

grid-column-end: 2;    到第几列（到最右边的第几个单元格线）结束

grid-row-start:  从第几行开始（最上面单元格 的单元格线开始数）

grid-row-end:从第几行开始（最下面的单元格先结束）

<main>
        <div>手机</div>
        <div><a href="#">查看更多</a></div>
        <div>left</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </main>
<style type="text/css">
        main{
            width: 2000px;
            overflow: auto;
            display: grid;
            grid-template-columns: repeat(5,200px);
            grid-template-rows: 50px 400px 400px;
            row-gap: 10px;
            column-gap: 10px;
        }
        main div{
            border: 1px solid red;
        }
        main div:nth-child(2){
            grid-column-start: 2;
            grid-column-end: 6;
            text-align: right;
        }
        main div:nth-child(3){
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
            grid-row-end: 4;
            border: 1px solid black;
        }
    <style>
<!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 type="text/css">
        .box {
            width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 250px);
            grid-template-rows: repeat(4, 150px);
        }
        
        .box div {
            border: 1px solid red;
        }
        
        .box div:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 1;
            grid-row: 1/3;
        }
        
        .box div:nth-child(3) {
            /* grid-column-start: 1; */
            /* grid-column-end: 1; */
            grid-column: 3/4;
            grid-row: 1/3;
        }
        
        .box div:nth-child(7) {
            /* grid-column-start: 1; */
            /* grid-column-end: 1; */
            grid-column: 1/5;
            grid-row: 3/4;
        }
        
        .box div:nth-child(8) {
            /* grid-column-start: 1; */
            /* grid-column-end: 1; */
            grid-column: 2/3;
            grid-row: 3/4;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

大坤...
关注
布局、响应式布局、grid布局、
m0_68618659的博客
07-26 1078
网站布局是一种定义网站结构的模式(或框架)。它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。良好的布局可以使用户留在网站上，因为它可以轻松访问重要信息并直观地查找它们。不良的布局会使用户感到失望。然后他们会因为找不到所需的内容而迅速离开网站。出于这个原因，最好花尽可能多的时间找到所需的布局，因为用户给你的时间不会超过几秒钟。...
手机端/响应式/网格布局/盒模型布局/弹性盒布局/多列布局
weixin_53342968的博客
02-13 346
布局
grid响应式布局
weixin_34250434的博客
07-28 122
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0;
Web响应式设计———1、Grid布局
最新发布
Violetto_Yan的博客
07-21 462
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
弹性盒布局、媒体查询
Schrodinge的博客
05-03 787
（一）弹性盒 1.设置在容器（父元素上）上： (1)display:flex; 父元素设置成弹性盒。 规定子项目在父元素主轴方向一行显示，不会换行。侧轴方向会默认拉伸。 (2)设置主轴方向 flex-direction 属性值: row 默认为水平向右 column 垂直向下 row-reverse 水平向左 ...
CSS基础篇--快速使用CSS Grid布局，实现响应式设计
weixin_33737774的博客
03-30 182
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起。 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。 下面是一个 wrapper 元素，内部包含6个 items ： <div class...
响应式布局之grid网格布局，应该怎么用？
weixin_52583582的博客
12-10 863
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上) <div class="container"> <div class="item"> <p>1</p> </div> <div class="item">2</div> <div class="item">3</div> <div class
8. 使用弹性盒子制作响应式布局
在传统的网页布局中，我们通常使用盒子模型来进行布局设计，但是盒子模型存在一些局限性，特别是在响应式布局方面。弹性盒子布局的出现填补了这一空白，使得网页布局更具适应性和扩展性。 ## 1.1 什么是弹性盒子...
响应式布局和媒体查询怎么使用
11-25
常用的响应式布局方法包括百分比布局、弹性盒子布局（Flexbox）、网格布局（Grid）等。 使用响应式布局时，需要确保所有元素都有合适的宽度和高度，并且能根据屏幕大小自适应调整。可以使用媒体查询来更改元素的...
CSS3布局：响应式设计和弹性盒子
传统的网页布局主要依赖于使用表格或浮动来实现，但这种方式存在不少问题，比如难以适应不同屏幕尺寸的设备和响应式设计等需求。而CSS3布局则通过引入新的特性和属性，使得网页布局更加灵活、易于实现和维护。 ## ...
关于CSS3弹性盒子的flex布局以及媒体查询
m0_56649557的博客
08-29 1024
CSS3弹性盒子(Flex Box) 弹性盒子是css3中一种新的布局手段，它主要用来代替浮动来完成页面的布局，当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，换句话来讲就是可以让元素跟随页面大小的改变而改变，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性容器 要使用弹性盒子，必须将一个元素设置为弹性容器，我们通过 display：flex 来设置弹性容器，display:inline-flex 设置为行内的弹性容器 弹
弹性盒子与媒体查询
c_l_a_n_n_d的博客
07-27 162
弹性盒子与媒体查询justify-contentflex-start(默认)左对齐/flex-end右对齐/center水平居中/space-between两端对齐项目(盒子)间距离相等/space-around两端对齐项目两侧距离相等/space-evenly两端对齐两端距离与盒子间距离相等。align-itemsstretch(默认当项目没有设置高度会默认为父元素高度)/flex-start(顶部对齐)/flex-end(底部对齐)/center垂直居中/baseline与第一行文字底部对齐/...
CSS Grid 响应式布局
qq_41594043的博客
11-13 472
今天偶然在一前端公众号推文中看到CSS Grid这个东西，看完可以说是惊喜不已，响应式布局还可以这样做？没有冗余的col-sm-4, col-md-8类名，不用自己进行媒体查询，不要太酷 下面主要是对之前那片推文及其他相关资料的整理 首先，这种静态效果怎么用CSS Grid制作出来呢？ HTML 代码： <div class="container"> <div>1&l...
【多列布局 + 弹性盒子 + 响应式布局】
YANG_helloworld的博客
12-27 1174
html5+ css3 相关 (弹性盒子,多列布局,相应式布局)
Grid 网格响应式布局教程
前端_李嘉豪
09-29 1513
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。相对于，Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，在某些使用场景下，会比flex布局更便捷一些。
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1133
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
grid布局、css3计算属性、多媒体查询
yss2917897194的博客
07-07 194
grid布局、css3计算属性、多媒体查询
CSS 弹性盒子flexbox和grid布局
qq_40891322的博客
10-15 795
一.弹性盒子flexbox 1.简介 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 2.组成 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值