学习HTML5的第六天

垂直对齐：在垂直方式设置元素位置

应用场景：logo垂直居中 下拉菜单垂直居中 控制文本与图片的位置

语法：vertical-align：text-top  用的的时候必须把行内元素改成行内块元素

属性值：middle、top、text-top、bottom、text-bottom、center

如果父级元素设置了line—height 那么bottom在父级DIV的最下面

 Middle【实现垂直居中】、text-top【重要】、text-bottom【文字的最下方】、top【line-height的最上方】、bottom【line-height的最下方】

1. 搭建骨架的结构
2. 清楚浏览器自带的边距，以及li自带的样式
3. 设置ul的宽度高度，并且让他水平居中
4. 让所有的里显示在一行中，并且给他设置宽度和高度，水平居中，line-height
5. 设置图片的样式：转化为行内块，设置行高，让内容垂直居中
6. 设置鼠标滑过之后背景图片的变化

单行溢出

White-space：nowrap；强制在一行显示  white白色space空白  空白区域的设置

属性值：pre 保留所有的空白区域，并且强制在一行中显示

        Pre-wrap没有完全保留空白符号，不让他强制在一行显示

pre-line保留部分空白区 保留换行 换行后如果有空白这一行都是空白

溢出隐藏

overflow：hidden  溢出隐藏

         scroll    显示滚动条 一条

         auto    在文本溢出时显示滚动条

         visble   默认值

省略号隐藏 ：

强制一行White-space：nowrap； 溢出隐藏overflow：hiddeb 文本隐藏Text-overflow：ellipsis 组合用

Text-overflow：ellipsis  单行文本溢出是显示...

             Clip      默认情况 隐藏后面的文本不显示省略号【加完overflow：hidden的时候】

网页自适应

宽度自适应：

1：width设置百分比

2：步设置宽度，默认继承父元素的宽度

Float之后宽度无法继承来自父元素的宽度

min-width：xxpx；最小宽度 作用 当页面显示的区域大于这个宽度时，会根据宽度百分比缩放，如果小于等于这个宽度时会被覆盖住

参考案例：小米官网放大缩小

高度自适应

Min-height： px  最小高度，内容可以把高度撑开

解决高度塌陷的方法

1.可以用overflow：hedden；出发bfc，bfc在计算高度时候会把浮动高度计算在内，缺点如果有定位元素时，则会隐藏

2. Clear：both；清除浮动 可以再后面加一个高度为0的div【Clear：both清除浮动对添加的div的影响】 然后添加清除浮动可以解决塌陷问题，缺点会有一个多余的div

原理：清除浮动带来的影响

1. 万能法： ：after{

     content：“.”；

     display:block;

     clerr:both;

     height:0px;

     overflow:hidden;

     visibility:hidder

}

好处1如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量

2避免了定位元素被隐藏

伪对象【伪元素选择器】选择器

：after {content：“文字”url（图片）}在后面添加文字或图片

：before 之前插入图片或文字

：First-letter 选取第一个文本添加样式 只能用在块元素里

：First-line   选取第一行添加样式  只能用在块元素里

：：selection  选中之后的样式操作，只能改变字体颜色和背景颜色

Visibility：hedden 隐藏元素，元素的空间不隐藏【清除色块，威力避免残存的小色块】

Clear：both；清除子元素附近的浮动元素带来的影响