它的规则如下： 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行 独占一行 从左向右 这是在不使用 样式的请况之下正常排列方式...倘若使用样式改变了某些元素的位置，那么就称为脱离文档流。也正是因为如此，才能有丰富的页面布局方式。否则大家都只是遵循上述两种方式，那就太枯燥单一了。...2 浮动布局 float属性，一般情况下元素默认是不浮动的，一旦添加该属性，元素就会向右或者向左浮动。看例子 <!...会发现几点变化： 三个盒子的块元素变为了行内元素的排列方式，按照浮动属性值自左向右 父元素的高度不在随他们变化，直接没有了高度，当然他们依然相对于父元素排列，只是没有将其撑开 这里也引入一个问题...为了解决普通元素与普通元素之间，普通元素与浮动元素之间产生的属性混乱问题 它的定义就是，Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。
number——设置元素的堆叠顺序。 inherit——规定应该从父元素继承 z-index 属性的值。 9、CSS3有哪些新特性？...11、用纯CSS创建一个三角形的原理是什么？ 采用的是均分原理,把矩形分为4等份,这4等份其实都是边框。...浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。...通常这个虚拟的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。 如果不显示地设置viewport，那么浏览器就会把width默认设置为980。
只所以说设计之初是视口，是因为在后来引入了 transform 之后，当元素设置了 transfrom 属性后，会创建一个包含块，并且这个包含块会影响固定定位的子孙元素。...下面我们来看看另一种，浮动模型。 浮动盒子可以向左或向右移动，直到其外边沿碰到包含块的外边沿，或者碰到另一个浮动盒子的外边缘。...如果包含块太窄无法容纳所有浮动元素水平排列，后面的元素会向下移动如下图左侧。如果浮动元素高度不同，后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧，如下图右侧。 ?...但是当某个块级元素本身也触发了块级上下文时，且挨着一个浮动元素时，它就会忽略边界必须接触包含块边界的规则。此时，这个元素会收缩到适当大小，紧跟在浮动元素之后。...3.3 其他布局模块 除了上面介绍的定位、浮动等，CSS 还有一些比较新的更加灵活稳健的 CSS 布局模块。如弹性盒子布局、网格布局、多栏布局、Region 后续章节会进行详细介绍。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： ?...一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素： 1.若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!...推荐使用 我们写项目的时候经常会用到这种方法，创建一个class写入清除浮动的样式，当我们有元素需要清除浮动的时候就在元素的class后面加上class。
对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block： div 是一个标准的块级元素。...一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。...元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。...你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。 *清除浮动(clearfix hack) img { float: right; } ?...，具体设置如下： viewport” content=”width=device-width,initial-scale=1.0” /> column布局 这里有一系列新的CSS
图片来源网络 伪元素 伪元素 用于创建不在文档树中的元素，并为其添加样式，比如说，我们可以通过：before来在一个元素前添加一些文本，并为这些文本添加样式。...calc() calc(): CSS3中新增的一个函数, 用于动态计算宽/高, 语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示 使用“+”、“-”、“*...利用伪元素：父级div定义 伪类:after，我们可以写一个.clearfix 工具样式，当需要清除浮动时，就为其加上这个类 .clearfix:after { display: block; clear...”babel“的存在，可以让我们使用比较新的js语法，postcss则可以理解为CSS的”babel“，可以让我们使用比较新的CSS语法 postcss 不是类似less的CSS预处理器， 而是一种允许用...元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应 左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行
sticky ：设置了sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed...表现出来的区别就是 block 独占一行，在浏览器中通常垂直布局，可以用 margin 来控制块级元素之间的间距（存在 margin 合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。...float: left; } #right { height: 100%; overflow: hidden; background-color: #eee; } 第二种方法，我利用的是创建一个新的...即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的 BFC。...rem 是 CSS3 新增的一个相对单位（root em，根em），这个单位与 em 区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
表的border box、块级可替换元素或者在标准流中创建了新的BFC的元素（比如 overflow 值非 visibile 的元素），它们不能与其同属一个BFC中的浮动元素的margin box重叠。...由于浮动的存在，浮动右侧的行盒缩短，但在浮动之后就恢复了它们“正常”宽度（即 p 元素创建的包含块的宽度）。该文档可能被格式化如下： ?...浮动的内容会像浮动创建了新的堆叠上下文 Stacking Context 一样堆叠起来，但定位元素、创建了新的堆叠上下文并参与了浮动的父级堆叠上下文的元素除外。...浮动定位：float属性 ? float 这个属性指定一个盒子是应该向左浮动，向右浮动还是不浮动。它可以被任何元素设置，但仅适用于生成非绝对定位盒的元素。...如果要实现行内元素清除浮动效果，不应当如上所讲的去设置空隙，而应当强制断行并有效插入一个或多个空行盒（或者如section 9.5所讲移动新行盒）来使要清除浮动的行内元素的行盒低于相应的浮动盒。
在大多数情况下，一个充分的解决办法是用类将文本包装在 中； 4、向辅助技术传递意义 使用颜色来增加意义只提供一个视觉指示，而不会传达给使用辅助技术的用户，例如屏幕阅读器。...在某些情况下，一个充分的解决办法是将元素的内容包装在 中并与class一起使用； 4、向辅助技术传递意义 与上下文的颜色一样，确保通过颜色传达的任何意义也是以一种非纯粹表象的格式传达的；...1、说明 通过添加一个类，可以将任意元素向左或向右浮动。!...1、说明 通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。..." href="#">跳转到主要内容 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户): <a class="sr-only sr-only-focusable
1. float 简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用 float 属性来设置于元素的浮动: 可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动...，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素...4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移...BFC(Block Formatting Context) 块级格式化(布局)环境 BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC， 开启BFC该元素会变成一个独立的布局区域， 元素开启...CSS中的一个隐含的属性，可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 - 元素开启BFC后的特点
浮动的特性 浮动的元素的对齐 浮动的元素排列位置 为什么要清除浮动 清除浮动本质 清除浮动的方法 使用after伪元素清除浮动 # CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。...在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{ float:属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动...浮动首先创建包含块的概念（包裹）,总是找理它最近的父级元素,但是不会超出内边距的范围。...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...总结: 浮动的目的就是为了让多个块级元素同一行上显示。 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。...另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的...将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行 左 的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。...2.触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文： 根元素() 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position
定位是什么 所谓定位，简单来说就是通过CSS样式属性设定HTML页面元素在运行时显示的位置。 定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。...理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。 将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。...文档流是HTML页面的底层结构，HTML页面创建的元素默认都在文档流中。 注意:如果在一行中不能容纳所有的元素，则会换到下一-行，继续自左向右排列。...设置为浮动后，该元素原来的位置会被下一个元素替代。...，为下一个兄弟元素设置为浮动，下一个兄弟元素不会超过上一个兄弟元素的位置 文本与浮动的元素 文本内容与浮动的元素之间，文本内容不会被浮动的元素所覆盖，而是环绕在浮动元素的周围 清除浮动 clear属性设置元素是否显示在其之前元素的下方
基础盒模型(CSS basic box model) 当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子...) 定位：正常流、浮动、绝对定位 文档树中当前盒子的子元素 或 兄弟元素 视口(viewport) 的尺寸 和位置 盒子内部图片的尺寸 其他某些外部因素 视觉格式化模型(visual formatting...行盒子 行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。...当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。...浮动也是如此（虽然有可能两个盒子的距离会因为 floats而变小），除非该盒子再创建一个新的BFC。 鱼头注：简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子啊(/ω＼)。
CSS：float浮动属性 作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。...浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。 特点：1....A：如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度坍塌为零。 解决“塌陷”的办法： step 1. 创建一个用来清除浮动的CSS样式类（.clearfix） step 2....设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 2.响应式布局（responsive） 针对越来越多的移动端设备，一个web设计能够兼容多个终端。...一种动态的类选择符，不是预先创建而是动态形成。当html元素具有不同的状态或特征时，伪类可以设定该元素不同状态或特征下的样式效果。
一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。...; color:blue; } before 和 after 多用于清除浮动。 7、选择器的优先级 7.1 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。...4.3 float 在CSS中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。...三种取值： left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 4.4 clear clear属性规定元素的哪一侧不允许其他浮动元素。
浮动布局 什么是浮动布局： 所谓 css 浮动就是浮动元素会脱离文档的普通流，根据 float 的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。...请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。...为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中 当一个元素设置了新的 BFC 后，就和这个元素外部的 BFC 没有关系了，这个元素只会去约束自己内部的子元素。...行框的宽度是由包含块和与其中的浮动来决定； IFC 中的行框一般左右边贴紧其包含块，但 float 元素会优先排列； IFC 中的行框高度由 CSS 行高计算规则来确定，同个 IFC 下的多个行框高度可能会不同...； 当 IFC 中盒子的总宽度少于包含它们的行框时，其水平渲染规则由 text-align 属性值来决定； 当一个行内元素超过父元素的宽度时，它会被分割成多个盒子，这些盒子分布在多个行框中。
浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个放在一行， 这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。...IFC指的是行级格式化上下文，它有这样的一些布局规则： （1）行级上下文内部的盒子会在水平方向，一个接一个地放置。 （2）当一行不够的时候会自动切换到下一行。...清除浮动的方式 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后， 不会影响块级元素的布局，只会影响内联元素布局。...在IE中，一个元素要么自己对自身的内容进 行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可 能的子孙元素进行尺寸计算和定位。...相关知识点： 如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定 默认情况下把viewport设为一个较宽的值，比如980px
你必须向左或者向右浮动元素，以便 shape-outside 产生效果。...img { float: ; shape-outside: ;} 注意：当有流动的内容围绕在形状的周围时，请注意不要让任何文本行变得太窄而只能容纳一两个单词。...给两个形状图像提供相同的尺寸后，我向左浮动一个图像，向右浮动另一个图像，这样我的运行文本就可以在它们之间流动： [src*="placeholder-left"],[src*="placeholder-right...右：使用 CSS Shapes 创建更独特的外观。 通过将我的内容限制在右侧浮动的曲线图像中，我可以轻松地为下一个设计添加独特的外观。...在印刊设计中经常看到内容在形状周围流动，在 CSS Shapes 之前，这在 web 上是不可能实现的。 即使 CSS Grid 只涉及到列和行的设置，也没有理由不使用它来创建动态对角线。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
