CSS基础

CSS样式引入&优先级

1.样式表的三种引入方式
      ——（1）内部样式表     写在html文件内部的head标签中，在style中书写css样式   <style></style>
      ——（2）外部样式表     写在css文件中，通过link标签和页面建立关系     <link rel="stylesheet" >
      ——（3）内联样式/行内样式    写在标签内部，通过标签的style属性来写css,css声明写在style属性的属性值内 <p style="color: aqua;">123456</p>
    2.三种样式表生效优先级
      ——谁距离标签近，谁优先生效，后写的会覆盖先写的,所以行内样式优先生效，内部样式和外部样式表谁后写谁优先生效

常见CSS选择器

1.标签选择器  案例可看课件7
      ——作用：选中某个标签类型
      ——可以直接在选择符的位置写上标签名，作为选择器，如：p{}
    2.id选择器   案例可看课件8
      ——作用:选中页面中的某一个标签
      ——(1)需要给标签起一个id名
      ——(2)使用#id{}去修饰    例如:  <div ></div>    #xxx{}
      ——(3)注意:一个页面中不能够出现两个相同的id名,id名具有唯一性。
      ——(4)命名规则：
          ————以英文开头，由数字、大小写字母下划线组成，不能出现中文、空格、特殊符号。
          ————不能出现关键词（标签名和属性名）
    3.群组选择器   案例可看课件9
      ——作用:选中页面中的某几种标签
      ——(1)书写形式:   选择符1,选择符2,选择符3{ 声明  }
      ——(2)注意：选择符和选择器之间需要用,号间隔开
    4.class选择器/类选择器    .xxx{属性:属性值;}
      ——作用:选中页面中的某一类标签
      ——(1)先给标签定义一个class名，然后在css中 .xxx{属性:属性值;} 来进行修饰。
      ——(2)命名规则：
        ————以英文开头，由数字、大小写字母下划线组成，不能出现中文、空格、特殊符号。
        ————不能出现关键词（标签名和属性名）
    5.通配符选择器   *{属性:属性值;}
      ——作用：选中页面中所有的元素标签
    6.包含选择器 选择器1 选择器2{属性:属性值;}
      ——作用:选中选择器1下所有层级中的选择器2
      ——注意事项 选择器和选择器之间用空格隔开
    7.子选择器   选择器1>选择器2{属性:属性值;}
      ——作用:仅选中选择器1下一层的选择器2
      ——注意事项:选择器和选择器之间用>号隔开
    8.伪类选择器  a:hover{属性:属性值;}
      ——作用:修饰元素处于某种状态下的样式
      ——4中伪类选择器
        a:link{}     a标签初始状态
        a:visited{}  a标签访问后的状态
        a:hover{}    鼠标悬停时的状态
        a:active{}   a标签激活时的状态
      ——注意事项:
        (1)当4个伪类选择器联合使用时，
        应按照link-visited-hover-active的顺序使用，否则某些状态会失效
        (2):hover可以用于其他一些标签
9..伪元素选择器
（1）在xxx之前，定义元素前边添加内容样式，content不可省略
书写形式
xxx::before{
content:"";
}
（2）在xxx之后，定义元素后边添加的内容和样式，content不可省略
书写形式
xxx::after{
content:"";
}
（3）定义xxx中的第一个字符的样式
书写形式
xxx::first-letter{
样式;
}
（4）定义xxx中第一行的样式
xxx::first-line{
样式;
}
伪类
:link 超链接初始状态
:visited 超链接访问后的状态
:hover 元素划过时的状态
:active 超链接激活时的状态
伪类和伪元素之间的区别：
(1)伪类为单冒号，伪元素为双冒号;
(2)伪类是给存在的元素处于某种状态时，添加修饰;
伪元素是选中或添加不存在的元素节点，添加修饰;

10.属性选择器
      ——[属性]    选中所有标签中，拥有属性名为xx的元素
      ——E[属性]   选中E标签中，拥有属性名为xx的元素
      ——[属性D='属性值F']  选中所有标签中，属性名为D并且属性值为F的元素(仅为F)
      ——E[属性D='属性值F']  选中所有标签中，属性名为D并且属性值为F的元素(仅为F)
      ——[属性D~="属性值F"]  选中所有标签中，属性名为D并且属性值中包含属性值F的元素
      ——E[属性D~="属性值F"]  选中E标签中，属性名为D并且属性值中包含属性值F的元素
      作用：多用于表单中
    11.属性选择器——补充
      ——E[属性D^="F属性值"]   选中E标签中，属性名为D并且属性值中以F开头的元素
      ——E[属性D$="属性值F"]   选中E标签中，属性名为D并且属性值中以F结尾的元素
      ——E[属性D*="属性值F"]   选中E标签中，属性名为D并且属性值中包含关键词F的元素
      ——E[属性D|="属性值F"]   选中E标签中，属性名为D并且属性值中为F或者F-XXX的元素
    12.结构伪类
      ——E F:first-child   选中E下边的第一个子元素，如果此元素是F，则被选中，否则无效
      ——E F:last-child   选中E下边的最后一个子元素，如果此元素是F，则被选中，否则无效
      ——E F:nth-child()   选中E下边的符合某个规律的元素，如果此元素是F，则被选中，否则无效
          具体规律
              1.数字    选中E下边具体第几个F
              2.选中E下边第奇数个F  
                  2n+1===odd  
              3.选中E下边第偶数个F  
                  2n===even
              4.选中E下边倍数的F
                   Xn
      ——E F:only-child    选中E元素下,有且仅有一个的F元素
    13.根元素选择器
      html:root   匹配文档的根元素，但是在html中，根元素只有一个，那就是html
    14.空元素选择器
      E:empty   匹配内容为空的E元素，有空格和换行都不算为空
   15.目标伪类选择器
      E:target   需要搭配锚点使用，当锚点元素获取焦点时，被选中
    16.UI状态伪类选择器（多用于表单）
      E:enabled   选中E标签中的可用元素
      E:disabled  选中E标签中的不可用元素
      E:checked   选中E标签中处于选中状态的元素
    17.UI状态伪元素选择器
      E::selection  选中被用户选中或处于高亮显示的内容区域
    18.用户行为选择器
      E:focus   当元素E获取焦点的时候，被选中
    19.否定伪类选择器
      E:not(F)    选中E中除了F之外的所有元素

