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 容器变为可输入文本
