一.垂直对齐属性的文字和图像位置
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: url(img/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>
支付宝扫一扫
微信扫一扫
