一.垂直对齐属性的文字和图像位置
1、垂直对齐：垂直设置元素位置
2、应用场景： log垂直居中，下拉菜单垂直居中，控制文本和图像位置
3、语法： verticla-align 必须转换为内联块) )。
4、图文位置
只有元素类型为内联或内联块元素时，才支持垂直对齐属性
垂直对齐：基线； 缺省基线
垂直对齐：中间； 垂直方向与线高度范围的中心对齐。 图像外部字体的位置
垂直对齐：顶部； 垂直对齐线高度的上端
垂直对齐： bottom； 垂直对齐线高度的下端
垂直对齐：文本顶部； 垂直对齐文本上划线
垂直对齐：文本底部； 垂直对齐文本下划线
二.设置空白属性空白区域
空闲空间： normal； 默认值
空闲空间： nowrap； 文本不换行，文本在遇到br/标签之前在同一行继续；
white-space:pre； 保留空白字符意味着浏览器可以识别空白字符。
white-space :前线； 合并空白字符串，但保留换行符。
空闲空间：预失真； 保留部分空白字符串，但换行正常进行
区别【pre :保留所有空白区域，强制显示在一行
预填充：未完全保留空白区域，不强制显示在一行中
pre-line :保留部分空白区域在文本中显示换行)】
三、溢出属性设置超出框模型部分内容的显示状态) ) ) ) ) ) )。
板载：可视； 默认情况下，visible:不修剪内容，而是显示在元素框之外；
Overflow :隐藏； 隐藏：内容已修剪，其余内容不可见；
Overflow :自动； 自动：如果内容已修剪，则浏览器将显示滚动条，从中可以查看其他内容； 字体出来才有条)
Overflow :滚动； scroll :会裁剪内容，但会在浏览器中显示滚动条，以便查看其馀内容； )字体不超出也可以项目符号，但不能滚动) ) ) )。
四.文本溢出属性处理文本溢出
文本溢出：剪辑； 默认情况下“overflow :添加隐藏对象后仍有相同的效果”省略号)…)不显示，而是简单的裁剪。
文本溢出： ellipsis； 单行文本溢出时显示省略标记
注：必须添加以下三个值才能实现
五、多行文本充斥不太用的这是旧版盒子模型的) )。
显示：-WebKit-box； 将“转换为旧长方体模型”对象显示为弹性伸缩长方体模型
– WebKit-box-orient :垂直； 或者，设置伸缩框对象的子元素的放置
-webkit-line-clamp: 3； 用于限制在一个块元素中显示的文本行数。 ）
文本溢出： ellipsis
Overflow :隐藏；
六.宽度和高度的适应
1、定义：网页布局中多定义元素的宽度和高度。 但是，通常希望自动调整元素的大小以适合窗口或子元素。 这就是适应
元素的适应性在网页布局中非常重要，使网页显示更加灵活，可以按设备、窗口和分辨率进行显示。
1、不设置宽度一般给出最大的箱子浮动后的宽度不能继承来自父元素的宽度) ) ) )。
2、宽度单位不使用px，相对单位如%； 一般是里面的容器
3、在最小宽度、最大宽度上设置。 用于响应式布局
自适应宽度：如果页面的显示区域大于此宽度，则根据宽度的百分比缩放。
小于或等于此宽度时将涵盖参考示例。 小米会放大缩小
高度适应性
1、不写高度，
有问题。 如果子元素浮动，父元素将高度聚合。 高度塌了)
2、高度单位不用px，相对单位如%；
默认情况下，height无效，body，html{height:100%； }
3、采用最小-高、最大-高设置。
最小高度与IE6不兼容，需要调试。
七、假对象选择器权重值为1 ) ) ) ) ) ) )。
八、
可视：隐藏和显示：无； 有什么不同？
visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;相同点都是隐藏显示的区域
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。
九、清除高度塌陷的四种解决方法
1、给产生高度塌陷的父亲元素加overflow：hidden
实现原理；触发bfc，bfc在计算高度时会把浮动的元素的高度计算在内
缺点：如果有定位的元素时则会隐藏！！！！！！！
2、额外标签法：给产生高度塌陷的元素最后面添加一个div（必须添加一个块元素行内内元素不行），并且给他设置高度为0，clear：both（清除浮动对添加div的影响）
实现原理：清除浮动带来的影响
缺点：代码的冗余
3、after伪元素（堵住后面打儿子）：after{content”.”；display：block；vlear：both；height：0；overflow：hidden；visibility：hidden}
好处：a、如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量
b、避免了定位元素被隐藏
4、双伪元素（堵前门后门打儿子）
和上面的第三种一样唯一不一样的地方就是display转换的元素不一样
十、清除浮动总结
附注1、一排logo图片居中
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
ul{
width: 800px;
height: 100px;
margin: 0 auto;
/* background-color: pink; */
}
li{
width: 100px;
height: 100px;
line-height: 100px;
display: inline-block;
/* background-color: red; */
text-align: center;
}
img{
display: inline; /*这个属性只针对行内或者行内块元素才能生效*/
vertical-align: middle;
}
li:hover{
background: urlimg/bg的副本.png) no-repeat ;
}
</style>
</head>
<body>
<ul>
<li>
<img src=”img/logo1的副本.png”>
</li>
<li>
<img src=”img/logo2的副本.png”>
</li>
<li>
<img src=”img/logo3的副本.png”>
</li>
<li>
<img src=”img/logo4的副本.png”>
</li>
<li>
<img src=”img/logo5的副本.png”>
</li>
<li>
<img src=”img/logo6的副本.png”>
</li>
<li>
<img src=”img/logo7的副本.png”>
</li>
</ul>
</body>
</html>