CSS2.1中常用知识点及常见的问题

面向ai编程的前端菜狗
362 阅读12分钟

css2.1常用知识点

  1. “根元素”的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是<html>元素，不过有些调试器会使用<body>作为根元素，在大多数浏览器中，初始包含块就是一个视窗大小的矩形。初始包含块不等于视窗。
  2. 对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级根构成。
  3. 对于一个非根元素，如果其position值是absolute（绝对定位），包含块设置为最近的position值不是static的祖先元素。如果这个祖先是块级元素，包含块则设置为该元素的内边距边界。如果没有祖先，元素的包含块定义为初始包含块。
  4. left，top，right，bottom，width，height默认值是auto。margin，padding，border-width默认值是0
  5. width，margin，padding百分比参照于包含块的width的值，height百分比参照于包含块的height，left百分比参照于包含块的width，top百分比参照于包含块的height
  6. 一个元素分为两层，上层是文字相关的，下层是盒模型相关的。（在进行元素浮动的时候要考虑）
  7. 浮动会使元素提升半个层级。
  8. margin为负值（margin不影响元素的位置）：将元素的边界往里收，为正值：将元素的边界往外扩。
  9. 给<body>标签设置最小宽度：left.width*2+right.width (right.width*2+left.width)。
  10. 如果让<body>元素,<html>元素,视口三合一，高度必须一层一层的继承下来。
  11. 浏览器渲染页面的规则，如果<body>元素和<html>元素中只有一个overflow属性，那么这个overflow属性给文档。如果两者都写了，<html>元素上的overflow属性会作用给文档，<body>元素的overflow属性会作用给自己。
  12. 禁止系统默认滚动条的方法： html,body{ height:100%;overflow:hidden;}。
  13. 没有定位参照于包含块，相对定位参照于元素本来的位置，绝对定位参照于包含块，固定定位参照于视口。
  14. Box：CSS布局的基本单位。Box是CSS布局的对象和基本单位，直观来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型，不同类型的Box。会参与不同的formatting Context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。
  15. 盒子的类型：block-level box：display属性为block,list-item,table的元素，会生成block-level box。并且参与block fomatting context;inline-level box:display属性为inline,inline-block,inline-table的元素，会生成inline-level box。并且参与inline formatting context。
  16. CSS hack（条件注释表达式）用来设置不同的浏览器版本下编写代码。*针对IE6和IE7，_只针对IE6。 text-align只对内联元素（行内元素）有效。
  17. white-space控制文本换行或不换行。最大的场景就是溢出显示省略号 div{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  18. 一行上垂直对齐时以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度，当有多行内容时，每行都会有自己的行框。
  19. vertical-align属性用来指定行内元素的垂直对齐方式，就是参照一行上垂直对齐时以行高值最大的行内框为基准进行对齐的。
  20. 像<input>，<img>这种元素被称为替换元素，在页面上写的时候只写了一个标签，可是最终渲染到页面中的时候用图片或者文本框占据高宽了，不用默认指定高宽。

三列布局相关知识点

  • 三列布局的需求
    1. 两边固定，当中自适应
    2. 当中列要完整显示
    3. 当中列要优先加载
  • 圣杯布局的技术点
    1. 浮动：搭建完整的布局框架
    2. margin为负值：调整旁边两列的位置（使三列布局到一行上）。
    3. 使用相对定位：调整旁边两列的位置（使两列位置调整到两头）
  • 伪等高布局：margin-bottom为负值，padding-bottom设一个比较大的值。超出部分用overflow：hidden。
  • 标准的块级元素水平居中使用margin：0 auto；使用浮动时会失效。
  • 双飞翼布局技术点
    1. 浮动：搭建完整的布局框架
    2. margin为负值：调整旁边两列的位置（使三列布局到一行上）。
    3. 在中间<div>标签中再加一个<div>标签，将内部<div>标签的内边距调整，使两列位置调整到两头。
  • 圣杯布局和双飞翼布局实现的对比：
    1. 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
    2. 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
    3. 两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左右内边距进行布局调整。

stickyFooter（粘连布局）

  • 经典的“粘连”footer布局，有一块内容<main>,当<main>的高度足够长的时候，<footer>应该紧跟在<main>元素的后面。当<main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<footer>元素能够“粘连”在屏幕的底部。
  • stickyfooter的布局套路：
    1. 写两个<div>标签（父子关系），父标签下面写<footer>。
    2. <body>元素获取视口高度（html，body{height：100%；}），父标签的最小高度（mid-height：100%）设置和<body>元素一样的高度。此时footer被撑到视口下方。
    3. footer的margin-top设置为负的footer.height,，footer向上移，这样footer就在底部显示了。但是当子元素中的内容区足够大，撑开到超过视口的时候，内容区会与footer重叠。
    4. 给子标签设置一个padding-bottom：footer.height。消除重叠。

解决IE6下fixed失效问题的方法

  • 使用绝对定位来模拟固定定位:
    1. 禁止系统默认滚动条。
    2. 给<body>元素一个滚动条 。
    3. 让<body>元素的尺寸变为视口的尺寸。

BFC知识点

  • Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context 有Block fomatting context(简称BFC) ,Inline formatting context(简称IFC).
  • BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
  • BFC布局规则：
    1. 内部的Box会在垂直方向，一个接一个地放置。
    2. BFC的区域不会与float box重叠。
    3. 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    4. 计算BFC的高度时，浮动元素也参与计算。（清除浮动，haslayout）
    5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 会生成BFC的元素：
    • 根元素
    • float属性不为none
    • position为absolute或fixed
    • overflow不为visible
    • display为inline-block，table-cell，table-caption，flex，inline-flex

两列布局

  • 两列布局要求，左边固定，右边自适应。
  • 两列布局实现方法：
    1. 两个<div>标签，上面浮动，下面的<div>顶上去
    2. 给<body>设置最小宽度，利用BFC规则给右边的<div>标签设置overflow：hidden。

margin叠加问题

  1. 兄弟元素之间的margin叠加：处于同一个BFC中两个相邻块元素会margin重叠。解决办法：
    1. 可以改变两个元素属性。
    2. 可以改变两个块元素不在一个BFC中。
    3. 使两个块元素不相邻（不推荐使用）。
  2. 父子元素之间的margin传递解决方案：
    • 可以给父元素设置一个overflow：hidden，让父子元素不处于同一个BFC中，即可解决margin传递问题。

清除浮动问题

  • 清除浮动：让浮动的子元素可以撑开父级的高度。
  • 解决办法：
    1. 直接给父元素加高度（有点low，扩展性不好）
    2. 给父元素开启BFC， overflow:hidden(缺点不兼容IE6)（浮动盒子的特点，定位盒子的特点：高宽都由内容撑开)
    3. <br>标签清除浮动。<br clear="all">（IE6不支持）
    4. 空标签清除浮动。<div style="clear:both;">(不推荐，没有符合结构，行为，样式相分离的原则)IE6下元素的最小高度为19px，可以尝试给元素的fontsize设为0，但是还是会有2px的误差。
    5. 伪元素清除浮动。开启haslayout兼容IE6（zoom:1;），同时设置：after伪类{ content:"";display:block;clear:both;}。

