盒模型与浮动

素颜马尾好姑娘i 2022-05-22 06:11 173阅读 0赞

1.外边距有一个特别的行为被称作外边距塌陷（margincollapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。

2.对行内盒设置宽高无效。

3.如果盒子的高度被设置为百分比长度，那么盒子高度不会遵循这个设置了的百分比长度，而是总会采用盒子内容的高度，除非给它设置了一个绝对高度（例如，像素或者 em）。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。

4.边界（border）也会忽略百分比宽度设置。

5.盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

6.用更灵活的方式控制内容盒的大小，是通过设置大小约束，而不是设置一个绝对大小。这是通过属性 min-width、max-width、min-height 和 max-height 实现的。

7.IE标准盒模型：元素的width和height属性同时包含内容content，内边距padding和边框border部分，即：width =content + padding + border。

8.块级元素默认设置为 display:block; ，行内元素默认设置为 display: inline; 。

9.浮动通常用来创建整个网站布局，其中包括浮动的多列信息，因此它们彼此并排放置（默认行为是列彼此之间互相堆叠，按照它们在源中出现的顺序）。浮动的元素存在于正常的文档布局流之外。

10.所有列使用宽度百分比，创建流式布局（liquidlayout），一种调整为不同的屏幕尺寸，并在较小的屏幕尺寸下保持相同的列宽度比例。

11.固定宽度布局（fixed-widthlayout）——如果您现在调整浏览器大小，您将看到布局不再调整以适应视图宽度，在尺寸更小时您将需要滚动来查看它的全部。

12.清除浮动：clear:both最常用。

13.box-sizing更改盒模型。

14.非浮动元素的外边距不能用于它们和浮动元素之间来创建空间。

15.如果您没有一个可用的元素来清除您的浮动(比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的。

16.闭合浮动的方法：

l  添加额外标签  <divstyle="clear:both;"></div> 会添加多少无意义的空标签，有违结构与表现的分离，建议不要用

l  使用br标签和其自身的html属性  <br clear="all" />  不建议使用

l  父元素设置overflow：hidden<div class="warp" id="float3"style="overflow:hidden; \*zoom:1;"> 不存在结构和语义化问题，代码量极少

l  父元素设置overflow：auto 属性

l  父元素也设置浮动

l  父元素设置display:table

l  使用:after 伪元素

17.“响应式设计（ResponsiveDesign）”是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。媒体查询是做此事所需的最强大的工具。

18.百度的HTML规范（节选）

l  \[强制\] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。

l  \[建议\] 每行不得超过 120 个字符。

l  \[强制\] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

l  \[建议\] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。

l  \[强制\] 禁止为了 hook 脚本，创建无样式信息的 class。使用 id、属性选择作为 hook 是更好的方式。

l  \[强制\] 同一页面，应避免使用相同的 name 与 id。一个比较好的实践是，为 id 和 name 使用不同的命名法。

l  \[强制\] 对于无需自闭合的标签，不允许自闭合。

l  \[强制\] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

l  \[建议\] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

l  \[强制\] 引入 CSS 时必须指明 rel="stylesheet"。

l  \[建议\] JavaScript 应当放在页面末尾，或采用异步加载。

l  \[强制\] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。src 取值为空，会导致部分浏览器重新加载一次当前页面。

l  \[建议\] 添加 width 和 height 属性，以避免页面抖动。

l  \[建议\] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

l  \[建议\] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。

19.百度的CSS规范（节选）

l  \[强制\] 选择器与 \{ 之间必须包含空格。

l  \[强制\] 属性名与之后的 : 之间不允许包含空格， : 与属性值 之间必须包含空格。

l  \[建议\] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

20.BFC：BFC(block formattingcontext)：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。

21.形成 BFC 的条件

l  浮动元素，float 除 none 以外的值；

l  绝对定位元素，position（absolute，fixed）；

l  display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

l  overflow 除了 visible 以外的值（hidden，auto，scroll）

22.BFC常见作用

l  \*包含浮动元素

l  \*不被浮动元素覆盖

l  \*阻止外边距折叠

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关盒模型与BFC

盒模型与BFC 1. 什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边

谁借莪１个温暖的怀抱￠/ 2022年12月25日 12:51/ 0 赞/ 141 阅读

相关盒模型与BFC

1. 什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外

灰太狼/ 2022年12月01日 11:53/ 0 赞/ 153 阅读

相关与标准盒模型和IE盒模型优点？

1、标准盒模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，和实际内容。 Margin(外边距) - 清除边框外的区域，外边距是透明

Dear 丶/ 2022年11月01日 15:55/ 0 赞/ 182 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 459 阅读

相关盒模型与浮动

1.外边距有一个特别的行为被称作外边距塌陷（margincollapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。 2.对行内盒设置宽

素颜马尾好姑娘i/ 2022年05月22日 06:11/ 0 赞/ 174 阅读

相关 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 295 阅读

相关前端基础学习笔记浮动清除浮动怪异盒模型

文档流文档流为元素没有改变特性时原本所要排列的位置和规则：文档流为最底层块级独占一行等在最底层排列，依次往下排列。给上浮动之后，会把元素堆积起来，不占

本是古典何须时尚/ 2022年04月16日 05:43/ 0 赞/ 207 阅读

相关盒模型

盒模型定义: 由内而外 content padding border margin 盒模型分两种 1.标准和盒模型标准盒模型就是w3c盒模型 width= cont

r囧r小猫/ 2022年04月10日 02:54/ 0 赞/ 241 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 440 阅读

相关盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（...

小鱼儿/ 2021年05月03日 16:18/ 0 赞/ 554 阅读