1、权重问题
内联样式表 > id选择符 > class选择符 > 类型选择符（所有html标签名称）
内联样式表 > 内部样式表、外部样式表
内部样式表、外部样式表的权重与书写顺序有关，后书写的权重高
注：虽然后书写的权重高，但是属性依旧被执行，只是相同属性会被覆盖，不同属性仍然显示
!important权重最高
开发者样式 > 读者样式 > 浏览器样式
！！！当出现权重的时候就会出现层叠性
2、用css画三角
a.将盒子的宽高设为0px；
b.添加边框border；
c.为边框设置颜色border-color: ，不需要显示的边设置为透明色transparent。
3、文本溢出时以省略号显示
a.文本设置不换行 white-space:nowrap;
b.溢出文本隐藏处理 overflow:hidden;
c.溢出文本以省略号显示 text-overflow:ellipsis;
d.前提条件：存放文本的元素必须设有宽度；只能用在单行文本。
4、关于图片（浏览器解析其属性为inline）可以添加宽高的解答
img为置换元素（通过标签或者属性来改变元素在页面中的显示状态），且置换元素在浏览器解析的过程中生成一个框。
非置换元素：浏览器中大多数元素为非置换元素，将内容直接展示给浏览器。
5、大图在小盒子里居中显示
a.为父元素添加定位 position:relative; 子元素添加定位 position:absolute;
b.子元素向右移动父元素的一半 left:50%;
c.子元素向左移动自身的一半 margin-left:-宽度一半;
6、图片整合（精灵图 css sprites）
a.整合规则：背景图必须为透明 （png/gif）；
根据实际应用场景，小图标之间留出足够的间距；
尽量上下排列；
如果存在左右排列的小图标，li列表符号的背景图放在图片的最右侧。
b.本质：控制背景图的位置 background-position:
c.优点：减少服务器请求次数；减小图片质量
7、高度塌陷问题
a.出现情况：当子元素有浮动，父元素没有设置高度或者设置了最小高度时，会出现高度塌陷问题。
b.解决办法：
法一：谁塌陷就给谁添加属性 overflow:hidden;
原理：overflow:hidden;出发了BFC，BFC规定计算BFC高度时，浮动元素也参与计算。
优点：代码量少；缺点：会隐藏定位到父元素外部的内容。
法二：在浮动元素下方添加一个空标签，并为空标签添加属性 clear:both;
原理：both会忽略以上浮动元素预留出来的空间。
优点：代码量少；缺点：产生不必要的元素，造成代码冗余。
法三：万能清除法（闭合浮动）谁塌陷给谁添加 :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
原理：visibility:hidden;对元素隐藏但仍留有空间。
优点：解决了以上两种方法的缺点；缺点：代码量相对来说有点多。
8、浏览器bug以及解决办法
a.当图片添加了a标签后，在IE浏览器上会出现边框
css hack：给img添加border:0; 或者 border:0 none;
b.在div中插入图片，图片会将div下方撑大大约3px
css hack 1：div标签与img标签写同一行；
css hack 2 ：将img转为块状元素 display:block;
c.表单元素对齐方式不一致（不在同一水平线）
css hack ：给表单元素添加浮动 float;
d.按钮大小不确定（边框问题）
css hack 1：只要按钮不出现在表单里都用a标签做；
css hack 2：为按钮标签添加一个父元素，并将样式添加在父元素上 eg:<span><input type="submit"></span>
css hack 3：如果按钮是一张图片，切图放在a标签里；
e.鼠标指针bug cursor:hand;（只有IE识别）
css hack：cursor:pointer;
f.关于透明度的兼容
css hack：opacity:属性值 ;（取值范围为0-1）
filter:alpha(opacity=属性值);（取值范围为0-100）IE
opacity：子元素会随父元素一起透明 rgba：背景透明 transparent：文字透明
g:margin的bug
bug1：给子元素添加margin-top。父元素会一起下移
bug2：纵向margin值不叠加
h:IE6的bug
bug1：双倍浮向边界（浮向边）margin值会双倍显示
css hack：给浮动元素添加属性 display:inline;
bug2：默认高度 当盒子的高度小于16px时会保持16px显示（IE默认最小高度为16px，认为内部留有最小文字高度）
css hack 1：font-szie:0;
css hack 2：overflow:hidden;
i:两个浮动元素的宽 50%+50%>100%
css hack：给右侧元素添加属性 clear:right;
j:导航条内li和a的bug
css hack：给li和a都添加float
9、BFC （block formatting context 独立渲染区 只有Block-level box参与 概念上的东西，用来解决一些排版问题）
布局规则：a.内部box会一个接一个垂直排列；
b.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
c.计算BFC高度时，浮动元素也参与计算；
d.BFC区域不会与float box重叠；
e.每个元素的margin box的左边， 与包含块border box的左边相接触；
f.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
触发条件：a.根元素html；
b.float不为none；
c.position为absolute或fixed；
d.display为inline-block / table-cell / table-caption / flex / inline-flew；
e.overflow不为visible。
作用：a.清除内部浮动；
b.防止margin值上下重叠（加上一个会触发BFC的属性）；
c.自适应两栏布局
10、继承性
不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse