CSS

YINXAOH
657 阅读24分钟

1. 清除浮动

  • 浮动元素可以向左或向右移动，直到碰到另一个浮动元素。浮动框脱离普通文档流，浮动在文档流之上
  • 浮动是元素脱离文档流，没有了独占属性，它后面的元素对象视它不存在。
  • CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
  • 部分无视和完全无视的区别:使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本或内联元素依然会为这个元素让出位置，环绕在周围(部分无视)。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(完全无视)
  • 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上；
    块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
  • 浮动元素对前面后面的影响：浮动元素前面是行内时，它会挤到行内前面，无视行内元素。前面是块级时，另起一行浮动。 浮动后面是行内时，无影响。后面是块级时，块级会无视浮动元素，但是块级的内容会被浮动元素挤到后面，一行放不下时会被挤到浮动下面。
  • 只有内层元素和外层元素都设置浮动，才会脱离文档流，只设置内层浮动不会脱离
  • 如果外层元素不设置宽高和浮动，内层元素设置浮动，会导致内层元素撑不开外层元素。但是内层元素可以撑开其爷爷元素...
  • 为什么清除？
    • 浮动元素影响后续元素布局
    • 浮动元素的高度高度超过了父元素容器但撑不起父元素容器高度，父容器高度塌陷
    • 浮动元素影响了父元素容器中的其他兄弟元素的排版
  • clear: 在需要清除浮动的元素的容器中中添加样式（clear: both / left / right）。也可以在浮动元素后面添加空白标签并加入clear属性。值表示哪一边不允许有浮动元素。如果浮动元素在非浮动元素后面，不能解决父容器高度塌陷的问题
  • overflow: hidden: 给父容器添加这个属性，触发BFC。其实上没有清除任何浮动，但是浮动已经不会影响后续元素的布局。可以解决父容器高度塌陷的问题。overflow设置为除visible之外的任何值也都可以达到这个目的，但是其他值可能会带来副作用。
  • 给浮动元素的父容器也添加浮动属性，能撑起父容器高度，但会影响后面元素布局，不推荐使用
  • 给浮动元素的父容器设置高度，能撑起父容器高度
  • 使用 :after 伪元素： 为浮动元素容器或其父容器添加一个类clearfix，为这个class添加:after伪元素 。为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。即添加一个不可见的块元素在父元素后面（不是父标签，该块元素仍在父标签中），原理和加入空元素类似。是主流方法，推荐使用 
      .clearfix:after{
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
    }
    .clearfix {
       zoom: 1; 
    }

2. flex布局

  • 弹性布局。任何一个容器都可以指定，行内元素也可以。display: flex;(Webkit 内核的浏览器，必须加上-webkit前缀)
  • 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
  • 主轴（main axis）、交叉轴（cross axis）、主轴的开始位置main start，结束位置main end；交叉轴的开始位置cross start，结束位置cross end、单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
  • 容器属性：
    • flex-direction: 主轴方向 （row左到右 / row-reverse右到左 / column上到下 / column-reverse下到上）
    • flex-wrap: 默认项目在一条线上，若放不开，怎么排列（nowrap不换行 / warp换行，第一行在上 / wrap-reverse换行，第一行在下）
    • justify-content: 主轴对齐方式（flex-start左对齐 / flex-end右对齐 / center居中 / space-between两端对齐，项目之间的间隔都相等 / space-around每个项目两侧的间隔相等）
    • align-items：交叉轴对齐方式（stretch占满整个容器的高度 / flex-start交叉轴的起点对齐 / flex-end交叉轴的终点对齐 /center交叉轴的中点对齐 / baseline项目的第一行文字的基线对齐）
    • align-content：多根轴线对齐方式
  • 项目属性
    • order 排列顺序。越小越靠前，默认0
    • flex-grow：放大比例。默认0
    • flex-shrink：缩小比例，默认1。空间不足时等比例缩放
    • align-self：为单个项目设置不同的对齐方式，可以覆盖 align-items

3. css3新特性

  • 新增了与动画相关的特性：Transition,Transform和Animation
    • Transition：在当元素从一种样式变换为另一种样式时为元素添加效果。transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始。
    • Transform：向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作
    • Animation：实现动画效果。类似帧一样声明动画，然后在animation属性中调用关键帧声明的动画。
  • 新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。
  • 新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

