【CSS3系列】第九章 · 响应式布局和BFC

最新推荐文章于 2024-10-08 11:32:20 发布
最新推荐文章于 2024-10-08 11:32:20 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： CSS3基础精讲 文章标签： css3 前端 css html5 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34025246/article/details/131408961
版权
文章介绍了响应式布局的关键概念，包括媒体类型、媒体特性、运算符和常用阈值，并通过代码示例展示了如何结合外部样式使用媒体查询。此外，文章还详细解释了BFC（块格式化上下文），包括其定义、作用以及如何开启BFC来解决布局问题。
摘要由CSDN通过智能技术生成

写在前面

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

目录

写在前面

1. 响应式布局

1.1 媒体类型

1.2 媒体特性

1.3 运算符

1.4 常用阈值

1.5 结合外部样式的用法

 2. BFC

2.1 什么是BFC

2.2 开启了BFC能解决什么问题

2.3 如何开启BFC

结语

【往期回顾】

【CSS3系列】第七章 · 过渡和动画

【CSS3系列】第六章 · 2D和3D变换

【CSS3系列】第五章 · web 字体

【CSS3系列】第四章 · CSS3新增渐变

【CSS3系列】第三章 · CSS3新增边框和文本属性

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

1. 响应式布局

1.1 媒体类型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_媒体查询_媒体类型</title>
    <style>
        h1 {
            width: 600px;
            height: 400px;
            line-height: 400px;
            background-image: linear-gradient(30deg,red,yellow,green);
            margin: 0 auto;
            text-align: center;
            font-size: 100px;
            color: white;
            text-shadow: 0 0 10px black;
        }
        /* 只有在打印机或打印预览才应用的样式 */
        @media print {
            h1 {
                background: transparent;
            }
        }

        /* 只有在屏幕上才应用的样式 */
        @media screen {
            h1 {
                font-family: "翩翩体-简";
            }
        }

        /* 一直都应用的样式 */
        @media all {
            h1 {
                color: red;
            }
        }
        
    </style>
</head>
<body>
    <h1>新年快乐</h1>
</body>
</html>

1.2 媒体特性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_媒体查询_媒体特性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        h1 {
            height: 200px;
            background-color: gray;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
        }

        /* 检测到视口的宽度为800px时，应用如下样式 */
        @media (width:800px) {
            h1 {
                background-color: green;
            }
        }

        /* 检测到视口的宽度小于等于700px时，应用如下样式 */
        @media (max-width:700px) {
            h1 {
                background-color: orange;
            }
        }

        /* 检测到视口的宽度大于等于900px时，应用如下样式 */
        @media (min-width:900px) {
            h1 {
                background-color: deepskyblue;
            }
        }

        /* 检测到视口的高度等于800px时，应用如下样式 */
        /* @media (height:800px){
            h1 {
                background-color: yellow;
            }
        } */

        /* 检测到屏幕的宽度等于1536px时，应用如下样式 */
        /* @media (device-width:1536px) {
            h1 {
                color: white;
            }
        } */


    </style>
</head>
<body>
    <h1>你好啊</h1>
</body>
</html>

1.3 运算符

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_媒体查询_运算符</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        h1 {
            height: 200px;
            background-color: gray;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
        }

        /* 且运算符 */
        /* @media (min-width:700px) and (max-width:800px) {
            h1 {
                background-color: orange;
            }
        } */
        /* @media screen and (min-width:700px) and (max-width:800px) {
            h1 {
                background-color: orange;
            }
        } */

        /* 或运算符 */
        /* @media screen and (max-width:700px) or (min-width:800px) {
            h1 {
                background-color: orange;
            }
        } */

        /* 否定运算符 */
        /* @media not screen {
            h1 {
                background-color: orange;
            }
        } */

        /* 肯定运算符 */
        @media only screen and (width:800px) {
            h1 {
                background-color: orange;
            }
        }

    </style>
</head>
<body>
    <h1>你好啊</h1>
</body>
</html>

1.4 常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

1.5 结合外部样式的用法

用法一 ： 
<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">
用法二： 
@media screen and (max-width:768px) {
    /*CSS-Code;*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
    /*CSS-Code;*/
}

 2. BFC

2.1 什么是BFC

W3C 上对 BFC 的定义：

  • 浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和 table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新的块格式化上下文。

MDN 上对 BFC 的描述：

  • 块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

更加通俗的描述：

  • BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
  • 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
  • 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。

2.2 开启了BFC能解决什么问题

1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

2.3 如何开启BFC

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
  • overflow 的值不为 visible 的块元素
  • 伸缩项目
  • 多列容器
  • column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
  • display 的值，设置为 flow-root

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

