因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。...流 CSS 中，有一个隐形的基本定位和布局机制，那便是 “流”。 在网络上，随便搜索一篇 CSS 教程，基本都会提到 “普通流” 和 “文档流”，还有 “文本流” 这些关键词，有时候经常会弄混淆他们。...对比水流和 CSS 文本流： div> 作为块级元素就像是铺满容器的水，注意是铺满；而 作为内联元素就像是漂浮在水中的木头。...2.1 流体布局 既然流是布局的机制，那么利用流的机制和特性就可以实现流体布局。使用流体布局从一定程度上可以帮助我们编写精简且巧妙的 CSS ，保持布局的强扩展性和韧性。...比如像 div> 这样的块级元素，它们的宽度默认是包含与它们的父级容器宽度的 100%。 （2）收缩与包裹，fit-content。指的是父元素的宽度会收缩到和内部元素宽度一样。
但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。...但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？...那当然不是那么回事了，不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等高的实现技术。...缺点： 使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。...三、给容器div使用单独的背景色（流体布局） 这种布局可以说是就是第二种布局方法，只是这里是一种多列的流体等高列的布局方法。
我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。...“流体布局”是html默认的布局机制，如你写的html不用css，默认自上而下（块级元素如div）从左到右（内联元素如span）堆砌的布局方式。 块级元素和内联元素 这个大家肯定都知道。...流体布局之下，块级元素的宽度width: auto是默认撑满父级元素的。这里的撑满并不同于width: 100%的固定宽度，而是像水一样能够根据margin不同而自适应的宽度。...特性 6 ：利用特性6实现自适应两栏布局。此时main宽度是自适应的。 ?...除了实现文字的两端对齐，还能用来做一些两端对齐的布局。（注意下面例子自己测试时需要保证每行三个方块！！！）下面介绍个两端对齐布局的实例：地址 ?
二、块状元素的流体特性与自适应布局 流体特性 块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right...于是，我们不仅可以实现两栏自适应效果，多栏自适应效果也不在话下。 然而，利用块状元素流体特性实现的自适应布局有个不足，就是，我们需要知道浮动或绝对定位内容的尺寸。...与纯流体特性布局的优势 BFC自适应布局优势我总结了下面2点： 自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。...而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化。...BFC元素家族与自适应布局面面观 理论上，任何BFC元素和浮动搞基的时候，都可以实现自动填充的自适应布局。
注意padding或margin值=左边图片的宽度+二者之间的间距 如果想要图片和文案是垂直居中的不太好实现 不过张大神说，这种左右结构的布局使用浮动，是对浮动的一种滥用（大概是这么个意思，也有可能我对其有曲解...：left 需要自适应的文案列margin-right等于固定宽度列的图片宽度+二者间距 有固定宽度的图片列，margin-left负边距为自己的宽度。...;以实现垂直居中 图片固宽元素不需要特殊设置，宽高即可 流体文案设置flex:1;自动分配剩余空间。...六、table-cell - 伪表格布局 有了table老人家的启发，让我想起来css中还有一个属性display，他的值是可以仿造table的。...:table;(自己测试不设置这一条也可以) 两列都设置display:table-cell;[w3c:此元素会作为一个表格单元格显示（类似td 和 th）] 别忘了两列之间的间隙，我比较喜欢用文字的左
，旁边两侧固定宽度 1.圣杯布局 ① 特点 比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。...div> div class="right">div> ② 实现步骤(前两步与圣杯布局一样) 三个部分都设定为左浮动，然后设置center的宽度为...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。 在制作样式之前需要一张类似下面的背景图： ?...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定，右侧自适应 两列自适应布局的四种思路 css常见布局之九：三栏布局的常见实现 【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三列布局
，旁边两侧固定宽度 1.圣杯布局 ① 特点 比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。...div> div class="right">div> ② 实现步骤(前两步与圣杯布局一样) 三个部分都设定为左浮动，然后设置center的宽度为...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。 在制作样式之前需要一张类似下面的背景图： ?...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定，右侧自适应 两列自适应布局的四种思路 css常见布局之九：三栏布局的常见实现 【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三列布局 推荐阅读： 1.
流体容器流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。...-- 嵌套容器的内容 --> div>div>在上述示例中，我们在一个固定宽度容器内创建了一个嵌套的固定宽度容器。可以根据需要进行多层嵌套。...响应式布局Bootstrap的容器组件还提供了响应式布局的支持，可以根据不同的屏幕尺寸调整容器的布局和样式。Bootstrap使用CSS的媒体查询（media query）来实现响应式布局。...根据屏幕尺寸的不同，可以应用不同的CSS样式。...这意味着在较小的屏幕上，左侧和右侧内容将分别在一行中显示。通过使用不同的col-类和媒体查询，我们可以根据需要在不同屏幕尺寸下创建不同的布局。
近日，又有一个电影院正在做着开张前期的准备，小蓝作为设计工程师，需要对电影院的座位进行布局设计。 本题需要在已提供的基础项目中，使用 CSS 达到对电影院排座位的目的。.../style.css 文件中的 TODO 下补全样式代码，最终达到预期布局效果，需要注意： 座位区域和荧幕间隔 50px。...座位区域每一行包含 8 个座位。 第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。...border-box，即元素的宽度和高度包含内容、内边距和边框，但不包含外边距，方便进行布局。...重新计算 seat 元素的宽度，确保座位能正确排列。 浏览器渲染页面：浏览器根据 HTML 结构和 CSS 样式，将页面渲染为包含屏幕和座位布局的电影院界面。 测试结果
格式化宽度具有完全的流体性。...替换元素：内容可以被替换，、、、、、 外部尺寸与流体特性 包裹性 元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸...首选最小宽度 css世界中，图片和文字的权重远大于布局，因此width: auto时宽度永远不会为0。...CSS流体布局下的宽度分离原则 width独立占用一层标签，而padding、border、margin利用流动性在内部自适应呈现。...float 浮动的本质就是为了实现文字环绕效果！！！少滥用float，需要更多的挖掘CSS世界本身的“流动性”和“自适应性”。
，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer 可以在Sublime text中通过package control...+流体布局 2、移动端适配： 流体布局+少量响应式 基于rem的布局 流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数...置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内 响应式布局 响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式...，从而实现响应式布局。...:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号 list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字
浮动和清除浮动：了解浮动属性和清除浮动的方法，以实现元素的自适应布局和多列布局。...0x01 CSS 盒子模型 描述：在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。...内联元素只能包含文本或其他内联元素，不能包含块级元素。...常见的内联块状元素有input、button等。 内联块状元素可以包含其他内联元素和文本，也可以和其他内联元素在同一行显示。...，CSS 渲染绘制时屏幕上盒子实际宽度和高度会加上设置的边框和内边距值，所以在实现响应式布局事会非常烦人，需要时刻注意到这个元素的边框和内边距。
CSS 多列布局、浮动布局以及了解表格布局及其他传统布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群...CSS 布局相关属性一览 # 传统布局 display (前已学习): 此章节主要的几个布局属性，即 flex、grid position (前已学习)：此章节主要的几个布局属性, 即 静态定位（默认）...0x01 CSS 页面布局 4.多列布局（Multicol） 描述: 多列布局(multicol)实际上是一种把内容按列排序的方式，由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式...网格布局的相关属性 column-count: 创建指定数量的列 column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量） column-fill：此属性控制在分解为列时如何平衡元素的内容...、样式和颜色 描述: 此 CSS 属性设置多列布局中在列之间绘制的线的宽度、样式和颜色。
即中间列自适应宽度，旁边两侧固定宽度的布局方式，最典型的是圣杯布局和双飞翼布局。...对于 left 来说，它需要左移父元素的总宽度，对于 right 来说，它需要左移自身宽度。 设置父容器的左右 padding，使内部内容向中间挤压，从而使左右留白。...3.1.3 缺点； 如果其中一列内容高度拉长，其他两列的背景并不会自动填充（后面介绍的等高布局可以解决这个问题） 3.2 双飞翼布局： 双飞翼布局在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。...假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。 代码示例： div id="wrapper"> div id="mainContent">...
content{:toc} 百度前端学院的第一次任务笔记，HTML、CSS 基础。主要有 CSS 工作原理，选择器的使用，常用属性，行高属性，盒模型与定位，最后根据设计图实现 4 个页面。...左侧固定右侧自适应宽度的两列布局 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 我的方法一： 不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置...用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 原题中参考资料 双飞翼布局 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 这个题我觉的直接将每一个块浮动起来就好了，不知我理解的对不对。...在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 最后一丝姐给了两个精益求精方案，我觉得方案一更易于理解，这里实践一下 下面是源码 html <!
正因如此，也给后面div+css的普及带来不少的阻力。 ?...以table为主架构的排版，可以放置各种控件 随着table的大量使用，更多的布局风格让table代码、结构臃肿的问题越来越突出；早在2000年，以div+css的排版方式已经开始进入开发者的视线；在现在看来...，div+css的引入又是web排版技术的一个新起点，这是第一次提到了流体排版的概念；这种排版技术提倡是：所有的元素都可以当成流的一部分，遵循默认的从左到右、从上到下排版，从而减少开发者一些不必要的排版计算...更为灵活的div+css排版 后面很长的一段时间里，开发者一直徘徊在多浏览器间的排版渲染差异上面，为寻找更多的hack办法而坚持不懈，我相信如果针对该类问题去总结一本书，那必定是很受欢迎的在当时。...）据说是开发者用的最常用的一种排版方式之一，它的思想跟流体排版有些相似：同行中遵循从左到右，行与行之间遵循从上到下；但是区别在于LinearLayout的每行都需要开发者指定，不能自动断行；相对来说应用场景就非常局限了
---- 段落排版–对齐 h1{ text-align:center; } 了不起的盖茨比 这是块状元素中的文本 ---- CSS盒模型 在讲解CSS布局之前，我们需要提前知道一些知识...div>我要变成内联元素div> 内联元素特点： 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变。...---- CSS布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。...布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。...布局模型 清楚了CSS 盒模型的基本概念、盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。
对，就是类似这样的布局~ image.png 目录 1 margin负值实现 2 祖父和亲爹的里应外合 3 换个思路 - li生个儿子帮大忙 4 借助absolute方位值，实现自适应的网格布局...---- 方法四、借助absolute方位值，实现自适应的网格布局 自适应？先来一波效果图： ? 原理 原理：absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。...每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列 3....设置每一行中单个元素的宽度： grid-template-columns，每个宽度值100px根据业务需要设置。 给三个设置了宽度就长这样了。 ? 3....原理 原理：其实他是table的css版本处理方式。原谅我只能想到加结构、模拟tr+td的方式实现了。
在CSS中实现 wrapper 目前我们已经了解了wrapper基础知识和优点，接下来我们来具体的看看在 CSS 如何使用它。 设置宽度 ? 实现wrapper第一件事就是要确认它的宽度。...这会让元素相对于包含块的边缘水平居中。 这里我使用margin:0 auto，这基本上将顶部和底部的margin重置为零，并使其左侧和右侧为auto。 使用此功能会有一些后果，这将在本文后面介绍。...通过使用固定的宽度值，我们可以轻松地避免此步骤。 对应于这种方案，我们可以将width: 90%与max-width：1170px属性结合在一起。...如果需要使用grid布局，则在多添加一层 div>专门用来 grid 布局会更容易也更清晰还容易维护。 div class="wrapper"> 的 Wrapper 在某些情况下，如果某个部分的背景视口宽度为100%，并且其中包含wrapper`，则可能会出现这种情况。 与上一个示例中介绍的类似。
元素 向旁边 紧贴 float元素(或者是 父元素的边) * float元素不影响 其他块级元素的位置 * float元素影响 其他块级元素 的内部文本 * (float元素)对父级元素的影响...float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...div2的宽度 这里面需要注意：div3要出现在 div1 和 div2 之后。...* 像文本一样 排列block元素 * 没有 清除浮动 等问题，简单易用 * 但是需要 处理间隙 多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