css文本属性

(1)font-size   文字字体大小
        ——单位 px  em  rem(多用于移动端)
        ——默认字体大小为16px
        ——浏览器支持的最小字体大小为12px
        补充:1em=父元素字体大小
      (2)font-family   文本字体
        ——属性值可以跟三种字体，每种字体之间用,号间隔开，
        当计算机支持第一种字体显示第一种，若没有第一个字体，显示第二个。
        依次进行匹配，如果都没有，显示计算机支持的默认字体(windows是微软雅黑)
        ——若字体名称时中文，需要加引号
        ——若字体名称是有多个单词组成，也需要加引号
      (3)font-style    文本风格(是否倾斜)
        ——oblique和italic都可以倾斜，但是italic是斜体，部分字体不支持，
        所以我们一般使用oblique来进行倾斜
        ——normal  不倾斜(默认值)
      (4)font-weight   文本粗细
        ——取值范围是数字时   取值范围100-900,
            ——100    细体
            ——400    默认值
            ——700    加粗
            ——900    极粗
        ——取值还可以是单词  
            ——normal 常规(默认值)
            ——bold   加粗
            ——bolder 极粗
      (5)color    字体颜色
        ——计算机中的三基色是红绿蓝
        ——色值为颜色单词，例如red,green,blue
        ——色值为16进制,取值范围为0-9A-F ,例如#ff0066;
        ——色值为rgb(红色色域,绿色色域,蓝色色域),每个色域的取值范围 0-255,例如rgb(255,255,0);
        ——色值为rgba(红色色域,绿色色域,蓝色色域,透明度)每个色域的取值范围 0-255 ,透明度的取值范围为0-1，例如rgb(255,0,0,1)
      (6)text-align  文本对齐方式
        ——left      左对齐
        ——right     右对齐
        ——center    居中
        ——justify   两端对齐，多用于大段文本，对文本的最后一行无效
      (7)line-height  文本行高
        ——当文本为多行文字时，可以用来规定每行文字所占据的高度
        ——当文本是当行文本时，可以用其进行垂直居中
          单行文本的几种情况：  
          ——当行高等于元素的高时，文字居中显示
          ——当行高小于元素的高时，文字中间偏上显示
          ——当行高大于元素高时，文字中间偏下显示
      (8)text-indent   首行缩进
          ——只对文本的第一行生效
          ——值可以为负值
      (9)text-decoration  文本修饰
          —— none   取消文本修饰(用的最多，多用于取消a标签默认样式)
          —— underline    添加下划线
          —— overline     添加上划线
          —— line—through 添加删除线
（10）自定义字体
      案例:
      @font-face{
        font-family:"12138";
        src: url(../images/ARDECODE.ttf);
      }
      p{
        font-family: '12138';
      }
给字体起个名字，并引入路径。然后这个字体就创建完了，接下来在页面中就可以使用你定义的这个字体名称了。

列表属性

list-style-xx （但是现在我们基本不适用此属性来书写li前边的小图标）
          ——list-style:none;     取消li的默认样式

边框  border

——（1）复写形式  border:border-width border-style border-color;
          ——border-width            边框宽度
          ——border-style            边框风格
              ——solid(实线)/dashed(虚线)dotted(点划线)double(双线)none(去掉边框);
          ——border-color            边框颜色
          ——注意事项:以上三个属性都可以跟四个属性值
              （1）一个参数    定义了四个方向的样式
              （2）两个参数   第一个值上下样式   第二个值左右样式
              （3）三个参数   第一个值上   第二个值左右  第三个值下
              （4）四个参数    第一个值上   第二个值右  第三个值下 第四个值为左
        ——（2）单方向边框
          border-left     左边框
          border-right    右边框
          border-top      上边框
          border-bottom   下边框
          ——因为单独使用以上三个属性，样式不生效，所以一般我们用复写形式来书写;

