自检清单（css）

酸酸菜鱼
30 阅读7分钟
  1. css和模型在不同浏览器的差异 （标准盒模型和怪异盒模型）
    html所有的元素都是一个盒子。
    盒子的宽度 = 外边距 + 边框 + 内边距 + 内容
    为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
  1. CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则
    CSS选择器：标签选择器、类选择器、ID选择器、全局选择器（*）、组合选择器、后代选择器、群组选择器、继承选择器、伪类选择器、字符串匹配的属性选择器（^ $ *）、子选择器（带>）、CSS相邻兄弟选择器（带+）

CSS优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式

同一级别中后写的会覆盖先写的样式

css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性

at规则由一个@关键字和后续的一个区块组成，如果没有区块，则以分号结束
  1. CSS伪类和伪元素有哪些，它们的区别和实际应用
伪类：为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息

伪元素：可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到（::first-letter、::first-line）。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after

区别在于伪类是弥补了CSS选择器的不足，更方便获取信息。伪元素本质上是创建了一个虚拟容器，我们可以在其中添加内容或样式。伪类用单冒号，伪元素用双冒号。一个选择器可以同时使用多个伪类，而一个选择器只能同时使用一个伪元素。

伪类： :link :visited :active :hover : focus :first-child :first-of-type :nth-child

伪元素：::first-letter(选择蒜素的首字母) ::first-line ::before ::after ::lang(language)选择带有“language”开头的元素
  1. HTML文档流的排版规则，CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理
什么是文档流？文档内元素的流动方向，内联元素从左往右，块级元素从上到下。可以想成是一个俄罗斯方块

CSS定位规则：

1.静态定位(static)：一般元素不加任何定位属性就属于静态定位，处于正常的文档流

2.绝对定位(absolute)：绝对定位的元素从文档流拖出，使用left，top等属性相对于最接近的一个具有定位设置的父级进行绝对定位。（子绝父相）绝对定位元素可层叠，可通过z-index控制。

3.相对定位(relative)：相对定位元素不可层叠，依据left，top等属性在正常文档流中偏移自身位置。

4.固定定位(fixed)：固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并不会随着滚动条进行滚动。
用得最多就是  父相子绝

雪碧图（把所有图片合成一张图片）：
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
实现原理：把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
  1. 元素居中的几种方案
定位
   已知宽高的元素：
    子绝父相，子元素top,left等为0，margin:auto
    子绝父相，子元素left:50%;top:50%;margin-left:元素宽度一半px；margin-top:元素高度一般px；
    子绝父相，子元素top: calc(50% - 元素一半px)； left: calc(50% - 元素宽度一半px)

   未知宽高的元素：  
    用定位属性：子绝父相，left:50%;top:50%;transform: translateX(-50%);transform: translateY(-50%) 
    弹性布局    display:flex; justify-content: center;align-items: center;
    表格布局    disaplay:table;
    网格布局(兼容性不好）  父元素display: grid 子元素 align-self: center;justify-self: center;
  1. BFC是什么以及他的原理
块级格式化上下文  决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在进行盒子元素布局候，
BFC 提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，
浮动元素内部子素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
形成BFC的条件：

1.float的值不为none   

2.overflow的值不为visible   

3.display的值为table-cell,table-caption,inline-block任何一种

4.position的值不为relative和static

BFC的作用：

1.BFC会根据子元素的情况自适应高度，这个特性事对父元素使用overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。

2.阻止margin折叠。重叠会以大的为准。

3.不被浮动元素覆盖，浮动元素会巫师兄弟元素的存在，覆盖在兄弟元素上面
  1. CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
    CSS模块化方案分类：

1.命名约定：BEM、OOCSS、AMCSS、SMACSS

2.CSS in JS：eg styled-components

3.使用JS来管理样式模块：CSS Modules

防止CSS阻塞渲染：

可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

 防止css阻塞可将<link></link>标签置于<body></body>标签内，但为避免dom加载完毕而样式表未加载完成而出现
 丑陋的"内容闪现"的状况，建议首次渲染内容阻塞渲染（包括但不限于导航条的样式、超大屏幕样式、按钮样式、其
 他布局和字体的公用样式），而不需要立即显示在页面中的样式我们可以将它们放于<body></body>标签内，以减少
 css的响应时间
  1. CSS浏览器兼容性的写法，了解不同API在不同浏览器下的兼容性情况
-webkit-,针对safari、chrome浏览器的内核

-moz-，针对firefox浏览器内核

-ms-，针对ie内核

-o-，针对Opera内核
  1. 掌握一套完整的响应式布局方案
    1. 动态计算rem
    2. 借助scss函数计算 vw
  1. 实现常用布局（三栏、圣杯、双飞翼、吸顶），说出多种方式并理解其优缺点
   三栏布局：简单的三个盒子竖直排放

 
    圣杯布局
    缺点：center在宽度较小时会出现混乱
    <body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>
    

双飞翼布局
<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>
avatar
文章
阅读
粉丝