4. CSS的盒子模型

  • 盒子模型： 内容(content)、填充(padding)、边界(margin)、边框(border)
  • 有两种。标准W3C盒子模型、低版本IE盒子模型
  • 区别：
    • IE: width = 内容的宽度+border+padding
    • W3C: width = 内容的宽度
  • 盒子的大小不包括margin，margin只占据位置

5. 元素水平居中

  • 行内元素（a/img/input/span）或文本居中： 为父元素设置 text-align:center
  • 定宽块级元素居中：左右 margin 设置为 auto
  • 不定宽块元素居中：
    • 加入 table 标签，然后设置 table 的左右 margin 为 auto（不推荐，增加了无语义的html标签）
    • 设置dispaly: inline,变为行内元素后，再设置 text-align:center
    • 父元素有宽度，设置 float，然后给父元素设置 position:relative和left:50%，子元素设置position:relative 和 left:-50%来实现水平居中。
    • 使用css3新增的transform属性：给子元素设置left:50%``````transform:translate(-50%,0)

6. 元素垂直居中

  • 父元素高度确定单行文本元素居中：line-height = 父元素高度
  • 父元素高度确定的多行文本：设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
  • 父元素和子元素高度都不定：设置父元素position:relative;,子元素设置position: absolute;top: 50%;transform: translateY(-50%);
  • 宽高都固定的图片居中：父元素设置position: relative;,图片设置position: absolute;top: 50%;margin: -50px 0 0 0;

7. display:none 和 visibility: hidden的区别

  • display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间。是非继承属性，子节点的消失是由于元素从渲染树中消失造成，无法通过修改字节点的属性让其显示。修改常规流中元素的display属性会造成文档重排(Reflow)。读屏器不会读取display为none的元素内容
  • visibility: hidden:不会让元素从渲染树中消失，元素依然占据空间，只是内容不可见。是继承属性，子节点消失时由于继承了hidden，通过设置visibility:visible让子节点显示。修改visibility只会造成元素的重绘(Repaint)。读屏器会读取visibility: hidden的元素内容

8. 有继承性的属性

  • 字体系列 font
  • 文本系列 text （文本color可以继承，但<a>中的color不能继承）
  • 元素可见性 visibility
  • 光标属性 cursor

9. transition和animation的区别

  • transition: property duration timing-function delay;\
    • transition-property: 指定要产生动画的元素
    • transition-duration：动画持续时间
    • transition-timing-function：动画状态变化曲线。（ease-in：加速；ease-out：减速）
    • transition-delay： 动画开始时间，即需要推迟多久后才执行\
    • 需要事件触发，不能在网页加载时自动发生
    • 是一次性的，不能重复发生，除非再次触发
    • 只能定义开始和结束两种状态
    • 一个transition只能定义一个属性的变化
  • animation：name duration timing-function delay iteration-count direction fill-mode play-state;
    • animation-name：要绑定的关键帧的名称
    • animation-iteration-count：动画的播放次数
    • animation-direction：是否轮流反向播放
    • animation-fill-mode：当动画完成播放时，应用到元素上的样式
    • keyframes关键字用来定义动画的各个状态
    • animation不需要触发任何事件的情况下才会随时间改变属性值。
    • 可以设置多个状态
    • IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

10. 优先级

  • 同一元素同一种选择器中优先级如下：内联样式 > 内部样式 > 外部样式 （若外部样式放在内部样式后面，则外部将覆盖内部样式）
  • 同一标签，每个选择器都有一个权值，权值越大优先（权值不能进位，即11个类选择器也比不过一个id选择器）
    • 内联样式：1000
    • id选择器： 100
    • class选择器，属性选择器，伪类选择器： 10
    • 元素标签选择器，伪元素选择器： 1
  • 先从高等级进行比较，高等级相同时，再比较低等级的，以此类推
  • 权值相等时，就近原则，以最后出现的样式为准
  • 继承的样式优先级低于后来指定的样式
  • 同一属性后面有 !important 的优先级最高.但是宽高有例外情况，由于宽高会被max-width/min-width覆盖，所以!important会失效。
  • 创作者的规则高于浏览者，即网页编写者设计的样式优先级高于网页浏览器的默认样式

