今日复习内容

• 最大最小宽高

Width: 固定值，如果浏览器窗口小于固定值将会出现左右滚动条

Max-width：如果浏览器窗口小于给定值不会出现滚动条，浏览器大于给定值时只显示给定值的宽度

Min-width：如果浏览器的窗口大于给定值则按照浏览器的窗口的宽度去显示，如果浏览器的宽度小于给定值则按照给定值去显示会出现滚动条

Height：固定值，如果内容多将会溢出

Max-height：如果里边没有内容，不显示相当于高度为0；如果里边有内容将会显示内容的高度，如果内容比较多超过给定值的高度时会溢出

Min-height：如果里边没有内容或者内容比较少显示的是给定高度值，如果内容比较多超过给定值的高度那么这个高度将会随着内容的增加而增大

【最大最小宽高使用场景】

如果当浏览器窗口缩小之后会出现左右滚动条时，用width或min-width

如果当浏览器窗口无论怎样缩小都不会出现滚动条时，用max-width

如果一开始想要显示给你的值的高度可以使用height或min-height

如果想要随着内容的增加而增大可以使用min-height或者不写高度，或者写height:auto

如果一开始不显示任何高度，当达到一定高度时存在溢出可以使用max-height

• 最小高度的兼容

方法一：写一个下划线的高度  _height:值 （ie6支持此写法）

方法二： min-height:value; height:auto !Important; height:value;

• 四则函数运算

Calc(100% - XXpx)；  可与做加减乘除运算

注意：加减乘除左右两边一定要有空格

• 高度塌陷解决办法

父元素不设置高度，子元素float会造成高度塌陷

方法一：给父元素添加overflow:hidden;

优点：简单明了

缺点：如果内容存在溢出会被裁切

方法二：给float的元素后边添加一个空div

设置这个div的css效果{clear:both; height:0; overflow:hidden;}

优点：如果内容存在溢出不会被裁切

缺点：不利于SEO

   方法三：万能的清除法 父元素：after{content:””；clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}

优点：内容溢出不会被裁切，有利于SEO

缺点：书写复杂

方法四：给父元素设置高度

• 伪对象（伪元素）选择器

在内容之后:after{content:””;}

在内容之前：before{content:””；}

Content后边如果添加文本需要添加引号，如果添加图片直接写url(图片路径)

第一行：first-line（针对块状元素生效）

第一个字符：first-letter（针对块状元素生效）

：：selection 可以更改网页中文字选中的效果 文字颜色、背景颜色（双冒号）

• Visibility:hidden;与display:none的区别

都可以实现元素的隐藏；display是元素隐藏的同时位置也消失，visibility元素隐藏位置保留

• 元素的宽高如何自适应窗口的宽高

Html，body{height:100%;}

元素本身设置{height:100%; width:100%;}

• Transition过渡属性

是从一个效果到另一个效果的变化过程

1s代表的是时间

写给初始的位置时：鼠标划上或离开都存在过渡效果

写给鼠标划上位置时： 只有划上存在过渡效果

过渡属性不支持display：none和display:block;