边框圆角    border-radius
      属性值：
          （1）四个值
              1个值    4个角的圆角尺寸
              2个值     第一个为左上、右下，第二个值为右上、左下
              3个值     第一个值左上，第二个职位右上、左下，第三个值位右下
              4个值     第一个值左上，第二个职位右上，第三个值位右下，第四个值为左下
              是按照从左上角开始，顺时针方向添加的圆角
          （2）百分比或宽高的一半
              1.当盒模型为正方形时，值为50%或者宽高的一半，为圆形
              2.当盒模型宽高比为长方形时，值为50%，为椭圆;值为宽度的一半或者高度的一半时，为跑道形
          （3）分别设置圆角宽高半径
                例如 border-radius:10px/20px    四个角水平圆角水平半径为10px,垂直半径为20.
                设置4个角不同情况时，案例：  border-radius:10px 30px 50px 70px/20px 40px 60px 80px;

background          背景属性

——background-color    背景色
          如果同时存在背景图和背景色，则优先显示背景图
        ——background-image    背景图
          （1）当背景图比元素大时，背景图被裁切显示
          （2）当背景图比元素小时，背景图会进行平铺
          （3）当背景图和元素一样大时，背景图正好完全显示
        ——background-repeat   背景图是否平铺
            repeat       平铺(默认值)
            no-repeat   不平铺
            repeat-x    x轴平铺
            repeat-y    y轴平铺
        ——background-size 背景图大小
            1.值可以是具体的宽高单位
            2.值可以是百分比
            3.cover   将图片进行拉伸，直到图片的最短边充满屏幕，一般图片会被裁切
            4.contain 将图片进行拉伸，直到图片的最长边充满屏幕，一般盒模型会有留白
        ——background-position   背景图定位
            可以跟两个值，第一个值为x轴的移动距离，第二个值为y轴的移动距离
            当仅写一个值时，默认Y轴距离为center
            (1)当两个值为像素单位时（px）
              x轴方向上，当值为正数，向右移动;值为负，向左移动
              y轴方向上，当值为正数，向下移动;值为负，向上移动
            (2)他的值还可以是关键词
              x轴关键词   left、right、center
              y轴关键词   top、bottom、center
        ——background-attachment   背景图固定
          ——scroll    滚动（默认值）    背景图会随着页面元素滚动而滚动
          ——fixed     固定             背景图固定显示在一个位置，不随滚动条发生移动
        ——background  复写形式
          background:background-color(可以省略) background-image background-repeat background-position/background-size;
          例如：background:red url(../xxx.xx) no-repeat center/cover;
注意：
background的多背景图案例
        案例：background: url(../images/234.jpg) no-repeat,url(../images/345.jpg) no-repeat;
        每组背景图用逗号间隔开，谁先写谁在最上边，如果设置背景色，则背景色在最下边。

浮动属性

含义:浮动就是让元素漂浮,让元素飘起来,
                作用:主要是让布局元素,横向显示改变排列方式
                属性:float;
                取值:none========默认值,不浮动,元素是怎么排列就怎么排列
                     left=======左侧浮动
                     right======右侧浮动
                浮动的特点
                    1.(兄弟)如果前面的盒子左浮动,后面的元素会上去补位置,====(半)脱离文档流
                    2.如果兄弟元素都添加浮动的话,元素都会脱离文档流,并且会挨着横向显示
                        如果都是左浮动:会从左侧开始向右排
                        如果都是右浮动,会从右侧开始向左排
                    3.如果,盒子都添加浮动,后面的剩余控件不够最后一个盒子排列了,会折行显示
                    4.浮动后的元素补位置,会以右侧预留控件补位为先
       
                    作用:就是让元素横向排列,解决布局问题===问题
                    浮动会给后面的元素带来影响===补位
                        不让上去补位置
                            清除浮动:清除浮动带来的影响(补位影响)
                            clear:
                                none=======不清楚浮动带来的影响
                                left=======清除左浮动带来的补位影响
                                right======清除右浮动带来的影响
                                both=======清除两个浮动带来的影响
                浮动产生的影响:
                    如果父元素没有固定的高度的话,子元素添加浮动,后面元素上去补位置,父元素的高度默认会降低
                        =====效果被称之为:高度塌陷
                        如何解决高度塌陷:
                            1.可以设置固定的高度
                                弊端:如果内容过多的话会溢出
                            2.清除浮动,不让补位元素补位,
                                弊端:如果父元素里面只有一个子元素,没有补位元素,如何清除???
                            3.我可以再浮动元素的后面悄悄的补一个元素
                                补的这个元素,应用清除浮动,但是这个元素类型必须是块元素
                                    以div为主
                            4、给父元素添加overflow:hidden
                                触发一个BFC形成一个独立的区域，不收到外界干扰，也不会把内部的设置影响到外界
                                同时还能让浮动的元素参与高度的计算用于解决高度塌陷
                               
                            5.万能清除法

盒模型

