盒子模型

盒子模型：

padding不撑开，

box-sizing: border-box

塌陷，合并塌陷上下两个紧邻的margin-buttom和margin-top取较大的；父子塌陷，如果父标签没有相对位置的就会产生外边距塌陷；子盒子全部浮动起来，父盒子没有宽高的会产生父盒子塌陷。overflow: hidden;

清除浮动造成的影响：

1，额外标签法：<div style="clear:left/right/both"></div>

新加了无意义的标签

 clear : none | left | right | both

       取值：

       none  :  默认值。允许两边都可以有浮动对象

       left   :  不允许左边有浮动对象

       right  :  不允许右边有浮动对象

       both  :  不允许有浮动对象

2,overflow:hidden/auto/scroll

overflow属性常见的值有如下几种

值 描述

visible 默认值。内容不会被修剪，会呈现在元素框之外

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

3，伪类:after，相当于在父元素的后面添加样式

.clearfix:after {

内容为空

content:""

块状元素

display:block

高度为0

height:0;

清楚浮动造成的影响

clear:both;

}

4.双伪元素清除浮动

.clearfix:after,clearfix:before {

content:""

发出BFC，BFC可以清除浮动

display:table；

clear: both;

}

定位

position：static静态

position：

position：

position：fixed 只认浏览器

层叠顺序：z-index：

元素的显示与隐藏：

display: no

visibility: hidden

overflow: hidden

opacity: 0

鼠标样式：

cursor：default 小白

cursor：pointer 小手

cursor：move 移动

cursor：text 文本

轮廓：

outline-color

outline-style

outline-width

防止拖拽文本域

resize：none

垂直对齐：

vertical-align：baseline | top | midddle | bottom

去除图片底侧空白缝隙

1.两者之间有默认外边距的解决办法

修改父元素的字体尺寸：font-size：0；

2.给img添加display:block;转换成块级元素就不会存在问题了。

两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

1.外边距受影响的解决办法：

修改内联元素对齐属性：vertical-align：top；

溢出的文字隐藏

white-space 设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容。

normal：默认处理方式

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇<br>换行

可以处理中文

text-overflow:设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip：不显示省略标记（...）,而是简单的裁切

ellipsis：当对象文本溢出时显示省略标记

注意一定要首先强制一行内显示，再次和overflow属性搭配使用。

多行省略号

WebKit的CSS扩展属性，该方法适用于WeKit浏览器及移动端。

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，他需要组合其他的WebKit属性，常见结合属性：

display:webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient;必须结合的属性，设置或检索伸缩盒子对象的子元素的排列方式

display:-webkit-box;

-webkit-box-orient:vertical

-webkit-line-clamp:3;

overflow:hidden;