11. CSS Sprite(CSS 精灵), 雪碧图

  • 将多个小图片拼接到一个图片中，然后通过 background-position 和元素宽高来调节要显示的图片
  • 优点：
    • 减少 http 请求的系数，提高页面的加载速度
    • 提高压缩比，减小图片大小
    • 更换风格方便，只需要在一张或几张上修改样式风格即可
  • 缺点：
    • 图片合并麻烦
    • 维护麻烦，修改一个图片可能需要从新布局整个图片和样式

12. 脱离文档流

  • float
  • position: absolute
  • position: fixed

13. CSS单位

  • px：像素，绝对单位
  • em：相对于父元素的字体大小
  • rem：相对于根元素的字体大小
  • vw、vh：视窗宽度、视窗高度。1vw=视窗宽度的1%
  • vmin、vmax：vw、vh中较小/大的那个
  • ex：当前字体的x的高度或者一个em的一半

14. Reflow和Repaint

  • Reflow: 回流（重排）。浏览器为了重新渲染部分或全部文档而重新计算文档中元素的位置和几何构造的过程。一般页面布局或者几何属性改变时需要reflow。（至少在页面加载时有一次）。回流时，浏览器会将Render Tree中受影响的节点失效，再重新构建Render Tree
  • Repaint: 重绘。页面中的元素只需要更新样式风格而不影响布局
  • 触发：
    • Reflow: 改变盒模型相关的属性(width, height, margin, border, display等)；定位属性或浮动相关的属性(position, float, top等)；内部文字结构(text-align, overflow, font-size, line-height, vertival-align)等；调整窗口大小；样式表变动；元素内容变化，尤其是输入控件；dom操作；css伪类激活
    • Repaint: 应用新的样式或修改影响元素外观的属性(color, background-color等)；visibility: hidden；拖动滚动条等
  • 浏览器为了避免每次做一次DOM布局的改变就引起一次reflow从而造成巨大的资源消耗，使用一个队列来延迟执行。浏览器会把那些可能引起reflow、repaint的操作加入队列中，等队列中有一定的元素数量或者到了某一时间间隔后，就flush队列，从而使得多次的reflow/repaint成为一次reflow/repaint。但是，有时候我们需要获取一些信息的时候，浏览器不得不进行flush，以确保我们获得的是准确的值，如获取以下值的时候：offsetTop、offsetLeft、offsetWidth、offetHeight/scrollTop、scrollLeft、scrollWidth、scrollHeight/clientTop、clientLeft、clientWidth、clientHeight/width、height/调用getComputedStyle()或者IE的currentStyle
  • 避免:
    • 直接更改classname或cssText，一次性修改多个属性值
    • 将要操作的元素进行离线处理，修改完之后一起更新
      • 使用DocumentFragment进行缓存操作，修改完后一起添加到文档中。引发一次reflow和repaint
      • display: none。使节点从渲染树中消失，修改完之后再显示。引发两次reflow和repaint
      • 使用cloneNode(true or false) 和 replaceChild 技术。clone一个节点到内存中，全部修改完之后再与在线的交换。引发一次回流和重绘
    • 减少会flush缓存队列属性的访问系数。如果一定要访问，使用缓存
    • 不要把DOM节点的属性值放在一个循环里做循环变量
    • 尽可能修改层级比较低的DOM节点
    • 使节点从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素。如为动画的 HTML 元件使用 fixed 或 absoult 的 position

15. BFC（块级格式化内容）

  • 触发：
    • float的值不能为none
    • overflow的值不能为visible
    • display的值为table-cell, table-caption, inline-block中的任何一个
    • position的值不为relative和static
  • 约束规则：
    • 内部的Box会在垂直方向上一个接一个的放置
    • 垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)
    • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
    • BFC的区域不会与float的元素区域重叠
    • 计算BFC的高度时，浮动子元素也参与计算
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
    • BFC中的浮动元素还是会按照原有的规则排列

16. 什么是FOUC? 为什么出现? 如何避免?

  • Flash of Unstyled Content:页面加载解析时，页面先用默认样式或者默认样式层叠部分已加载的样式渲染。页面加载解析完成时，突然以默认样式叠加全部页面样式渲染，造成页面样式闪烁
  • 页面渲染过程
    • 边下载html边构建DOM树
    • 浏览器以默认样式构建CSSOM Tree
    • DOM Tree + CSSOM Tree = Render Tree，页面渲染
    • 解析到内联或者内置样式时，刷新CSSOM Tree，CSSOM Tree或DOM Tree发生变化时会引起Render Tree变化
    • 解析到外部样式时，先加载再解析。由于下载存在掩饰等不确定性，所以容易造成页面闪烁
  • 避免： 将外部样式引入放到<head>中，在body渲染前先构建好CSSOM Tree