1.padding    内间距/内填充
      表现形式：出现在内容区域和边界之间，用来确认内容区域和边界之间的间隔
        注意事项:(1)内容区域不会显示在padding上
                (2)padding颜色会和内容区域保持一致
                (3)padding-left/padding-right/padding-top/padding-bottom分别定义左右上下四个方向的内填充
                (4)padding也支持多个属性值:
                  ——1个值     四个方向上的内填充
                  ——2个值     第一个值为上下方向的内填充   第二个值为左右方向的内填充
                  ——3个值     第一个值为上方向的内填充   第二个值为左右方向的内填充  第三个值为下方向的内填充
                  ——4个值     第一个值为上方向的内填充   第二个值为右方向的内填充  第三个值为下方向的内填充   第四个值为左方向的内填充
                (5)padding也可以用来确认父元素和子元素之间的间距，注意padding值需要加给父元素。（会改变盒子的总大小，如需保持不变，可以在宽度上减去加上的padding值）
      2.margin   外边距
        作用:用来确认元素与元素之间的间距
        注意事项:
          (1)当给父元素下的第一个子元素添加magin-top时，会出现在父元素身上
              解决方法:添加overflow:hidden;
          (2)当元素未浮动时，相邻的两个元素之间的margin-top和margin-bottom之间会发生重叠，以较大的为准
          (3)当元素浮动排成一排时，相邻的两个元素之间margin-left和margin-right之间不会重叠，相加显示间距
          (4)margin-top/margin-bottom/margin-left/margin-right分别定义上下左右四个方向的外间距
          (5)margin也可以支持多个值，详细参考padding(但是一般我们不怎么使用多个值)。
              ——当我们使用一个值时，优先确认左间距和上间距。
              ——当一排只有一个元素时，我们可以使用margin: xx auto;使其水平位置居中
              ——通常我们使用margin单一属性较多
      3.标准盒模型计算
          实际宽度计算:左右border+左右的padding+width;
          实际的高度计算:上下的border+上下的padding+height
      4.怪异盒模型
        box-sizing:border-box;   将标准盒模型转换为怪异盒模型
        实际宽度计算    width=content+左右padding+左右border
        实际高度计算    height=content+上下padding+上下border

溢出处理

1.overflow  溢出属性
            1.hidden   溢出元素隐藏
            2.scroll;    元素显示滚动条，
              ——弊端：不论元素是否可以放下，都会出现滚动条
            3.auto      元素显示自适应
              ——当元素内容能够放下时，不出现滚动条。当元素内容超出时，显示滚动条
            4.visible   默认值
            5.inherit   继承父元素的overflow属性，父元素设置什么属性值，他就按照什么去进行显示
          2.汉字  一个汉字为一个字符，遇到边界自动折行
          3.单词   一个单词算一组，若单词过长，则不换行显示。 单词和单词之间是由空格来区分的。

white-space    空白空间

1.pre        文字不换行，识别多余空格
      2.pre-warp   文字换行，识别多余空格
      3.pre-line   文字换行，不识别多余空格
      *4.nowrap     文字不换行，不识别多余空格
      5.inherit     继承父元素的white-space属性
      *6.normal     默认值   文字识别换行，不识别多余空格

文字溢出显示省略号

text-overflow  省略号显示
      ——1.clip   默认值
      ——2.ellipsis    显示省略号
      注意：text-overflow  单独使用无效，需要搭配使用，具体案例如下
        单行文本溢出显示省略号:
                      设置宽度，规定边界在哪
          white-space: nowrap;      设置文本内容不换行，一行显示
          overflow: hidden;         溢出元素隐藏
          text-overflow:ellipsis;   显示省略号

元素类型&元素类型转换

1.元素类型
      ——(1)块元素
          ——默认独占一行
          ——通常情况纵向显示
          ——可以定义宽和高,宽度默认为100%
          ——通常当做元素容器，可以用来存放块元素、内联元素和内联块元素,P标签除外，通常我们把他看做一个盒子
          ——p标签比较特殊，他不能用于存放块元素，只能用于存放内联元素和内联块元素
          常见标签为:div/p/h1-h6/ul/ol/li/dl/dt/dd...
      ——(2)内联元素/行内元素
          ——默认不独占一行
          ——通常情况横向显示
          ——不可以定义宽和高，宽和高由内容撑开，内容有多大，宽高就有多大
          ——内联元素的padding、margin、和border比较特殊。
              解释:padding、margin、border左右方向上没啥问题，但是上下方向上只存在视觉效果，不具备布局功能
                  具体如下:(1)margin-top/padding-top/border-top设置无效，
                          (2)margin-bottom/padding-bottom/border-bottom只存在视觉效果，不存布局效果
          常见标签：em、i、strong、b、sup、sub、del、s、span、a
      ——(3)内联块元素/行内块元素
          ——默认不独占一行，通常横向显示
          ——可以定义宽和高
          常见的内联块元素：img/input/textarea/select
    2.元素类型转换   display
      属性值:
        (1)block;       将元素转换成块元素    （块元素的display默认值）
        (2)inline;      将元素转换成内联元素   （内联元素的display默认值）
        (3)inline-block;将元素转换成内联块元素  （内联块元素的display默认值）
        (4)none;        将元素隐藏
      补充：float自带元素类型转换，不管浮动前是什么元素类型，浮动后都转换成块元素;

垂直对齐方式

vertical-align   垂直对齐方式
      ——对内联块和内联元素生效，通常我们可以用他来对齐图片或者进行图片和文字的对齐
        top       顶线对齐
        middle    中线对齐
        baseline  基线对齐（inline-block默认值）
        bottom    底线对齐
        日常使用:
        1.vertical-align: top;可以解决块元素和内联块元素之间的三像素间距（将内联块转换成块元素也可以解决此问题）
        2.对齐文字和图片
        3.对齐图片和图片   （中线对齐）

定位属性

