1、浮动 1、浮动引发的特殊效果 1、元素一旦浮动起来之后，都将变为块级元素 2、元素一旦浮动起来之后，宽度在不设定的情况下，将以内容为准 3、当父元素中显示不下所有的已浮动子元素的话...清除前面元素右浮动所带来的影响 4、both 清除前面元素任何一种浮动效果所带来的影响 3、浮动元素对父元素的高度影响...弊端：不是再任何时候父元素都要跟着浮动，而且会对后续元素会带来位置的影响 3、为父元素设置overflow属性，取值为 auto 或 hidden 弊端：有要溢出显示的内容...1、none 让生成的元素不显示 - 隐藏 特点：让元素脱离文档流 - 不占据页面空间 2...-不占据页面空间 2、绝对定位的元素会相对于离他最近的，已定位的，祖先元素 去实现位置的初始化 3、如果元素没有最近的祖先元素的话，那么就相对于最初的包含框
注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。...display:none 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。...不会触发其点击事件 visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。...和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、...(宽度由内容决定) 3、元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大 块级元素：允许修改尺寸 行内元素：不允许修改尺寸 4、文本，行内元素，行内块元素时采用环绕的方式来排列的...由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...疑问 为什么会margin边距重叠？...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？
为什么呢？ 18、margin和padding分别适合什么场景使用？ 19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？...38、为什么css放在顶部而js写在后面？ 39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？...这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。...浮动为该元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。
block 设置元素为块级元素，块级元素可以独占⼀⾏，可设宽⾼，默认宽为父元素宽。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...与 visibility 的对比 区别 display: none visibility: hidden 空间占据性 不占据空间 占据原空间 在渲染树中 不渲染元素 渲染元素，只是不可见 重排与重绘...标准盒模型和 IE盒模型的区别在于设置 width 和 height 时，所对应的范围不同： 标准盒模型的 width 和 height 属性的范围只包含了 content内容区 IE盒模型的 width...ellipsis; /*超出范围的文本内容用省略号显示*/ display: -webkit-box; /*对象作为弹性盒子模型显示*/ -webkit-line-clamp: 2; /*来限制一个块元素显示文本的行数...（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。 （6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。
，等同于:nth-of-type(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素...默认宽度为内容宽度，不可设置宽高，同行显示 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示 list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示...opacity: 0：将元素透明度设为 0，看上去隐藏，但是占据空间且可以交互 visibility: hidden：占据空间，但是不能进行交互 overflow: hidden：隐藏元素溢出的部分，占据空间且不可交互...display: none：彻底隐藏元素，元素从文档流中消失，既不占据空间也不能交互，也不影响布局 z-index: -9999：将层级放到底部，被覆盖，看起来隐藏 transform: scale(...translate 改变位置时，元素依然会占据原始空间，绝对定位不会发生这种情况。 # 如果需要手动写动画，最小时间间隔是多久，为什么？
但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性 em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为...参考回答： 结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见...，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成...visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少 7....为了消除它们之间的歧义，我们将其归为三大类： 完全隐藏：元素从渲染树中消失，不占据空间。 视觉上的隐藏：屏幕中不可见，占据空间。 语义上的隐藏：读屏软件不可读，但正常占据空。
这使得 自然流动的内容 会包裹浮起来的元素。...这个概念类似于：你每天在印刷媒体上所看到的内容(图片或其它图像元素 对齐于左边或者右边，其它的内容 通常是一些文本 会环绕在 左对齐或右对齐的 图片元素 周围)。如下图所示: ?...如果浮动元素的尺寸超过了 可利用的水平空间，浮动元素会移动到下一行。...non-positioned non-floated的块元素 默认 浮动元素不占据空间，因为浮动元素 相对于其它块元素 是脱离文档流的。 浮动元素的外边距 不会和相邻元素的外边距 合并。...所以对非浮动元素 使用clear，去强制浮动元素占据它们本来的空间。
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element空间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算...并且 偏移 不会改变元素自身在文档流中 占据的空间(也就是说，其后的元素的位置 仍是依照 元素进行偏移之前的位置 进行排布)。设置relative 不会使元素 脱离文档流。...元素 向旁边 紧贴 float元素(或者是 父元素的边) * float元素不影响 其他块级元素的位置 * float元素影响 其他块级元素 的内部文本 * (float元素)对父级元素的影响...* float元素 会从父级元素的空间中 消失 * 父级元素 可能会 高度坍陷 解决思路： 1. float元素 进行设置float时，float...如何清除浮动，为什么清除浮动 这是因为 float元素 不会占据父元素的布局空间，有可能 float元素 就会超出 父元素，从而对其它的元素 造成影响。
为父元素增加边框(透明的)，弊端：父元素会变高 b. 可以为父元素设置上内边距来取代子元素上外边距，弊端：父元素高度会变高 c....会排除在文档流之外即"脱离文档流"，不再占据页面空间，后续元素则上前补位 ②. 浮动元素只在当前行内浮动 ③. 浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上 ④....直接设置父元素高度， 弊端:必须知道父元素的高度 (2). 让父元素也浮动 弊端:对后续元素会产生影响 (3)....绝对定位的元素会脱离文档流即不占据页面空间 ②. 绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位 ③....父子元素中，永远都是子压在父上，是不受 z-index 影响的 49. display 显示方式 语法:display:value (1). none 将指定的元素不显示 并且不占据页面空间(脱离文档流
块级元素（Block-level Elements） 块级元素是指那些会在新的一行开始显示的元素。这些元素通常会占据父容器的整个宽度，直到遇到下一个块级元素或容器的边缘。...每个 div 元素都占据了父容器的整个宽度，除非有其他元素阻止其占据更多空间。...行内元素（Inline Elements） 行内元素是在同一行中排列的元素，它们只占据其内容的宽度，不会强制换行。...它们的宽度和高度通常由内容决定。 行内换行： 当行内元素的总宽度超出父容器的宽度时，会自动换行。 三、实际应用中的常规流布局 在实际应用中，常规流布局经常用于创建简单的页面布局，如文章段落、列表等。...四、常规流布局中的常见问题 在使用常规流布局时，我们可能会遇到一些常见的问题，包括： 元素溢出： 当元素的内容超出其父容器的宽度时，内容会自动换行或溢出。
宽度越窄，相应的需要容纳 相同内容所需要的空间越大，高度越高。...可以理解 内容区只是文本的高度，但是最终占用空间的高度并不是内容区，而是行内框（in-line box），行内框的高度由line-height来设置，具体的算法是 height(in-line...而行内元素的每一行都有一个行框，该行框的高度值来源于这一行中最高的行框上边框与最低行框的下边框的差值。行框的高度是该行文本元素最终占有的高度。 ...但是我们是要知道的，我们看到的span高度只是span的内容区高度，并不是行框或者行内框的高度。但在p标签内，span元素确实占据了20px的高度。...替换行内元素可以设置所有的7个垂直属性，但也有 line-height属性，只不过此时的line-height属性并不会对行框高度有作用，替换行内元素的行高由该元素的垂直属性所确定，比如一个元素 <img
若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找父节点直到找到根元素或者满足条件的匹配规则，则结束这个分支的遍历。...Flex 布局教程：语法篇[5] 、Flex 布局教程：实例篇[6] 6. display: none和 visibility:hidden的区别 是否占据空间 display: none 不占据空间...visibility:hidden 占据空间 是否渲染 display:none，会触发reflow（回流），进行渲染。...清除浮动常用的四种方式： 父级div定义height 额外标签法：在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。...中结构的顺序 缺点：有顶部对齐问题，需要进行调整，注意中间的高度为整个内容的高度 float实现: 需要将中间的内容放在html结构的最后,否则右侧会沉在中间内容的下侧 原理: 元素浮动后,脱离文档流,
内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。...css的属性非常有意思，正常流下，如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间...下面代码设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度： 我有空 格，我该死.........元素隐藏方法总结： 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问：display: none； 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用：visibility: hidden...如果希望元素不可见、可以点击、占据空间，可以使用：opacity: 0； 如果希望元素不可见、可以点击、不占据空间，可以使用：opacity: 0; position: abolute;； 如果希望元素不可见
可按照隐藏元素「是否占据空间」分为「两大类」(6 + 3) 元素不可见，不占空间(3absolute+1relative+1script+1display) display:none...，占据空间 visibility:hidden 其他特点：不能点击，辅助设备无法访问 visibility 的继承性 父元素设置visibility:hidden，子元素也看不见 但是，如果子元素设置了...flex-grow flex-grow属性定义项目的「放大比例」，「默认为0，即如果存在剩余空间，也不放大」。 如果所有项目的flex-grow属性都为1，则它们将「等分剩余空间」（如果有的话）。...flex-basis属性 flex-basis属性定义了在「分配多余空间之前」，项目占据的主轴空间main size。浏览器根据这个属性，计算主轴是否有多余空间。...添加或删除「可见的DOM元素」 元素的「位置」发生变化 元素的「尺寸」发生变化（包括外边距、内边框、边框大小、高度和宽度等） 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代 页面一开始渲染的时候
Powered by Wolf 样式内容是....chatArea 类使用了 display: flex; 属性，将其子元素沿着水平方向排列。其子元素包括了一个文本域、一个加号图标和一个发送按钮图标。...文本域使用了 flex: 1; 属性，使其占据父元素剩余所有的空间，这样文本域就会填满整个父元素，而加号和发送按钮图标则只占用它们自己的空间。...整个聊天区域的父元素是.chatBottom，而.chatCopyright 是.chatBottom的兄弟元素,因此它们不受 flex 布局的影响。...总体上来看，这段代码中使用了 flex 布局来让文本域占据整个聊天区域，而加号和发送按钮图标则放置在文本域的两侧。
页面中所有的元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。 如下图所示： ? 盒模型示意图 内容区是元素内包含的内容所在区域。...3.2.1.1 相对定位 相对定位是将position属性的值设为relative，这时元素还会在文档流中占据原有的位置。...无论是否位移，相对定位的元素仍然会在原始文档流中占据初始的空间。因此，平移后会遮挡其他元素。...浮动盒子也会脱离常规文档流，所以常规流中的其他块级盒子几乎会当浮动盒子不存在。 之所以说“几乎”，是因为浮动元素会影响其后常规文档流中块级盒子的文本内容。...文本内容会记住浮动元素的大小，并在排布时避开它，形成文字包围的效果，如下图。 ? 浮动-文字环绕 浮动就是为了在网页上实现文本环绕图片的效果而引入的一种布局模型。
：1 继承：0 把所有的权重相加，但是永不进位 六、元素的显示模式 1，块级元素 display：block 会独自占据一整行，可以设置有效的宽高，子元素默认和父元素一样宽，代表div，...，该元素虽然被隐藏了，但仍然会影响布局 display：none隐藏的某个元素不会占据空间，不会影响布局 七、font相关属性 font-style:值 控制字体是否斜体 可选值：normal 正常...，会呈现在元素框之外，hidden 内容会被修剪，并且溢出的内容是不可见的，scroll 内容会被修剪，但是浏览器会显示滚动条以便查看溢出的内容，auto 如果内容被修剪，则浏览器会显示滚动条以便查看溢出的内容...，在这种情况下，虽然原来的位置没有了内容，但依然占据位置，即占据文档流空间 ?...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的
参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。visibility属性有个collapse属性值？...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...flex-basis： 定义在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据此属性计算主轴是否有多余空间，默认值为auto，即 项目原本大小；设置后项目将占据固定空间。...flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。...box的宽度等于父元素的contentbox的宽度width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间有一个高度自适应的
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 ...元素放置在父元素的基线上 sub 垂直对齐文本的下标。...super 垂直对齐文本的上 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部...请使用 "display" 属性来创建不占据页面空间的不可见元素。 这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。...元素是可见的。 hidden 元素是不可见的 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