已知宽高的元素垂直水平居中方案

  1. 该元素设置为绝对定位position：absolute；该元素的父元素设置相对定位position：relative；（让该元素相对于父元素进行定位），设置该元素的left：50%；top：50%；再将该元素的外边距设置为margin-left:负的该元素的宽度；margin-top：负的该元素的高度；
  2. 该元素设置为绝对定位position：absolute；该元素的父元素设置相对定位position：relative；（让该元素相对于父元素进行定位），设置该元素的left，right，top，bottom为0，margin设置为auto；

未知高宽的元素垂直水平居中方案

  • 绝对定位盒子的特性：高度由内容撑开，水平方向上：left+right+width+padding+margin=包含块padding区域的尺寸。垂直方向上：top+bottom+height+padding+margin=包含块padding区域的尺寸
  • 未知高宽的元素垂直水平居中方案
    • 该元素设置为绝对定位position：absolute；该元素的父元素设置相对定位position：relative；（让该元素相对于父元素进行定位），设置该元素的left：50%；top：50%；transform:translate3d(-50%,-50%,0);

字体相关样式

  1. font-size 的值有px，em（em值的大小是动态的，当定义font-size属性时，1em等于元素的父元素的字体大小）%（参照父元素的字体大小）在Google中font-size默认是16px，最小是12px。
  2. font-style，两个值italic或oblique都可以让字体倾斜。
  3. font-weight，normal和bold（正常和加粗两个值），normal正常粗细，与400等值，bold加粗，与700等值，一共分为9个等级100-900.
  4. font-family允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体，属性的值用逗号隔开，浏览器会选择列表中第一个该计算机上有安装的字体。一般将最后一个值设置为字体族。
  5. font简写属性，该属性必须同时设置font-size和font-family，如需设置font-style和font-weight中任意一个，它们必须放在font-size值的前面，line-height值必须紧跟在font-size之后，并且要在属性值前面加上/。最后font-family是必不可少的，必须放在最后。（一般不推荐使用）

文本行高相关知识点

  • 文本的行高 分为顶线，中线，基线，底线。行高指的是上下文本行中基线的垂直距离。行距指的是上文本行的底线到下文本行的顶线的垂直距离。半行距指的是行距的一半。行距=行高-字体大小。
  • 内容区：底线和顶线包裹的区域。文本行中的每个元素都会生成一个内容区，这个由字体的大小确定，这个内容区则会生成一个行内框，如果不存在其他因素，这个行内框就完全等于该元素的内容区，由line-height产生的行间距就是增加和减少各行内框高度。
  • 行内框：行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框默认等于内容区域，将line-height的计算值减去font-size的计算值，这个值就是总行距，这个值可能是个负值，任何将行间距/2分别应用到内容区的顶部和底部，其结果就是该元素的行内框。
  • 行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示，默认情况下行内框的高度等于本行内所有元素中行内框最大的值。
  • 在前端开发中，如果要处理大量的文本，建议把行高设置的要比字体大。
  • 关于行高的继承，line-height:1会直接被子元素继承，而不是转换为font-size的值再被子元素继承，但是line-height:100%,会先转换成父元素的font-size的值，再由子元素继承。
  • 在页面初始化时body{ line-height:1;}，当页面中有大量文字时，标签的行高设置为1.5,页面显示文字会优美- 行高最大的作用是单行文本垂直居中。

图片垂直水平居中方法

  • 给图片加一个<div>标签的盒子，先给<div>标签设置一个text-align：center;让图片水平居中，然后给<div>标签加一个after伪类，display：inline-block，vertical-align：middle，高度设置为100%，这样就给了图片的vertical-align一个参照，然后给图片<img>标签设置一个vertical-align：middle；（vertical-align只适用于inline-block元素，其他类型元素不适用）。
avatar
文章
阅读
粉丝