1.定位属性 position
      ——relative   相对定位
        (1)不脱离文档流（移动就移动了，不会影响到下边的元素的位置关系）
        (2)相对于自身原有的位置进行定位
        (3)偏移量支持四个方向，上和下同时定义，上优先生效，左右同时定义，左优先生效。支持负值
         
      ——absolute   绝对定位
        (1)脱离文档流（添加absolute之后就不占据当前文档空间了，下边的元素就占据了他原本的位置）
        (2)针对于定位父级进行定位，如果父元素有position:relative;针对于父元素定位，若没有，
        则往上接着找，一层一层寻找，直到找到位置。若一直没有找到，则针对于整个文档进行定位。
        我们可以把拥有position:relative的父级理解为定位父级。
        (3)偏移量支持四个方向
           
      ——fixed     固定定位
        (1)相对于浏览器的可视窗口进行定位，固定在浏览器的某个位置，滚动条无法对其造成影响。
        (2)脱离文档流
      ——sticky    粘性定位
        (1)当达到规定的临界值偏移量时，位置就会保持不变。针对于离自己最近且有滚动条的父元素进行定位。
        (2)不脱离文档流，原本占的位置还存在。
        (3)一般我们可以用其做吸顶效果。
    2.偏移量
            top       上
            bottom    下
            left      左
            right     右
    3.z-index    定位元素层级
      (1)当不设置z-index时，根据元素标签的书写顺序显示，同级元素中谁的元素标签靠下，谁优先显示
      (2)设置z-index时，谁的z-index数值大，谁的层级高。
      (3)z-index的值可以为负值，同级中，负数也可以参加对比。
        注意：此属性只对定位元素生效
    4.float和position区别
      ——float半脱离文档流，当发生覆盖时，元素盒模型会发生覆盖，但是文字内容会围绕浮动元素四周显示
      ——positon:absolute  完全脱离文档流。  
            ——当定位元素发生覆盖时，相互之间会完全覆盖，可以使用z-index来调整层级关系。
    5.宽度自适应的元素添加position:absolute、float时，宽度会随文字改变而改变。
    6.元素水平垂直居中
      (1) width:xx;
          height:xx;
          position:absolute;
          left:50%;
          top:50%;
          margin-left: 负的二分之一width;
          margin-top:负的二分之一height;
         
      (2) position:absolute;
          top:0;
          left:0;
          bottom:0;
          right:0;
          margin:auto;

锚点

命名锚点的作用：在同一页面内的不同位置进行跳转。
          锚点链接语法：
      (1)给元素定义命名锚记名
        语法：<标记 > </标记>
      (2)命名锚记连接
        语法：<a >链接文本或图片</a>

透明  opacity

opacity:0.5;    (value的取值范围0-1 0.1,0.2,0.3-----0.9---1)

表格的CSS样式

1.表格中的css属性
        (1).border-collapse    是否合并边框线，仅支持table使用
          collapse         合并边框线
          separate         不合并边框线（默认值）
        (2).border-spacing     单元格之间的间隙
        补充：1和2两个css属性合起来可以达到标签属性中的cellspacing的作用
        (3).padding          单元格内填充
            宽度受table写的宽度限制，高度不受table写的高度限制，table只是定义初始的高度，
            实际高度看每个单元格的具体高度,若想要添加单元格的内填充，则不能够限制table的宽度，
            否则padding左右不生效。
        (4).empty-cells   空白单元格显示隐藏      需要在未合并单元格边框时使用
          hide     隐藏
          show     显示
        (5).table-latout    表格布局算法（是否自适应空间宽度）
          auto          自适应空间宽度，内容多的多占空间，少的少占空间
            优势：不用担心内容太多超出单元格
            劣势：会打乱我们制定的布局结构
          fixed
            优势：不会打乱我们的布局结构
            劣势:当内容过多时，文字内容会超出单元格
     2.表格补充标签
        caption 表格的标题标签，需要放在table中
        表格的行分组
          thead    表格标头   可以不写
          tbody    表格主体，一个表格中存在一个，就算不去写，表格也会补全出来
          tfoot    表格表尾   可以不写
        表格的列分组
          colgroup  表格列分组  
            span   将几列分为一组

布局--宽度自适应：

1.定义: 不去定义固定宽度，固定自适应，随着浏览器窗口或者说父元素的大小改变而改变。
      2.默认值  width:auto;(100%)
      3.用途：(1)版心和通版、(2)子元素占据父元素百分百时。

布局-高度自适应

高度自适应：
      1.概念：不写固定高度，高度由内容区域和子元素撑开，若内容区域无内容或者无子元素，则没有高度。
      2.默认值   height:auto;  auto表现形式为内容区域的高度。
      3.优势:
        （1）不会出现子元素超出父元素高度的情况，能够一直和子元素内容高度保持一致。
        (2)避免了父元素写高度，子元素高度超出会覆盖下边兄弟元素问题。
        （3）方便好用
      4.劣势:
          (1)当元素内容过段时，样式较为难看。
            解决方法：min-height;
          (2)浮动遇到的问题:当父元素不写高度，子元素浮动时，会造成高度塌陷。
              ——1.给父元素写高度   劣势：就不满足高度自适应。
              ——2.添加overflow:hidden;    劣势：如果元素内容超出父元素时，将会被隐藏。
              ——3.clear:both;             用于清除同级元素给未浮动元素造成的影响，如果同级元素全部浮动，父元素依旧会塌陷。
              ——3plus. 子元素全部浮动时，给子元素添加一个同级的空元素，将此元素宽高设置为0（在页面中不显示出来），
              再给此元素clear:both能够解决塌陷。   弊端为：页面中若多次使用的话，会多出来很多空标签。
              ——4.万能清除浮动法
                xxx::after{
                  content:"";
                  display:block;
                  height:0;
                  clear:both;
                  overflow:hidden;/visibility: hidden;
                }

