前端学习第九天——宽高自适应

、        网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。 

1、宽度width自适应

1、将块级元素设置宽度100%的时候，会和浏览器(默认是100%)一样（也叫通栏效果）

2、块级元素不设置宽度的时候：默认为(父级)的100%、即会和父级等宽

3、块级元素不设置宽度默认是100%，如果添加脱离文档流的属性，元素的宽度会由内容决定

设置脱离文档流的属性时，一定要给元素添加宽高大小！！！

2、高度height自适应

1、浏览器的默认高度为0，设置直接子级元素为100%的时候，高度不显示

2、高度不设置或设置为auto时，当前元素的高度会被子级元素撑开——>高度自适应

3、重点设置元素为百分比的情况：

        1）设置浏览器的默认百分比宽高，子级百分比才会相对于浏览器进行计算

                html,body{width:100%;height:100%}

        2）设置 图片的宽高大小和父级一样

                img{width:100%;height:100%}（会拉伸变形）

3、最小高度的使用

最小高度：min-height
        没有内容的时候可以保持一个最小的固定高度
        有内容的时候可以将容器的高度撑开做到自适应

注意：最小高度有兼容问题：只有在高版本中可以使用，低版本中不可以用

4、最大值最小值

最大宽度：max-width  约束页面的比例、翻页

最大高度：max-height

最小宽度：min-width

最小高度：min-height

5、高度塌陷

高度塌陷：父级元素没有设置高度(即自适应)，子级元素有浮动布局

解决方法：

        第一种：给父级固定添加高度

        缺点：不可以自适应布局

        第二种：给父级添加 overflow:hidden

        原理：设置文本溢出属性会触发BFC，BFC布局规则会让浮动元素也参与高度计算

        缺点：如果子级元素有超出父级元素的部分会被隐藏起来

        第三种：在当前容器的最后位置添加任意标签，设置clear:both

        原理：清除上方预留出来的空间

        优点：比较方便

        缺点：代码冗余，容易造成混乱

        第四种：万能清除法(会用就行)

        代码 给出现高度塌陷的父级添加

.clear-fix::after{
    content:'';
    width:100%;
    height:0;
    display:block;
    overflow:hidden;
    clear:both;
    visibility:hidden;
}

        缺点：会出现兼容问题

        PS：兼容问题多出现在IE浏览器等低版本浏览器

6、伪对象/伪元素选择器

1、选择器::after  表示当前标签后面添加... 必须和content一起使用

2、选择器::before  表示当前标签前面添加... 必须和content一起使用

3、选择器::first-letter  选择第一个文本

4、选择器::first-line  选择第一行

伪类和伪对象的区别：

        伪类：hover link visited active

        伪对象：before after

写法上的区别：在css2中伪类和伪对象都是一个冒号，在css3中为了区别，伪对象设置两个冒号

作用上的区别：伪类改变对象属性(样式)，伪对象可以设置样式、可以添加结构(虚拟结构)

7、隐藏

在浏览器中隐藏一个元素的方法

1、元素类型：display:none 隐藏显示和结构

2、visibility:none                只隐藏显示方式，结构还在

3、利用文本溢出                overflow:hidden

4、opacity:0                       调整透明度