一、CSS实现垂直水平居中
1 该元素的宽高固定吗？
在将元素绝对定位为top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}2 该元素宽高未知？
（1）如果宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，可以使用transform属性来做负的50%移动（基于当前元素宽高）。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不需要提前知道尺寸兼容性好。
.container {
position: relative;
height: 300px;
border: 1px solid red;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid green;
}3 你要用flexbox吗？
对flexbox进行垂直水平居中，只需设置两个属性为center: align-items、justify-content。
.parent {
display: flex;
justify-content: center;
align-items: center;
}4 你要用grid布局吗？
父容器设置为grid布局后，子元素直接margin: auto;即可实现垂直水平居中。
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}详细案例解释可参考：翻译的引用文章《CSS实现居中》
外文地址：https://css-tricks.com/centering-css-complete-guide/
二、文字过多溢出后显示省略号
- 单行文本溢出
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}2. 多行文本溢出
1) WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。（webkit是私有属性）
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 设置省略号在容器第四行文本后 */
-webkit-box-orient: vertical;2) webkit是私有属性
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url((http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}https://codepen.io/feiwen8772/pen/gQJXzO
三、盒模型
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。所有HTML元素可以看作盒子。中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，边距，边框，填充，和实际内容。。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。（也称作“填充”）Content(内容) - 盒子的内容，显示文本和图像。
当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
四、浏览器标准模式和怪异模式之间的区别是什么？
浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。
标准模式：浏览器按W3C标准解析执行代码；
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。
对HTML文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。把<!DOCTYPE html> 正确地放在 HTML 文件的顶端，是所有可用的DOCTYPE之中最简单的，而且是HTML5 所推荐的。任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 Internet Explorer 9 或更早期的浏览器触发怪异模式。在 HTML5中，DOCTYPE 唯一的作用是启用标准模式。
五、box-sizing
大部分人是建议在初始化样式的时候，就将box-sizing设置为border-box，这样更方便设置元素的宽高。
box-sizing属性用于更改用于计算元素宽度和高度的默认的CSS盒模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
在 CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border或 padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。
box-sizing 属性可以被用来调整这些表现:
content-box默认值，标准盒子模型。width与height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。width= 内容的宽度height= 内容的高度
如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-boxwidth和height属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内。width= border + padding + 内容的宽度height= border + padding + 内容的高度
告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
六、position
position用于网页元素的定位，可设置 static/relative/absolute/fixed 这些值，默认值是static。
relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小。relative 产生一个新的定位上下文。relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
和 relative 不同，absolute 元素会脱离文档结构。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（float 元素也会脱离文档结构）设置了 top、left 值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。absolute 元素是根据最近的定位上下文确定位置。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。
fixed 根据 window （或者 iframe）确定位置。fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
七、选择器优先级
下面列表中，选择器类型的优先级是递增的：
- 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
- 类选择器（class selectors） (例如,
.example)，属性选择器（attributes selectors）（例如,[type="radio"]），伪类（pseudo-classes）（例如, :hover） - ID选择器（例如, #example）
通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。
给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。
例外的!important规则：
当在一个样式声明中使用一个!important规则时，此声明将覆盖任何其他声明。使用!important是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
八、import与内联谁更优先？
用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
九、CSS继承
继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
十、link与@import的区别
建议使用link，慎用@import 。
link是HTML 提供的标签，不仅可以加载CSS，还可以定义rel等属性。不存在兼容性问题；
@import是css2.1提供的语法(ie5以上才兼容)，只有导入样式表的作用；
link在页面加载时CSS同时被加载；
@import引入的CSS要等页面加载完毕后再加载；
link标签可以使用JavaScript控制DOM去改变样式；而@import不支持。
十一、清除浮动的方法
1.在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题
2.如果父标签就是浮动元素则可自动清除内部浮动，无需格外处理;
3.也可以使用邻接元素清理之前的浮动
4.:after伪元素方法清理浮动
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式：
.clearfix:after {
content: '';
display: block;
clear: both;
}本文参考如下：
CSS 盒子模型 | 菜鸟教程www.runoob.com
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