元素的隐藏

1.display:none;  元素转换成隐藏元素，元素不可见，不占据原本空间，不可被选中
      2.visibility
        ——visible   元素显示（默认值）
        ——hidden    元素消失   该元素消失不可见，但是还占据原本空间位置，不可被选中
      3.opacity:0;    元素隐藏，但是是通过透明隐藏的，元素还占据原本的空间位置，可以被选中
          0-1;   取值范围，0为完全透明，1为不透明
      4.height:0;
      5.transform:scale(0)   缩放为0倍大小    占据原本的空间，不可被选中

元素透明

1.transparent   透明色  
        通过写成背景色，达到元素透明的效果，但是如果元素内有内容，无法将内容也透明。
      2.rgba(255,255,255,0)   透明色  
        rgba中的a为透明度，也是通过写成背景色，达到元素透明的效果，但是如果元素内有内容，无法将内容也透明。
        ——rgba中的a的取值范围为0-1,0为全透明，1为不透明
      3.opacity   元素透明
        取值范围为0-1   0为全透明  1为不透明
        效果为当前元素完全透明，包括其内部的内容和子元素，整体都会透明。完全透明时，依旧占据原本的空间。
      4.若只想背景透明，内容不透明，用transparent和rgba()实现，
        若想元素内容、颜色、子元素都透明，使用opacity实现。

布局-最大最小宽高

1.min-width      最小宽度

2.min-height     最小高度
    3.max-width      最大宽度
    4.max-height     最大高度
    总结:定义以上属性后，若没有子元素，并且不去写宽高，宽度按照max-width显示，高度按照min-height显示。
    若定义子元素，子元素的宽度高度若超过最大宽高限制，则当前元素按照max-width和max-height去显示
    若定义子元素，子元素没有超过最大的高度，则按照子元素的高度显示，若子元素低于min-height，则按照min-height显示。
    若定义子元素，子元素的宽度超过最大宽度，当前元素按照max-width显示，若子元素宽度没有超过，则还按照max-width显示。
    若给当前元素设置了一个小于min-width的宽度，则按照min-width显示。
注意：
height:100%;继承父元素的高度，但是高度没有默认高度，都是由子元素撑开，这时候height:100%;无效，
    需要给body,html{height:100%},才能够实现。

阴影

1.文本阴影属性  text-shadow
      属性  text-shadow:v-shadow h-shadow blur color;
          v-shadow   水平方向上的阴影，为正向右偏移，为负向左偏移
          h-shadow   垂直方向上的阴影，为正向下偏移，为负向上偏移
          blur       模糊距离，值越大越模糊，不可为负
          color      阴影颜色
      注意事项：可以跟多个阴影，每组之间用逗号间隔开。
    2. 盒子阴影属性  box-shadow
      属性 box-shadow:v-shadow h-shadow blur spread color inset;
          v-shadow(必选)   水平方向上的阴影，为正向右偏移，为负向左偏移
          h-shadow(必选)   垂直方向上的阴影，为正向下偏移，为负向上偏移
          blur(可选)       模糊距离，值越大越模糊，不可为负
          spread(可选)     阴影大小，为正四个方向都放大，为负四个方向都缩小
          color(可选)      阴影颜色
          inset(可选)      设置内阴影

渐变

1.渐变的概念：
        CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
      2.线性渐变   linear-gradient      朝着某一个方向呈线性渐变
          ——background: linear-gradient(to right,red,blue,yellow,aqua);
              （1）background: linear-gradient(去什么方向,开始颜色,中间颜色,中间颜色,结束颜色);
              （2）方向可以省略不写，默认为 to bottom(从上到下)
              （3）颜色可以写多个，至少写俩。第一个颜色为开始位置的颜色，第二个颜色为结束位置的颜色。
              （4）写单一方向（to right），则是朝某一方向渐变；写两个方向（to right bottom），则朝某个角渐变;
              （5）方向还以是角度，0deg==to top;45deg==to top right;90deg==to right;135deg==to right bottom;
                                180deg==to bottom; 225deg==to left bottom; 270deg==to left;315deg==to left top;360deg==to top;
              （6）非规律性渐变  （颜色后边跟百分比，这个百分比就是这个颜色的位置）
                    background: linear-gradient(red 0%,blue 50%,yellow 100%);
      3.径向渐变  radial-gradient  
          概念:径向渐变是从“一个点”向四周的颜色渐变
          案例: background: radial-gradient(red,blue,yellow);
          默认：
            （1）在正方形中，镜像渐变呈圆形，在长方形中，镜像渐变呈椭圆形
            （2）第一个颜色为最内颜色，最后一个颜色为最外颜色。
            （3）默认发散点在正中心
          案例2：background: radial-gradient(渐变位置点,渐变形状，渐变大小,red,blue,yellow);
            （1）如果需要用到（渐变位置点,渐变形状，渐变大小），需要加浏览器前缀，如谷歌和苹果 -webkit-
            (2) 渐变点可以写两个值，用空格隔开，第一个值为渐变位置的x轴坐标，另一个渐变位置的y轴坐标
            (3)渐变大小它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
            (4)渐变的形状，默认是椭圆形（正方形设置渐变点的位置可以看出来）,circle可以改变为圆形。
          非规则渐变案例:
            background: radial-gradient(red 5%,blue 10%,yellow 70%);
      4.重复渐变
        （1）重复线性渐变 repeating-linear-gradient(色值1 x%,色值2 y%,色值3 z%,)
          案例background: repeating-linear-gradient(red 0%,blue 10%,yellow 20%);
        （2）重复镜像渐变 repeating-radial-gradient(色值1 x%,色值2 y%,色值3 z%,)

