基础知识汇总

1.定位

静态定位，不能移动的元素，默认就是静态定位
            position: static;
相对定位：1.独占一行，没有脱标。
            2.相对于自己的位置进行移动。
            3.仍然占据自己的位置 
            4.如果上下都给，生效上。如果左右都给，生效左 
            position: relative;
 绝对定位：1，需要配合方位属性进行移动。
          2，已经脱标，不占位置。
           3，默认浏览器的可视区域进行移动。 
            position: absolute;
 固定定位：1，需要配合方位属性进行移动。 
          2，已经脱标，不占位置。
         3，默认浏览器的可视区域进行移动。
            position: fixed;
子绝父相：子元素为绝对定位，父元素为相对定位，绝对定位会往距离最近有定位元素的父盒子移动，一层层的找，如果包裹的盒子都没有定位元素就会往浏览器的可视区域进行移动。

2.浮动加清除浮动

       float: 浮动；（要浮动去那个方向后面就加上那个方向的英文，left， right:左右）
         浮动元素不能通过margin等方法设置水平居中
        浮动不会占用标准流的位置，相当于飘到了半空 
         浮动找浮动，下一个浮动元素会在上一个浮动元素的左右浮动
        浮动可以一行显示多个，可以设置宽高
 单伪元素清除浮动代码,转换为盒子元素才能生效：
        ::after {
            display: block;
            content: "";
            兼容性：清除低端浏览器的影响，隐藏不想给人看的代码 
            height: 0;
            visibility: hidden;
                   }
  双伪消除法 ：只能解决外边距塌陷问题,不能解决合并问题
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
 解决浮动的核心代码
        .clearfix::after {
            clear: both;
        }

3.块级元素-行内块元素-行内元素

块级元素：独占一行，可以设置宽高；
行内块元素：一行可以显示多个，可以设置宽高；
行内元素：一行可以显示多个，不可以设置宽高；
之间的转换： display: block，转换为块级元素
       display: inline-block，转换为行内块元素
       display: inline，转换为行内元素

3.背景

 background：背景
 background-position：背景图片位置
  background-color:背景颜色
 background-image: url()：背景图
 background-size: 背景尺寸
  background-position: 0 0；精灵图的应用，尺寸为负值
background建议缩写的顺序:颜色 图片 平不平铺 位置：color url("") center bottom。
颜色 图片 平不平铺 水平居中加下： background: red url("1.jpg") no-repeat center bottom;

4.字体系列

  /* 默认生效顺序从左到右，如果都没有就默认非衬线字体sans-serif */
        /* 衬线字体serif */
        /* 等宽字体 */
        p {
            font-family: 微软雅黑；黑体 sans-serif;
        } 
        p {
            /* 混合写法，注意顺序， font:style weight size family; swsf 稍微舒服 */
            font: italic 700 30px 宋体, sans serif;
        }

5.input 系列

 <!-- input > type >后面就是各种属性框 -->
    <!-- text:默认文本，用于输入文本 -->
    文本：<input type="text">
    <!-- password:密码框，用于输入密码，不显示框内内容 -->
    密码：<input type="password">
    <!-- ridio：单选框， -->
    性别：<input type="ridio">
    <!-- checkbox：多选框 -->
    爱好： <input type="checkbox">打球
    <input type="checkbox">熬夜
    <!-- file:用于选择文件 -->

7.按钮系列 input 和button

  <!-- action:提交数据到哪里 -->
    <!-- form:使包裹的按钮生效，到哪里去 -->
    <!-- form:表单 -->
    <form action="">
        ID:<input type="text" name="1"><br><br>
        账号：<input type="text" name="2"><br><br>
        密码：<input type="passwoid" name="3"><br><br>
        <!-- submit:提交按钮 -->
        <!-- reset:重置按钮 -->
        <input type="submit" value="注册">
        <input type="reset" value="重置">
        <!-- button：学习js后配合js使用 -->
        <!-- button:普通按钮，默认无功能，后面配合js使用 -->
        <input type="button" value="普通">
         <!-- button:和input标签一样的功能，但是button是双标签，多用于包裹文字和图片，
                      谷歌里面button默认为提交按钮 -->
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>

        <input type="button" value="普通">

8.选择器加权重

 优先级从低到高：         1.继承级：就是子代会继承父代的部分文体属性
                       2.通配符：就是广泛的全选，写法是一个星号 * 就是键盘数字八那里
                       3.标签选择器：就是一个标签的名字，比如div和span之类的
                       4.类标签选择器：就是一个标签里面起一个类名，要英文开头，因为数字开头或者中文都是不                           生效的.写法是class="box"  css里面点.开头
                       5.id选择器：就是给标签起一个id，但是id相当于身份证，类相当于名字，一个标签只能起                               一个id，类可以有很多个，写法是 id="box"css里面点#开头
                       6.行内属性：就是直接在HTML的结构里面书写css的属性，写法                                                   <p style="color: aqua;">1111</p>
                       7.！important,古代钦差大臣谁拿谁最大，除了继承

9.水平居中和垂直居中的方法

   1-水平居中：text-align: center
   2- 让行高等于元素高度，则会出现垂直居中 
            line-height: 400px;
   3-定位走盒子的一半，再负自己尺寸的一半也可以做到水平居中或者垂直居中
   4-垂直居中： margin: 0 auto，原理就是外边框上下是零左右自动对齐

10.各类选择器

后代选择器选中所有后代，儿子，孙子，重孙子 ，写法标签名加空格隔开*/
        div p {
            color: red;
               }
子代选择器选中儿子生效，标签名或者类名加大于号，相当于只选中儿子代，但是如果子代包裹着其他的标签会触发继承
            div>p {
            color: yellow;
                   }
