overflow属性、文本溢出、元素类型

CSS overflow属性、文本溢出、元素类型

一、overflow属性

规定当内容溢出元素框时发生的事情

属性值：

• 默认值：visible，内容不会被修剪
• hidden：溢出裁切，溢出内容不可见
• scroll：无论内容是否有溢出都会显示滚动条的位置，溢出的内容可见
• auto：如果内容有溢出，就显示对应方向溢出的滚动条，没有溢出则不显示滚动条
• inherit：继承父元素的overflow的属性值

二、文本溢出

语法： text-overflow:clip/ellipsis

• clip:默认值,只是简单地裁剪,不显示省略号.
• ellipsis:显示省略号.

单行文本省略号的设置（单行文本溢出显示省略号的必要条件），写法如下:

1、给容器设置一个宽度:width:value;(数值)

2、设置文本强制在一行显示.white-space:nowrap;

3、设置容器溢出部分隐藏不可见:overflow:hidden.

4、显示省略号:text-overflow:ellipsis;
注:
1:上述方法只适合于单行文本省略号的设置，多行文本省略号的设置可以通过js截取字符串来实现或交给后端处理；
2:以后四个属性必须给文本所在最近的容器添加；

三、空白空间属性white-space

属性值：

• Pre：将代码中的所有空白区域都解析出来，遇到边界不会换行显示，但如果遇到br会换行；
• pre-line：将代码中的回车换行解析出来，遇到边界会换行；
• pre-wrap：将代码中的所有空白区域都解析出来，遇到边界会换行；
• nowrap：将代码中的空白区域都忽略，内容遇到边界不会换行，强制在一行显示，如果遇到br会换行；
• 默认值：normal；

四、元素类型

元素的分类：块状元素，内联元素

【常用的块状元素】

div、h1、h2、h3、h4、h5、h6、p 、ul、ol、li、dl、dt、dd、form、table、tr

【常用的内联元素】

span、a、b、strong、i、em、u、ins、del、s、sup、sub、img、input

【块状元素与内联元素的区别】

• 块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高就是其内容；
• 块状元素自上而下独占一行显示，内联元素自左向右在一排显示；
• 块状元素和内联元素都遵循盒子模型的设置（border，padding、margin、width、height）但是内联元素的某些属性不能正常显示；
• 块状元素一般作为其他内联元素的盒子去使用

display属性

属性值：

• Block，块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面 并列显示
• inline，内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示
• Inline-block，行内块：将元素以内联元素显示，但是元素的内容以块状显示，旁边的内联对象会显示在同一行
• display:list-item;将元素转换为li类型,是li的默认display属性值.
• display:none; 将元素隐藏不见

注意事项：

• 给元素添加float相当于添加display：block；
• 只有inline-block的元素支持vertival-aline；

问题【图片大小不一致如何实现水平垂直居中】

1、给图片找一个参照物，其display属性值设为inline-block，高度为100%，设置vertical-aline:middle，图片设置vertical-aline：middle；
2、给父元素添加display：table-cell，设置vertical-aline：middle；（切记此时父元素不能添加float属性）
3、给父元素添加relative，图片本身添加absolute，四周清零，margin：auto；

置换元素和非置换元素

置换元素

浏览器根据元素的标签和属性来决定元素的具体显示内容

• 例如:img标签的src属性不同决定了网页中显示的图片不同，input标签type属性值不同,决定了网页中显示的input控件类型不同；

常见置换元素：

img,input,object,select,textarea

img为什么可以设置宽度高度？

他的display属性值为inline-block
他是置换元素，置换元素在解析的时候或默认生成一个框

非置换元素

• 除了置换元素以外，大部分html元素都是非置换元素，其内容直接显示在浏览器中，当给元素设置float后，就等价于转换为块元素；

【备注】：当需要给某个元素设置多个class名时，要使用类名词列表的用法:

	如:<div class=box (空格) box1></div>