过渡   transition

概念：css3的transition允许css的属性值在一定的时间区间内平滑地过渡。需要触发条件，才能看到过渡效果。
        格式：   transition:all 5s linear 3s;
              1.第一个参数为参与过渡的元素，all为全部参与过渡，它还可以是单个的属性
              2.第二个参数为过渡时间
              3.第三个参数为过渡速率
                  ease               逐渐减速
                  ease-in            加速
                  ease-out           减速
                  ease-in-out        先加速后减速
                  linear              匀速
                  steps               分步骤
                  cubic-bezier()     贝赛尔曲线   贝塞尔曲线网址：http://cubic-bezier.com/
              4.第四个参数为过渡的延迟时间
              5.注意：当transition写给划过后，失去划过状态则立刻恢复。若写给原本的元素，则恢复也有过渡过程。

2d效果

1.transform   位移      跟position效果差不多
          ——1.translate    控制元素X轴Y轴位移，第一个参数为X轴位移，第二个参数为Y轴位移，写一个参数时，默认Y轴为0
          ——2.translateX   控制元素X轴位移
          ——3.translateY   控制元素Y轴位移
            ——当代表X轴的数字为正时，向右移动，为负时，向左移动
            ——当代表Y轴的数字为正时，向下移动，为负时，向上移动
        2.scale     2d缩放    
          形式：transform:scale(x,y)
          ——1.当括号内写一个值，等比缩放。
          ——2.当括号内写两个值，宽按照第一个值进行缩放，高按照第二个值进行缩放。
          ——3.默认值为scale(1,1)  当值大于1，放大;当值小于1，缩小
          ——4.当值为负值时，先缩小，再翻转，再放大。
        3.rotate   2d旋转
          形式: transform:rotate(xxdeg);
          ——1.值为度数，默认顺时针，沿中心点旋转。
          ——2.当值为正数时，顺时针旋转，当值为负数是，逆时针旋转。
          ——3.transform: rotateX(XXdeg);沿X轴旋转
          ——4.transform: rotateY(XXdeg);沿Y轴旋转
        4.skew    2d倾斜
          形式：transform:skew(xxdeg)
          skew(xxdeg)控制X轴Y轴的倾斜，第一个参数为X轴倾斜角度，第二个参数为Y轴倾斜角度，写一个参数时，默认Y轴为0deg;
          skewX()控制X轴倾斜，  skewY()控制Y轴倾斜
        5.transfrom-origin     2d转换原点
          （1）默认为transfrom-origin(center,center);
          （2）第一个控制转换原点X轴位置，第二个点控制转换原点Y轴位置
          （3）当不写第二个值时，默认补全一个center
          （4）值可以是关键词，还可以是具体数值
          （5）值可以为负，当为负数是，转换原点在转换元素之外
        6.2d多属性同时添加格式:
          transfrom:2d效果1 2d效果2;
          注意:当位移和旋转同时使用时，一般我们将位移放在前边。

动画

css3中CSS3属性中有关于制作动画的三个属性：transform,transition,animation
        其中transform,transition可以完成一个2d的过渡动画，但是需要一个触发条件，所以严格意义上来说他不属于真正的动画
        1.@keyframes 关键帧动画
        第一种形式:
            @keyframes zhangsan{
                from   定义他的初始样式
                 
                 
                to     定义的他的最终样式
                 
                 
              }
               @keyframes luoxiang{
                0%{定义他的初始样式
                 
                 
                }  
                25%{
                }
                50%{
                }
                75%{
                }
                100%{定义的他的最终样式
                 
                 
                }        
              }
        2.animation  添加动画
        案例:animation: zhangsan 1s linear 2s infinite alternate paused;
            ——1.animation-name              设置所应用的动画名称
            ——2.animation-duration          动画的持续时间
            ——3.animation-timing-function   动画运动的速率
                  *linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
                  ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
                  ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
                  ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
                  ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
                  steps()        定义步数
                  贝赛尔曲线
            ——4.animation-delay             动画延迟的时间
            ——5.animation-iteration-count  动画的循环次数
                  *infinite：无限循环
                  number: 循环的次数
            ——6.animation-direction  检索或设置对象动画在循环中是否反向运动
                  normal：正常方向
                  reverse：反方向运行
                  *alternate：动画先正常运行再反方向运行，并持续交替运行
                  alternate-reverse：动画先反运行再正方向运行，并持续交替运行
            ——7.animation-play-state  检索或设置对象动画的状态
                  running:运动（默认值）
                  *paused: 暂停
                  注意:我们一般情况下不写这个属性，一般写给他满足某种条件下生效

