元素类型和文本溢出

1、元素类型：

（1）块元素：①  div  、ul/ol、 li、p、h；②  块元素可以直接设置宽高大小；③块元素默认从上到下排列，独占一行；④作用：通常是用来嵌套行内元素或者其他元素类型的标签做页面布局的（div可以嵌套一切）

（2）内联/行内元素：①  行内/内联元素：span、a、i、em、b、strong；②  行内元素无法直接设置宽高大小，要想改变行内元素的宽高大小，则要改变文本大小，即font-size；③  常见的bug:行内元素设置的margin-top/bottom是没有效果的（遵循盒模型布局规则:要有接触才能使用margin）

（3）内联块/行内块元素：①  拥有块和行内的共同的特点   input/img；②  输入框可以设置宽高大小    =>块级元素；③  输入框在一行内逐个显示   =>行内元素；④  所有的行内元素都是以基线对齐的   vertical-align：top/middle/bottom

2、元素类型的转换：      属性：display

（1）block   块    将其他的元素类型转换成块级元素

（2）inline   行内   将其他的元素类型转换成行内元素

（3）inline-block    行内块   将其他的元素类型转换成行内块

（4）list-item    列表项目    将其他元素类型转换成列表类型（块元素类型）

（5）none   无  没有

①  list-style:none    清除列表默认样式

②  text-decoration:none   清除默认的下划线   

③  background:none   清除背景   

④  border:none   清除边框

⑤  clear:none    清除浮动

⑥  display:none    删除html结构隐藏

3、float   浮动   脱离文档流    可以转换成行内块元素

4、拓展：

（1）自带边框：①  textarea    多行文本域   常用于  意见建议

②  select    下拉列表

③  input     输入边框

④  hr    水平分割线

（2）置换元素与非置换元素：有初始的宽高大小    ①input；②textarea；③select；④img

置换元素：有属性  ，并且属性值发生改变  样式也会发生改变，如：  input、img

非置换元素

5、居中

（1）表格  html属性

水平方向 :align="center"

垂直方向  valign

（2）文本

①  水平方向  text-align:center

②  垂直方向  line-height=

（3）版心

盒模型：margin:0 auto;

（4）背景

background-position:x  y

（5）图片

①  加一个辅助行内块元素，会有基线对其效果，再设置valign（行内块设置valign,img再设置valign）,最后再让用户看不到基线

②给父级添加text-align:center

③在图片后面添加标签（任意标签）

④display:inline-block;width:0;height:100%

6、文本溢出属性：overflow     默认值：①  visible  可见的；②  hidden    隐藏；③  scroll   显示滚动条；④  auto   自动智能显示滚动条：（①文本超过屏幕则会出现滚动条，②文本可以全部显示，则不显示滚动条）

overflow-x/y  在x/y出现滚动条

（1）单行文本显示省略号 需要4个条件：

①  文本所在区域要有宽高大小；

②  文本强制在一行显示；

 white-space:nowrap  ：nowrap 不换行 强制性的一行显示  ！！！； pre 保留了空格； pre-line  没有了空格 保留了换行；pre-wrap  空格 换行都有；pre标签的使用  格式化标签 在标签内如何写的 、那么在浏览器中就会如何显示出来

注意：br换行符比nowrap的权限高

③文本溢出隐藏：text-overflow:hidden；

④文本溢出；

7、contenteditable：属性值：true      容器变为可输入文本