17. display的值及其作用

  • block
  • inline
  • inline-block
  • list-item: 元素作为列表显示
  • table: 元素作为块级表格显示
  • inline-table: 元素作为行内表格显示
  • inherit: 继承父元素的display值

18. positon的值及其作用

  • static: 默认值。没有定位，元素出现在标准文档流中
  • absolute: 绝对定位。不为元素预留空间，脱离文档流。相对最近的非static定位的父元素进行定位。
  • relative: 相对定位。相对于其正常位置进行定位。原先的正常位置仍然保留
  • fixed: 不为元素预留空间，脱离文档流。相对于浏览器窗口进行定位，滚动屏幕时在屏幕中位置不变。
  • sticky: 粘性定位。超出阈值前，它的行为就像 position:relative; 而当页面滚动超出阈值时，它的表现就像 position:fixed;，它会固定在目标位置。

19. overflow: hidden 作用

  • 对超出尺寸进行裁切，也就是隐藏溢出
  • 触发BFC。清除浮动。
    • 浮动的元素会脱离文档流，高度塌陷，同时父元素如果没有主动设置高度，因无法检测到浮动元素的高度，也会塌陷，高度为0
    • 元素浮动对排版的影响：导致浮动元素后面的元素向前补位，这个后面的元素分为两方面：第一个是子元素同级的后面元素(子元素高度塌陷影响)，第二个是浮动元素父元素后面的同级元素(父元素高度塌陷影响)。
    • 清除浮动，指的是让父元素可以检测到浮动元素的高度，从而撑起父元素(解决高度塌陷)，父元素有了自己的高度，从而避免父元素后面的元素向前补位；清除浮动，解决的是对父元素后面同级元素排版的影响，而子元素后面同级元素排版依然向前补位。
  • 解除外边距坍塌。父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷（只针对第一个孩子）

20. css hack

  • 由于不同厂商的流览器或某浏览器的不同版本，对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式。叫做成css hack。如下方法：
  • CSS 属性前缀法（即类内部 Hack）
    • IE6 能识别下划线" _ "和星号" * "
    • IE7 能识别星号" * "，但不能识别下划线" _ "
    • IE6~IE10 都识别" \9 "
    • firefox 前述三个都不能识别。
  • 选择器前缀法（即选择器 Hack）
    • IE6 能识别 *html .class{}
    • IE7 能识别 *+html .class{}
  • IE条件注释法（即 HTML 头部引用 if IE Hack）

21. css优化

  • 将首屏重要的css设置为内联
  • 首屏关键css渲染完成后，剩余的css样式可以使用js动态创建 link 元素 插入到DOM中
  • 对css文件进行压缩。webpack等软件支持
  • 去除无用css。比如重复的代码，或者没有生效的css
  • 减少使用昂贵的属性，即那些需要浏览器进行操作和计算的属性，如box-shadow、border-radius
  • 减少回流和重绘
  • 尽量不要使用 @import。因为这种样式会在页面被加载完才加载。并且多个 @import 会导致下载顺序紊乱

22. 伪类 伪元素

  • 用来修饰不在文档树中的部分
  • 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
    link / visited / hover / active / fist-child
  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。
    first-line / first-letter / before / after
  • CSS3 规范中的要求使用双冒号 (::) 表示伪元素，但依然支持单冒号