麟-小白
关注
专栏目录
响应式布局是什么?如何实现响应式布局
sdasadasds的博客
04-07 684
响应式布局是一种布局方式，它可以根据不同设备的屏幕大小和分辨率自适应调整布局，从而使网页在不同设备上都能够正常显示。本文详细说明了实现响应式布局的步骤
响应式布局 BFC
ailxxiaoli的博客
07-24 375
响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端 ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同 终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也 不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多
响应式布局
taoalways18的博客
02-12 939
响应式布局 本人在写项目时使用响应式布局查找的资料、得到的收获和遇到的Bug 以下有引用了其他作者的文章，若有侵权，联系删除！ 疑问 1rem为何不能为1px 当前浏览器设定的最小字体大小为12px，所以浏览器自动把html{font-size: 1px} 识别为html{font-size: 12px}，所以效果也就是1rem = 12px。 在调整浏览器最小字体大小以后，也验证了以上原因是正确的。 所以设定为1rem=100px，也是最简便的开发方式。 注意 宽度需要使用百分比 例如这样： #hea
CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）...
weixin_42415681的博客
07-16 73
display:none 隐藏布局用于隐藏元素，不会占用页面空间；给 html 标签设置 hidden 属性，其效果即将其 display 设置为 none登录后复制 <div hidden>我被隐藏了</div>1.visibility: hidden 也能隐藏元素，但该元素仍会占用页面空间di...
HTML & CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
殷志鹏的博客
07-04 633
每一个知识点都有相应的测试代码，你可以将代码复制到文件中，然后在浏览器中打开测试即可 推荐使用谷歌浏览器Chrome 文章目录一、基础（HTML和CSS中较复杂内容）1、meta标签2、CSS选择器1、伪类选择器2、伪元素3、属性选择器4、子元素伪类5、兄弟选择器6、否定伪类选择器7、选择器的优先级和顺序3、盒模型4、 一、基础（HTML和CSS中较复杂内容） 1、meta标签 meat标签 meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是...
第一章 面试题基础篇（HTML+CSS）
欢迎来到我的博客！
08-09 1681
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/reset.css 是一个css文件，用来重置css样式的。normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 532
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
记录 Html和CSS布局技巧
qq2276031的博客
03-16 127
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素） 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点：兼容性好； 不足：需要同时设置子元素和父元素 使用margin:0 auto来实现
两栏布局,DPI,Attribute / property,流式布局和响应式布局，BFC,雪碧图 （ 精灵图 ），SVG，浏览器兼容问题，“::before”和“:after”中的双冒号和单冒号的区别
highfish920的博客
08-19 175
两栏布局,DPI,Attribute / property,流式布局和响应式布局，BFC,雪碧图 （ 精灵图 ），SVG，浏览器兼容问题，“::before”和“:after”中的双冒号和单冒号的区别 两栏布局 1 margin-bottom和padding-bottom 2 table-row和table-cell 3 flex布局 DPI（移动端） Dpi:每英寸包含点的数量(dots per inch) 普通屏幕通常包含96dpi,一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如M
前端大厂css面试题目|CSS布局单位， 两栏布局，. 三栏布局，flex:1，响应式设计的概念及基本原理，实现“品” 字布局，实现九宫格布局
VAN
04-13 170
常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：●CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；●物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
2020-12-16 html、css面试题2:flex布局，css 隐藏元素，position定位，BFC，浮动和清除浮动，外边距重叠，防止外边距重叠
Amanda&Rachel的博客
12-16 436
6.简述flex布局 flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis） flex-direction：决定主轴的方向 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 flex-wrap：换行 nowrap（默认）：不换行。 wrap：换行，第一行在上
我在乐字节学习前端的第三天-学习笔记：H5+CSS3面试题总结
weixin_52392949的博客
11-16 936
H5+css3面试题总结 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 如何区分 HTML 和 HTML5？ DOCTYPE声明 新增的结构元素 功能元素 123 二、对语义化标签的...
H5+css3面试题总结
热门推荐
Ryan的博客
08-22 2万+
H5+css3面试题总结 哈喽，各位小伙伴们，又到了一年一度的毕业季，俗话说的话：毕业等于失业。一毕业就要面临着找工作的压力。我们程序员也是一样，程序员找工作更辛苦。因为还会有技术面试。所以我给大家总结了我面试的一些问题及答案，希望能帮到大家 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线...
使用CSS3与JavaScript实现炫酷的3D旋转魔方及九宫格交换动效
最新发布
qq_40791475的博客
10-08 1501
这篇文章详细介绍了如何使用CSS3和JavaScript实现一个具有科技感的3D旋转魔方，并且在魔方的九宫格中实现数字随机交换的动效。文章从实现需求出发，逐步讲解了CSS3的3D变换基础知识，如何使用HTML和CSS构建魔方的基础结构，并通过CSS动画让魔方在三维空间中旋转。接着，使用JavaScript实现九宫格的数字交换和相邻格子判断的逻辑，确保动画效果自然流畅。最后，文章提供了完整的项目代码和详细的解释，帮助读者更好地理解和掌握这些前端技术。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1304
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
CSS3练习--电商web
金灰的博客
10-04 1162
免责声明：本文仅做分享！SEO、Favicon、小兔鲜儿。
CSS浮动
2401_82561004的博客
10-06 568
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于Word 中图文混排。注意：浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。运行结果如下图所示：图：float 属性演示。
CSS3--美若天仙！？
金灰的博客
10-03 1592
浮动属性 float，left 表示左浮动，right 表示右浮动l特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果推荐双伪元素法清除浮动。l拓展：浮动本质作用是实现图文混排效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麟-小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值