并集选择器：写法就是一个名字占一排后面加逗号直到写完为止（最后一个不用写）
        h1,
        p,
        i {
            color: red;
        }
交集：既得是div  又得是box的类名 
         div.box {
            color: red;
                  } 
如果交集遇到了标签名，标签名一定要在最前面
        div.box#one {
            color: yellow;
                    }<div class="box">1111</div>
                     <p class="box">22222</p>
                      <div class="box" id="one">333</div>（333为黄色）

11.嵌套关系

大部分标签能互相嵌套,但是也有例外,比如a标签不会互相嵌套,p标签不会包裹div,但是a标签能包裹所有标签
ul标签只能包裹li标签，但是li标签可以包裹任何标签

12.继承性

 子代能继承父代的部分文体属性:指的是font里面的颜色和字体大小行高之类的,有些默认值是不能改变的,比如h标签的大小,a标签的颜色

13.内边框

 border: 3px solid yellow：边框四周线粗3像素，实线，黄色
            /* 边框实线 :solid
            /* 点线：dotted */
            /* 虚线：dashed */
            /* border-top: 2px solid red; */
            /* 边框上实线线 */
            border-bottom: 3px solid black;
            /* 边框下实线，边框线粗3像素，黑色 */

14.内外边距

padding:内边距，指盒子边缘往内到内容的距离；
margin：外边距，指盒子与盒子之间的距离；
子盒子的边缘和父盒子紧紧挨着的时候，子盒子移动会带动父盒子移动，这种现象叫外边距塌陷，解决的方法第一种
overflow: hidden;:溢出隐藏，解决塌陷现象
内外边距和border边框线都会撑大盒子，但是加个css3盒子模型就只会往内缩减，就不会撑大盒子了
  box-sizing: border-box：css3盒子模型，自动内减；

15.结构伪类加计算公式和修饰伪类

  选中第一个 
ul li:first-child {
            color: skyblue;
        } 
      选中最后一个
         ul li:last-child {
            color: red;
        } 
并集选择器写法
        ul li:first-child,
        ul li:last-child {
            color: blueviolet;
        } 
 需要选中第几个就在括号输入几
        ul li:nth-child(5) {
            color: yellow;
  计算公式
          0-8 n *2 
         0 2 4 6 8-16 偶数 even 
        ul li:nth-child(2n) {
            color: aqua;
        } 
         0 2 4 6 8-16 +1  奇数 odd 
         1 3 5 7 
        ul li:nth-child(2n+1) {
     color: blue;
修饰伪类：hover；书写方法就是类名或者便签名加：冒号后面写hover；
显示隐藏： display: block;显示
        display: none;隐藏
显示隐藏如果要写在修饰伪类里面要hover后面在写上要变那个的标签

16.伪元素

  伪元素的特点不用在html里面写多余的标签，前后用伪元素就行：before 加在前面的意思  after加在后面的意思
        伪元素是行内标签，必须属性是  content；如果要给伪元素设置宽高就要将它变为块级元素或者行内块元素。
      在盒子的前面加一个玛：
            div::before {
            content: "玛";
            display: inline-block;
            width: 100px;
            height: 100px;
            color: blue;
        }

css的各种小技巧

1.鼠标光标效果

   鼠标光标移入时变成小手:
            cursor: pointer; 
    鼠标光标移入时变成十字: 
            cursor: move;

2.圆角边框加工作的应用场景

圆角赋值一个的时候四个角生效
            border-radius: 100px;
             圆角赋值两个的时候从左上角开始顺时针走一圈，没赋值的角看对角
            border-radius: 50px 100px;
 正方形变圆形切一半宽高就行，最大生效百分之五十 
            border-radius: 50%;
 胶囊型圆切掉宽的一半就行 
            border-radius: 100px;

3.溢出隐藏

溢出隐藏 :
             overflow: hidden; 
             根据内容的多少决定是否显示滚动条 
            overflow: auto; 
            不论内容的多少都显示滚动条 
            overflow: scroll;

4.显示隐藏

                隐藏，但是占位置 
            visibility: hidden;
             彻底隐藏不占位置 
            display: none;

5.透明度

 rgb a 是背景透明 
  opacity:整个标签的透明度，包括里面的内容都能完全透明 
            opacity: 0.2;

6.边框线合并

注意: 一定要加给table标签 : 做细线表格 
            border-collapse: collapse;

7.三角形

 .box {
            /* width: 200px;
            height: 200px; */
            width: 0;
            height: 0;
            /* background-color: skyblue; */
            /* transparent: 透明*/
            border-top: 200px ridge transparent;
            border-left: 200px ridge transparent;
            border-right: 200px ridge transparent;
            border-bottom: 200px ridge olivedrab;
        }
就是给一个正方形盒子四周加上边框线，然后再将盒子的宽高撤掉，然后再一步步将边框线的颜色换成透明单词

8.获得焦点

它还很多用途，比如输入款比较短小，在里面设置宽高，用户输入的时候可以输入款变大变长，还有很多用途自己想需求

focus:获得焦点 
         光标进去获得焦点，光标出来失去焦点 
 写法：       input:focus {
            background-color: skyblue;
        }

9.伪类型，就是鼠标移入点击等生效

hover：鼠标移入时生效，需要生效什么样式自己写

a:hover
{ 
    background-color:yellow;
}

visited： 选择器设置访问过的页面链接的样式 ，需要生效什么样式自己写

a:visited
{
background-color:yellow;
}

active： 选择激活的链接样式 ，需要生效什么样式自己写

a:active
{
background-color:yellow;
}