元素类型以及overflow，white-space等属性

1：预格式化标签：<pre></pre>
2：overflow属性="visible/hidden（隐藏）"/scroll/auto(自动）/inherit;
visible：默认值，内容不会被修剪，会呈现在元素框外；
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条，以便产看其它内容
auto： 如果内容被修剪，浏览器会显示滚动条，以便查看其它内容
inherit:规定应该从父元素继承overflow属性的值
3：空余空间：
white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit
该属性用来设置如何设置元素内的空白
normal:默认值，空白会被浏览器忽略，
nowrap:文本不会被换行，文本会在同一行上继续，直到遇到<br/>标签为止；
pre:空白会被浏览器保留，其行为方式跟html中的pre标签
pre-wrap:保留空白符序列，但是正常的进行换行
pre-line；保留空白符序列，但是保留正常换行
4:&gt;>
&lt;<
&copy;版权符号
5：text-overflow:clip/ellipsis
clip:不显示省略号，而是简单的裁切
ellipsis：当对象内文本溢出时，显示省略标记
text-overflow：当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义
6：还需要定义：
1、容器宽度：width：value
2、强制文本在一行内显示：white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
5 、width:20em/不允许出现半汉字截断
7 ：1）block块状显示，类似的在元素后面添加换行符，也就是说其它元素不能在后面并列
2）inline内联显示：在元素后面删除换行符，多个元素可以在同一行内并列显示。
3）当元素设置了float属性后，就是相当于该元素具备块状元素显示的特点；
4）inline-block行内块元素显示：元素的内容以块状显示，行内的其它元素显示在同一行。

8:删除线：<del>文本</del>
9:块状元素（block element)
A)块状元素在网页中是以块的形式显示，就是元素显示的是矩形区域，常用的块状元素包括div，dl,dt,dd,
ol,ul,fieldset,h,p,form,hr,colgroup,col,table,tr td等
10：默认情况下，块状元素都会占据一行，两个块元素不会出现并列情况
块元素都可以定义自己的宽度和高度。
块元素一般是作为其他元素的容器，他可以容纳其他内联元素和其它块状元素，可以把这种容器比喻为一个盒子。
11：内联元素（inline element)行内元素
常见行内元素：a,span,i,em,strong,b等
内联元素的表现形式始终是以行内逐个进行显示
内联元素没有自己的形状，不能定义它的宽和高，它显示的高度，宽度只能根据所包含内容的宽度和高度来确定，它的最小内容单元也会呈现矩形形状
内联元素也会遵循盒模型基本规则，如可以定义padding，border,margin,background等属性，但个别属性值不能正确显示

12:内联块元素
inline-block:和其它元素都在一行上
元素的高度，宽度，行高，以及顶和底边距都可以设置
常见标签：img input textarea
13:可变元素
需要根据上下文关系确定该元素时块元素或者是内联元素。

元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
1）display属性与属性值（18个属性值）
属性值：block/inline/inline-block/none/list-item
作用：块元素和内联元素之间的转换。
说明：各属性值的作用
a:Block块状显示：类似在元素后面添加换行符，也就是说其它元素不能在其后面显示，或者是让元素竖排显示
b：inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示，或者是让元素竖排显示
c:当元素设置了float属性后，就相当于该元素具备块状元素显示的特点；
d:inline-block行内块元素显示：元素的内容以块状显示，行内的其它元素显示在同一行img input
e:none元素不会被显示
f:list-item:将元素转换成列表，li的默认类型
7）A：大部分块元素display属性值默认为 block，其中列表的默认值为list-item
B：大部分内联元素的display属性默认为inline,其中的img input默认为inline-block
三：元素垂直居中
1：必须给容器父元素加上text-align：center
2:必须给当前元素转换成行内块元素，display：inline-block，再给当前元素加上vertical-align:middle;
3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;等设置；
垂直对齐方式：vertical-align:top/bottom/middle;
应用于不同图片在div当中垂直居中
四：置换和非置换元素的概念
置换元素:；浏览器根据元素的标签属性，来决定元素的具体显示内容，且元素本身拥有一般固有尺寸的元素，称为置换元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
非置换元素：html的大多数元素是非置换元素，即其内容直接表现给用户端。

转载于:https://www.cnblogs.com/xuxiaoxia/p/6550795.html