宽高自适应

自适应

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

宽度自适应和高度自适应

（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

css（4）