【1】盒模型，box-sizing
（1）浏览器的标准模式和怪异模式下的盒模型
（2）CSS3指定盒子模型种类
box-sizing: content-box; //指定盒子模型为W3C
box-sizing: border-box; //指定为为IE盒子模型
box-sizing: border-box; 的好处是：无论如何改动border，padding的值，都不会导致box总尺寸发生变化。否则一旦改动padding或者border-width，盒子的宽度就会发生变化，影响页面布局，然后为了保证原始布局，又得减少盒子内容宽度以保持总尺寸不变。
【2】CSS3 选择器
原文链接：https://www.cnblogs.com/AllenChou/p/4684753.html
注意点：
（1）相邻兄弟选择器，选择紧接在元素A后的元素B，A+B{color:red;}，A和B具有相同的父元素；用一个结合符只能选择两个相邻兄弟中的第二个元素；li + li {font-weight:bold;}选择器只会把列表中的第二个和第三个列表项变为粗体，第一个列表项不受影响。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
（2）伪类选择器中的结构选择器
p:first-child，选择属于其父元素的首个子元素的每个<p>元素，下面例子匹配失败
p:first-child
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>
// 分别匹配到ul/ol下的第一个li
li:first-child{
color: red;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
p:last-child如果父元素的最后一个子元素不是p，同样匹配失败！！！
:target选择当前活动的#news元素
<style>
//匹配两个href中带‘#’的元素
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
...
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
:root，匹配<html>元素
:not(selector)，:not(p)选择每个并非p元素的元素
（3）UI元素状态伪类选择器
UI是指user-interface，即用户界面，UI元素状态伪类选择器根据用户界面元素（如复选框）的当前状态应用样式。
::selection，匹配选中的文本
（4）属性选择器
[attribute|=value]选取带有以指定值开头的属性值的元素，该值必须是整个单词，单词之间不能出现空格，可以以-连接。
【3】CSS3新特性：伪类，伪元素
伪类：为实现特定的效果，给元素模拟添加一个新的类
伪元素：为实现特定的效果，在文档中插入虚构的元素
伪类使用一个冒号，而伪元素使用一对冒号！！！
所有CSS伪元素
| 选择器 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | 在每个<p>元素后插入内容 |
| ::before | p::before | 在每个<p>元素之前插入内容 |
| ::first-letter | p::first-letter | 选择每个<p>元素的第一个字母 |
| ::first-line | p::first-line | 选择每个<p>元素的第一行 |
| ::selection | p::selection | 选择用户选择的元素部分 |
【4】如何实现水平居中和垂直居中
原文链接：https://blog.csdn.net/wsymcxy/article/details/82389779
水平居中
（1）行级元素：设置父元素text-align:center
（2）块级元素：设置父元素宽度，子元素设置宽度和margin:auto;
（3）使用flex布局居中：父元素设置display:flex，justify-content :center;，设置宽度；子元素设置宽度；
（4）父元素相对定位position:relative;，子元素绝对定位position: absolute;left:50%;transform:translate(-50%);；
垂直居中
（1）指定父元素高度，设置display:table；设置块级子元素display:table-cell;vertical-align:middle；
（2）flex布局使内部块级元素垂垂直居中
- 父元素：设置
display:flex，align-items :center;，设置高度 align-items定义flex子项在侧轴（纵轴）方向上的对齐方式justify-content定义flex子项在主轴（横轴）方向上的对齐方式- 子元素：设置高度
（3）定位实现（水平垂直居中）
- 父元素：
position:relative; - 子元素：
position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
（4）内联元素设置line-height与父元素的高度相同
【5】position，display
原文链接：https://blog.csdn.net/qq_27064559/article/details/81868787
注意点：
display:none;，visibility:hidden;，opacity:0;三种隐藏方式的区别；- 内联元素设置margin-top与margin-bottom无效，但margin-left与margin-right有效；
【6】浮动元素引起的问题和解决办法？
原文链接：https://www.jianshu.com/p/6c792ca30a03
[7]link和@import引入css的区别
CSS 引入的四种方式：内联、嵌入、链接、导入
link：是XHTML标签，无兼容问题，在页面载入时同时加载，支持使用Javascript控制DOM去改变样式；
@import：在CSS2.1提出，低版本的浏览器不支持，页面完全载入以后加载，不支持使用Javascript控制DOM去改变样式；
[8]解释一下css3的flexbox，以及适用场景
flexbox 是弹性布局模型，提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
使用场景：屏幕自适应布局和取代浮动布局
[9]inline和inline-block的区别
block：独占一行，可设置宽高，可设置内外边距；(div, table , ol, ul, p ,h 等)
inline：不会独占一行，不可设置宽高，可设置水平方向的内外边距，不可设置垂直方向的内外边距；（span, a ,strong , em）
inline-block ： 不会独占一行，可设置宽高；（img, input）
[10]Grid布局
原文链接：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，是二维布局。
【11】table布局
table布局是早期的一种网页布局方式，后来被div+css取代；
table优点：浏览器不存在兼容问题；同行等高，宽度自动调节 ；
table缺点：页面加载速度慢（加载页面时，要请求到全部数据才显示页面）；标签结构多，若用到表格的嵌套，则代码的复杂度更高；
div优点：加快了页面的加载速度；布局灵活；改版方便
【12】实现两栏布局有哪些方法？
原文链接：https://www.jianshu.com/p/267239f8e4b2
【13】css dpi
dpi：是打印机、鼠标等设备分辨率的单位，衡量打印精度，表示每英寸多少点，该值越高，则图片越细腻；
【14】attribute和property的区别
原文链接：https://www.jianshu.com/p/f7a7cda463df
attribute获取与设置
<input id="username" type="text" value="饥人谷">
<script>
var userInput = document.querySelector('#username');
console.log( userInput.getAttribute('value') ); //"饥人谷"
userInput.setAttribute('value', 'hunger');
</script>
property获取与设置
<input id="username" type="text" value="饥人谷">
<script>
var userInput = document.querySelector('#username');
userInput.value = "若愚";
console.log( userInput.value ); //"饥人谷"
</script>
- attribute是html文档上的标签属性，而property则是DOM元素的自身属性，如果需要获取自定义属性那只能使用 getAttribute()
- 改变 property 不会同步到 atttribute 上，改变 attribute也不会同步到property 上
- getAttribute()得到的值类型总是字符串
【15】css实现三列布局怎么做？如果中间是自适应又怎么做？
（1）利用float属性将元素并排。将3个元素设置float属性，属性值为left，同时指定不同比例的宽度，及高度。
（2）三个div的外面用一个div套起来，使用flex布局。左div设置float:left;，右div设置float:right;，中间div设置flex:1;
flex:1相当于flex-grow:1 ; flex-shrink:1; flex-basis:0% ;
/* flex-grow为0，则存在剩余空间也不放大 */
/* flex-shrink为0，则空间不足该项目也不缩小 */
/* flex-basis为auto，为该项目本来的大小 */
[16]流式布局和响应式布局如何实现
流式布局：CSS2中出现，靠百分比进行排版，可以在不同分辨率下显示相同的版式；
缺点：宽度使用百分比定义，但是高度和文字大小等是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示不协调。
响应式布局：CSS3中的媒体查询，监测设备屏幕大小，在不同屏幕下显示不同版式；
- 设置 Meta 标签，
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，视图标签表示使用设备的宽度作为视图宽度并禁止初始的缩放。 - 通过媒介查询来设置样式，根据条件告诉浏览器如何为指定视图宽度渲染页面；
@media screen and (max-width: 980px) { #head { … } #content { … } #footer { … }}
【17】移动端布局方案
【18】实现三栏布局（圣杯布局，双飞翼布局，flex布局）
面试题目：假设高度一定，请写出三栏布局，左右宽度300px,中间宽度自适应，中间栏要放在文档流前面优先渲染；
原文链接：https://www.jianshu.com/p/81ef7e7094e8
三栏布局的五种办法（双飞翼布局,圣杯布局,flex弹性盒子布局，table布局，绝对定位布局）
【19】清除浮动的原理
[20]padding百分比是相对于父级宽度还是自身的宽度
padding ,margin百分比赋值时（无论竖，横）都是相对于容器宽度的
WHY? CSS的基础需求是排版，而通常横排文字，其水平宽度一定，垂直方向可以无限延展。
[21]css3动画，transition和animation的区别，animation的属性，加速度，重力的模拟实现
css3动画，transition和animation的区别，及实现旋转图片（transform: rotate）
[22]什么是bfc，如何创建bfc？解决什么问题？
BFC 是
块级格式化上下文，是一个独立渲染区域，规定了区域内部如何布局。
形成BFC的四种方式
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC作用
- 避免垂直外边距叠加
- 避免高度塌陷
【23】CSS 选择器的优先级是怎样的？
!important > id > class > 标签 > 子选择器 > 后代选择器 > 伪类选择器
【24】雪碧图
雪碧图是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。当页面渲染时，可以减少http请求次数，从而加快网页加载速度。
【25】SVG
SVG可缩放矢量图形，使用 XML 格式定义图像
【26】媒体查询的原理是什么？
@media 可以针对不同的屏幕尺寸设置不同的样式
[27] CSS 的加载是异步的吗？表现在什么地方？
【28】常遇到的浏览器兼容性问题有哪些？常用的hack的技巧
（1）不同浏览器的标签默认的 margin 和 padding不同
【解】 css 里增加通配符 * { margin: 0; padding: 0; }
（2）IE6双边距问题；在 IE6中设置了float 和margin , 就会出现边距问题
【解】设置display:inline;
【29】外边距合并
原文链接：https://blog.csdn.net/songyi160/article/details/87891222
（1）父子元素margin合并
在div里面有子元素div1时，若父元素div在没有设置overflow:hidden或者是border属性，则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。此时，div1在div中的margin-top值为0px。
（2）兄弟元素margin合并
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
6517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