23. margin

  • 相邻两个元素的垂直外边距会重叠。值为两个元素中较大的一个。
  • 如果父元素没有设置 border-top 或 padding-top ，父元素的第一个元素设置的外边距会和父元素的重叠，值为父元素的margin值。解决方法：给父元素设置border-top或padding-top; 或把元素放到bfc中；或给父元素设置高度
  • 空元素的上下margin也会合并
  • 行内元素也可以设置margin，但是垂直方向的margin对其不起作用
  • margin为负值时
    • margin-left：元素没有设置width时，左边增加宽度，值为margin值。元素有宽度时，产生向左的位移，位移大小为为margin值
    • margin-right：元素没有设置width时，右边增加宽度，值为margin值。没有设置width时，相当于把后面的元素向自身拉， 大小为margin值。
    • margin-top： 不会增加高度，只会产生向上位移
    • margin-bottom： 不会产生位移，会减少自身的供css读取的高度
  • 在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。
    • top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；
    • left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。
    • right 以元素本身的 border 右边为参考线水平向右位移；
    • bottom 以元素本身的border 下边为参考线垂直向下位移。
    • 上面的位移方向是指 margin 数值为正值时候的情形，如果是负值则位移方向相反。
  • margin: auto能在块级元素设定宽高之后自动填充剩余宽高。margin: auto自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性，显然默认情况下块级元素的高度是不具备这个条件的。auto的特性是，如果两侧都是auto，则两侧均分剩余宽度；如果一侧margin是固定的，另一侧是auto，则这一侧auto为剩余宽度。

24. padding

  • padding不可为负值，但是可以为百分比值。为百分比时水平和垂直方向的padding都是相对于父级元素宽度计算的（同margin）。将一个div设为padding: 100%(或>=50%)就能得到一个正方形，padding: 10% 50%可以得到一个宽高比 5:1 的矩形。

25. border

  • 画三角形。content的宽高设为0，把三边的边框颜色设置为透明
div{
  float: left;
  margin: 20px;
}
div:nth-child(1){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue red orange green;
}
div:nth-child(2){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(3){
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(4){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue transparent transparent transparent;
}
div:nth-child(5){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue red transparent transparent;
}

26. background-clip

  • border-box 默认值。背景绘制在边框方框内（包括边框）。
  • padding-box 背景绘制在padding方框内（包括padding）。
  • content-box 背景绘制在内容方框内（包括content）。
/*三道杠*/
.icon1 {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 10px;
  padding: 2px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: currentColor; /*注意如果此处背景颜色属性用缩写的话，需要放到其他背景属性的前面，否则会覆盖前面的属性值（此处为background-clip）为默认值*/
  background-clip: content-box;
}
/*双层圆点*/
.icon2 {
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

27. font-size

像素： 画面中最小的点（单位色块）。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。

屏幕分辨率： 屏幕分辨率是1024×768，也就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点。像素的大小是没有固定长度的，不同设备上一个单位像素色块的大小是不一样的。尺寸面积大小相同的两块屏幕，分辨率大小可以是不一样的，分辨率高的屏幕上面像素点（色块）就多，所以屏幕内可以展示的画面就更细致，单个色块面积更小。

图像分辨率： 一张图片分辨率是500x200，也就是说这张图片在屏幕上按1:1放大时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。
在同一台设备上，图片分辨率越高，这张图片1:1放大时，图片面积越大；图片分辨率越低，这张图片1:1缩放时，图片面积越小。（可以理解为图片的像素点和屏幕的像素点是一个一个对应的）。
虽然不同设备上像素块大小会不一样，但是同一台硬件设备上的屏幕分辨率、像素块大小是不会变的。PC电脑上之所以可以调整屏幕分辨率，其实也是通过算法转换了

px像素（Pixel）: 是相对长度单位，像素px是相对于显示器屏幕分辨率而言的。

em: 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

  • 为了简化font-size的换算，我们在根元素html中加入font-size: 62.5%;
    html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
    这样页面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;

28.文字不换行

  • word-break:break-all,用于处理单词折断。
  • white-space:no-wrap用于处理元素内的空白，只在一行内显示。

29.可继承属性

  • 字体系列 font
  • 文本系列 text color
  • visibility
  • cursor
  • ...

30.position为relative或absolute，设置top left等为百分比时，为父元素的百分比

31.height: 100%

  • 当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时或设置的高度值百分比不生效时，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。 换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，也就是一个null值，浏览器不会对这个值有任何的反应。

  • html 的父元素可以理解成window，浏览器会将html填充填充完一个浏览器窗口。 设置html的height为具体的像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，同样会将html填充完整个浏览器窗口（可以设置背景测试）。设置html的height为百分比时，当其值大于100%出现滚动条，当小于100%时同样会将html填充完整个浏览器窗口（可以设置背景测试）。 但是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。

  • 对于body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。

32. window,html, body的overflow

avatar
文章
阅读
粉丝