宽高自适应
自适应
网页布局中经常要定义元素和宽和高。但很多时候我们希望元素大小能够根据窗口或子元素自动调整，这就是自适应
宽度自适应和高度自适应
（1）宽度自适应
元素宽度的默认值为（width: auto；）
min-width：；最小宽度值
max-width：；最大宽度值
（2）高度自适应
元素高度的默认值{height：auto；}
min-height：；最小高度值
max-height：；最大高度值
浮动元素的高度自适应
隐藏元素
display:none;不占位隐藏
visibility:hidden;占位隐藏
伪类元素
：:after通过伪类的方式给元素后面添加一段文本，使用content""属性
：:before通过伪类的方式给元素前面添加一段文本，使用content""属性
窗口自适应
html，body{height：100%；}
calc（）函数的使用
calc（）函数：用于动态计算长度值。
需要注意的是，运算符前后都要保留一个空格，例如：width：calc（100% - 10px）；
任何长度值都可以使用calc（）函数计算；
calc（）函数支持+ - * / 运算
calc（）函数使用标准的数学运算优先级规则；
结构伪类选择器
：first-child匹配子集第一个元素
：last-child匹配父元素最后一个元素
：nth-child( )第几个，括号里写2n或者even是选择所有偶数，括号里写2n-1或者odd是选择所有奇数
：only-child匹配比如div下只有一个p，div下面有多个p将不匹配
：root匹配文档的根元素。在HTML中，根元素永远是HTML
：empty匹配没有任何子元素（包括包含文本）的元素
目标伪类选择器
：target结合锚点
ul元素状态选择器
：enabled匹配所有用户界面（form表单）中处于可用状态的元素
：disabled匹配所有用户界面（form表单）中处于不可用状态的元素
：focus焦点 会匹配此选择器
：checked匹配所有用户界面（form表单）中处于选中状态的元素（会有默认样式）
appearance：none；去掉默认样式
：selection匹配元素中被用户选中或处于高粱状态的部分
否定伪类选择器
：not（属性）匹配所有不匹配简单选择符属性.的元素（做出相反的指令）
文本阴影
text-shadow：10px 10px 10px red ；给文本加上阴影（支持多个阴影，要加逗号）
第一个10px水平方向位移(数值越大阴影越往右移动)支持负数
第二个10px垂直方向位移(数值越大阴影越往下移动)支持负数
第三个10px模糊程度(数值越大越模糊)
第四个是阴影颜色
盒子阴影
box-shadow：10px 10px 10px 10px red ；给盒子加上阴影（支持多个阴影，要加逗号）
第一个10px水平方向位移(数值越大阴影越往右移动)支持负数
第二个10px垂直方向位移(数值越大阴影越往下移动)支持负数
第三个10px模糊程度(数值越大越模糊)
第四个10px是盒子阴影大小（数值越大阴影越大）
第五个是阴影颜色
加上inset会变成内阴影不加就是外阴影
圆角边框
border-radius: 10px;给盒子加原角（数值越大角越圆）
一个10px四个角一样
二个10px左上右下，左下右上
三个10px左上，左下右上，右下
四个10px顺时针
border-top-left-radius：10px；左上角
border-top-right-radius：10px；右上角
border-bottom-left-radius：10px；左下角
border-bottom-right-radius：10px；右下角
border-radius：30px/60px;(斜杠前是水平 斜杠后是垂直)
border-radius：10px 20px 30px 40px / 50px 60px 70px 80px