标准盒布局

box-sizing:content-box;
          1.实际所占空间大小==(content==width)+padding2+border2
          2.相当于说，标准盒模型的边框和padding是加在width之外的

怪异盒布局

box-sizing:border-box;
          1.(实际所占空间大小==width)  width==content+padding2+border2
          2.相当于说，怪异盒模型的边框和padding是加在width之内的
          3.特点：
              (1)便于计算;
              (2)标准盒模型的浮动元素书写边框时，随着页面缩小，浮动元素放不小会往下掉，怪异盒模型能解决这个问题。

弹性盒布局

display:flex;（父元素添加）
          1.通过display:flex;将当前元素变成一个弹性盒，此元素下的第一层子元素都变成弹性布局元素（仅限于第一层）;
          2.弹性盒中，拥有一个水平的主轴和垂直的交叉轴。
          3.主轴默认横向排列，交叉轴永远垂直于主轴。
          4.弹性布局元素（父元素添加display:flex），添加浮动无效,一般，我们也不会再去使用定位
          ——注意：如果子元素不是块元素，则将子元素隐式转换成块元素;
          5.flex-direction  改变主轴的方向（父元素添加）
            ——*column   将主轴变为纵向
            ——column-reverse   将主轴变为纵向靠下排列，第一个元素在最下侧
            ——row      将主轴变为横向
            ——row-reverse      将主轴变为横向靠右排列，第一个元素在最右侧
          6.justify-content    弹性元素主轴对齐方式（父元素添加）
            ——flex-start        沿着主轴开始的方向对齐
            ——flex-end;         沿着主轴结束的方向对齐
            ——center            在主轴中间对齐
            ——space-between     沿着主轴两端对齐
            ——space-around      沿着主轴环绕式对齐
          7.flex-warp    弹性布局元素（父元素添加display:flex）是否换行显示
            ——warp        折行显示
            ——nowarp      不折行显示
            补充:父元素变成弹性盒，如果子元素过多，默认是不会折行的，会产生挤压效果，子元素默认平均分配宽度
          8.align-items     弹性元素侧轴当前行每个元素对齐方式（父元素添加）
            ——flex-start    当前行每个元素纵轴开始位置对齐
            ——flex—end      当前行每个元素纵轴结束位置对齐
            ——center        当前行每个元素纵轴中间位置对齐
            ——baseline      当前行每个元素纵轴文字基线位置对齐
          9.align-content    弹性元素当前行整行的侧轴对齐方式（父元素添加）
            （1）单行，父元素不写高，无效
            （2）单行，父元素写高，整行对齐方式
            （3）多行，父元素写高，整行对齐方式整体靠那个方向
            （4）多行，父元素不写高,无效
           
          10.align-self   当前弹性元素的侧轴对齐方式（写给子元素的，可以重写父元素定义的侧周对齐方式）
              取值参考align-item
          11.order    弹性元素排序优先级（写给子元素）
              number排序优先级，数字越大越往后排，数字越小越靠前，默认为0，支持负数。
          12.flex     flex-shrink、flex-grow、flex-basis的复合属性，默认值为flex:0 1 auto;(写给子元素)
              (1)复合属性的每一项内容:
                ——flex-shrink 为flex元素是否收缩，0是不收缩，1为收缩，默认值为1  
                ——flex-grow 为flex元素是否放大，0是不放大，1为放大，默认值为0
                ——flex-basis 为flex元素在主轴上的长度;默认值为auto,显示效果为按照元素原本的主轴长度显示;
                值还可以是具体的px数值，显示效果为按照flex-basis设置的长度显示
              (2)flex的各个缩写形式
                ——flex:1;为flex:1 1 auto;的缩写形式
                ——flex:0;为flex:0 0 0;的缩写形式
                ——flex:none;为flex:0 0 auto;的缩写形式

css3布局

*1、column-count    定义将元素分几列
          说明：属性规定元素应该被分隔的列数
          适用于：除table外的非替换块级元素, table cells, inline-block元素
          *2、column-gap   列与列之间的间隔
          说明： 属性规定列之间的间隔大小
          *3、column-rule  列与列之间的间隔线
          说明：设置或检索对象的列与列之间的边框。复合属性。
            column-rule-color规定列之间规则的颜色。
            column-rule-style规定列之间规则的样式。
            column-rule-width规定列之间规则的宽度。
          4、column-fill    列高度（不常用）
          说明：设置或检索对象所有列的高度是否统一
              auto：列高度自适应内容        需要搭配高度使用，设置之后，有限填充第一列，再去填充下一列  
              balance                       每列的高度均保持一致
          5、column-span   写给内部元素的，决定当前元素是否横跨所有列
          说明：设置或检索对象元素是否横跨所有列。
              none：不跨列
              all：横跨所有列
          6、column-width  设置每列的宽度，和column-count有冲突。谁大谁显示
          说明：设置或检索对象每列的宽度