css相关知识

css

html（结构）与css（样式）相分离

学习目标

1.三种引入方式

1)行内式

​

前端，你好！

2)内部样式表（内嵌样式表

​ 位置：在head标签内部，用style标签定义

3)外部样式表（样式共享）

​ 可以通过HTML的LINK元素连接到HTML文档中的.css文件

2.css基础选择器

 1..包含选择器 
         div h2{
             color: green;
         } 
2. 子元素选择器 
         div>p{                        //当a::hover属性的时候需要用到

            color: blue;
         }
3.
兄弟选择器  改变h4同级的h5的颜色
         h4~h5{
          color: rgb(16, 192, 0);
 4. 相邻选择器  改变h5相邻的h6的颜色 
         h5+h6
         {
             color: blueviolet;
}  
5.
分组选择器 不同类型标签 设置相同样式时 使用
         span,a{
            color: red;
         }

1).CSS选择器的作用：

​ 找到特定的HTML页面元素

2).CSS基础选择器

标签选择器：

​ 全部标签
​ 元素 { 属性键值对}

类选择器：

​ 一个或多个标签
特殊用法：多类名选择器

id选择器

		#id{ 属性键值对}
		类选择去和id选择器的区别：id是唯一的，只能使用一次

通配符选择器

​ *{ 属性键值对}

css3

    1.父元素当中第一个元素是否是p标签  绝对位置(也就是绝对的第一个位置)
        p:first-child {
            color: brown;
        } 
    2、:last-child
                匹配的元素是属于其父元素中的最后一个子元素
    2. 父元素当中第一个元素是否是p标签 相对位置 (也就是此时子元素里只看p元素)
        p:first-of-type{
            color: brown;
        } 
    3. 父元素当中某个位置元素是否是p标签 绝对位置  2代表具体位置  2n偶数位置  2n+1奇数位置
        h1:nth-child(2){
        }
    4.父元素当中某个位置元素是否是p标签 相对位置 
        h1:nth-of-type(2){
 
   3、:empty
                匹配没有子元素的元素
   4、:only-child
                匹配的元素是属于其父元素中的唯一子元素
   5.:checked
                 匹配表单是被选中状态的
  
   5、否定伪类
            将满足指定选择器的元素给排除出去
            :not(selector)
            tr:not(:first-child)
 

    

3.css文字文本样式

1.font字体

1.1 font-size:字体大小

1.2 font-family 字体

Unicode字体

 1.<link rel="stylesheet" href="./font/iconfont.css">//下载打包，然后在head标签里找到iconfont.css文件
 2. <span class="iconfont icon-dianhua ">用的时候
 3.
 .icon-dianhua {
 font-size:16;
 color:red
 
 }//更改样式
 
 

1.3 font-weight 字体粗细

​ normal :默认值，不加粗 400
​ bold: 粗体， 700
​ number: 100-900

1.4 font-style 字体风格

​ normal: 默认
​ italic ：斜体

1.5 font综合设置字体样式

//font: font-style font-weight font-size/line-height font-family    顺序不能颠倒，后俩必须含有
font: italic 700 20px "微软雅黑";

2.css外观属性

2.1 color:文本颜色

css颜色值主要有三种表示方法：
1.颜色名表示,比如：red 红色  ，gold 金色
2.rgb表示 ，比如：rgba（255，0，0）表示红色//表示透明度
3.16进制数值表示，比如：#ff0000  表示红色，这种可以简写成#f00 

2.2 text-align:文本水平对齐方式 tac 缩写

​ left: 左对齐默认值
​ right: 右
​ center: 居中对齐

2.3 line-height: 行间距(px)

​ line-height: 行距一般比字号大7，8 px

2.4 text-indent: 首行缩进（em）

2.5 text-decoration 文本的修饰

​ none: 默认，取消下划线
​ underline：定义文本下划线

2.6 letter-spacing

来设置字与字间距_字符间距离

4.优先级

！important>内联样式>id选择器>类选择器>元素选择器.>通配符*

5行内元素，行内块元素，块元素

!-- 1.块元素  div  p   h1-h6  
      1.默认独占一行 
      2.可以设置宽高  默认不设置宽高时 宽度是其父元素的宽度  高度是内容的高度-->
 <!--2.行元素   span  a  b strong  i  em 
      1.默认不独占一行  如果一行被占满 默认自动换行
      2.不可以设置宽高  默认宽度是内容的宽度  高度是内容的高度-->               
 <!-- 3.行内块元素 img   input  
       1.默认不独占一行  如果一行被占满 默认自动换行                    
       2.可以设置宽高  默认不设置宽高时 宽度是内容的宽度  高度是内容的高度
       3.使用img标签时，如果同时设置了 img的宽高 那么会容易出现图片失真 ,只设置其中一个属性 另外一个会自动根据比例适配-->      

6.元素的居中设置

 1.块元素居中设置 使用margin：0 auto //给块元素居中，父元素不能没有宽度，自身元素不能为浮动且 块级元素没有给宽，默认和父级一样宽,那没有给宽度的块级元素不能利用margin：0 auto；让其水平居中·
 2. 行元素不能使用margin：0 auto 居中  默认上下外边距 设置完后 无效   
   如果要居中设置  给父元素设置text-align:center 
3.行内块元素可以用这两种方式居中   
   

7.定位

1. <!-- 相对定位:1.开启相对定位元素 不脱离文档流
                 2.position: relative
                 3.开启相对定位的元素  可以使用let  top  right bottom 属性进行位置设定 
                 4.是以自身位置做为参考点移动·-->
2.  <!-- 绝对定位  
      1.开启绝对定位元素 脱离文档流
      2.position:absolute;
      3.开启绝对定位的元素  可以使用let  top  right bottom 属性进行位置设定
      4.是以设置过定位的父元素为参考点 ，如果父元素都没有设置过定位关系  那么就以body为参考
    5. 如果给一个元素开启绝对定位后.一般给其父元素开启相对定位-->   
3. <!-- 固定定位 
      1.开启固定定位元素 脱离文档流
      2.position: fixed;
      3.开启固定定位的元素  可以使用let  top  right bottom 属性进行位置设定
      4.开启固定定位的元素 是以body为参考点
    -->
4. <!-- 粘性定位：介于相对定位和固定定位之间的一种定位方式
      1.开启粘性定位元素 根据情况决定是否脱离文档流
      2.position: sticky;
      3.开启粘性定位的元素  可以使用let  top  right bottom 属性进行位置设定
      4.开启粘性定位的元素 是以body为参考点  -->
5.  静态定位    

8.伪类

 1. 连接未点击
        a:link{
            color: aqua;
        }
 2. 连接以点击过 
        a:visited {
            color: bisque;
        }
  3.当鼠标移入到a标签中时 
        a:hover{

            color: green;
        }
   4.当鼠标点击a标签中时  
        a:active{
            color: blueviolet;

        }
    
    
    
    1.父元素当中第一个元素是否是p标签  绝对位置(也就是绝对的第一个位置)
        p:first-child {
            color: brown;
        } 
    2. 父元素当中第一个元素是否是p标签 相对位置 (也就是此时子元素里只看p元素)
        p:first-of-type{
            color: brown;
        } 
    3. 父元素当中某个位置元素是否是p标签 绝对位置  2代表具体位置  2n偶数位置  2n+1奇数位置
        h1:nth-child(2){
        }
    4.父元素当中某个位置元素是否是p标签 相对位置 
        h1:nth-of-type(2){

    

9.圆角

              代表4个角度值一样时 设置一个值 
             border-radius: 30px; 

             设置两个值 代表对角线上的角设置相同的角度 
              第一个值代表 左上和右下  第二值代表右上和左下
             border-radius: 30px 60px; 
         
             设置四个值  代表左上 右上  右下 左下 
            border-radius: 10px 20px 30px 40px; 
              设置一个角度 其他角度为0  
             border-radius: 50px 0 0 0; 

             单独设置某个角 
             border-top-left-radius: 100px;

10.边框三角形的设置

原理;设置div的宽高为0；然后给边框一定的宽度，一个边框颜色为三角形的颜色，其余三个为背景颜色

11动画渐变与关键帧动画

1. 动画渐变
#divID1:hover{
            transition: all 1s linear;
            transform: translate(100px);
        }
        #divID2:hover{
            transition: all 2s ease-in;
            background-color: green;
            width: 600px;
        }
 2.关键帧动画
  div:hover{
           /* 动画名称   动画执行时间  速率  延迟执行时间  动画执行次数   infinite无限次 */
            animation: rotate1 5s linear 1s infinite;
        }
        /* 设置关键帧动画   动画名字 */
        @keyframes  rotate1
        {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            } 
        }
 

12.浮动

  浮动：1.网页中布局的一种形式 通过float 属性进行布局 left  right
         2.浮动是元素的左右布局设置   
         3.float属性没有继承关系  如果想要元素浮动  就给元素本身添加float
         4.块元素浮动之后变成了行内块元素   行元素浮动之后变成行内块元素
         5.对于浮动元素的父元素 可能会造成浮动后的一些问题 所以要清除浮动带来的影响
         6.浮动的元素脱离文档流
        7.浮动的元素停靠在父元素旁边或者已经浮动元素旁边
        8.如果左右空间不够,浮动的元素自动换行
        9.配合怪异盒模型 设置浮动效果 更容易控制浮动布局

13.清除浮动

  清除浮动带来的影响: 子元素如果使用浮动后 父元素没有设置高度时 父元素的高度会为0 
        为了解决这个问题 就要清除浮动带来的影响 
        1.给父元素添加高度
        2.给浮动元素的末尾添加 空元素 并且设置清除浮动属性  clear:both\
        3.给父元素添加overflow:hidden
        4.给父元素用单伪元素方式
        5.给父元素用双伪元素方式
  /* 单伪元素写法 */
        /* .clearfix::after{
            content: "";
            display: block;
            clear: both;
        } */

        /* 双伪元素写法 */
        .clearfix::after,
        .clearfix::before{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }

14.伪元素

1.  div::before{
         /* 在div内容之前添加行元素 */
            /* content:"abc";
            color: green;
            background-color: yellow;
            width: 100px; */
        }
2. div::after{
           /* 在div内容之后添加行元素 */
3.  /* 修改第一个字母的样式 */
        div::first-letter{
            color: red;
            font-size: 30px;
        }
        

15.标签的显示与隐藏

          /* 1.失去原有的空间*/
            display: none;
            display: block; 
            /* 2.占有原有的空间 */
             visibility: hidden;
            visibility: visible; 
            /* 3.超出边界隐藏*/
            overflow: hidden; 
            /* 4.font-size:0*/
            font-size: 0;

16.外边距穿透问题

 1. 兄弟元素 div1和div2外边距在垂直方向重叠  
          解决方式1:只给其中一个设置总值
              方式2:给下方的元素设置绝对定位
              方式3:给下方的元素转换成行内块元素
              方式4:给下方的元素设置浮动
          
  2.父子元素  垂直方向外边距重叠 
           1.给父元素添加overflow:hidden*/
           2.

17.行元素之间的默认边距解决办法

方式1 让行元素在一行排列  一旦格式化后标签会换行
方式2 给父元素一个font-size：0；然后给对应的元素大小
方式3 给元素margin左右外边距为负值

18.背景图

  /* 设置背景图片  url路径 */
            background-image: url("./index.png");
            /* 如果图片小于背景 默认会平铺效果  如果图片大于背景 显示图片一部分 */
            /* 设置不平铺 */
            background-repeat: no-repeat;
            /* 设置背景图片大小 */
             宽高都为100px 
             background-size: 100px; 
            /* 宽度100px  高度200px */
            /* background-size: 100px 200px; */
            /* 背景的宽高的一半 */
            /* background-size: 50%; */
            /* background-size: 100%; */
             设置一个值代表水平方向的位置（100px）4
                垂直方向默认居中 center*/
            /background-position:100px;  
            /* 设置两个值代表水平和垂直方向位置 */
             background-position: 200px 100px; 
             负值代表图片从右到左移动和从下到上移动   正值相反
             background-position: -10px -5px; 
            /* 设置图片在中心位置 */
            background-position: center center;
            background-position: 50% 50%;

19.vertical-align;

 该属性的作用：  vertical-align:行内元素在父元素中垂直方向的对齐方式
   baseline：默认。元素放置在父元素的基线上。
　　top：把元素的顶端与行中最高元素的顶端对齐
　　text-top：把元素的顶端与父元素字体的顶端对齐
　　middle：把此元素放置在父元素的中部。
　　bottom：把元素的顶端与行中最低的元素的底端对齐。
　　text-bottom：把元素的底端与父元素字体的底端对齐。

    因为vertical-align的默认值就是baseline，不写就默认是基线对齐。
    这也就是为什么图片和文字在同一行时，图片下方会有间距，因为默认与文字的基线对齐了
            详细参考文档:https://zhuanlan.zhihu.com/p/414111538
            https://blog.youkuaiyun.com/Aislli/article/details/117250213

20.display: flex;

10. display: flex;

//- flex-direction     决定主轴的方向
- * `row`（默认值）：主轴为水平方向，起点在左端。
    * `row-reverse`：主轴为水平方向，起点在右端。
    * `column`：主轴为垂直方向，起点在上沿。
    * `column-reverse`：主轴为垂直方向，起点在下沿。
-// flex-wrap   决定换行
- * `nowrap`（默认）：不换行。
    * `wrap`：换行，第一行在上方。
    * `wrap-reverse`：换行，第一行在下方。
- //flex-flow   flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- //justify-content    主轴上的对齐方式。
  - * `flex-start`（默认值）：左对齐
    * `flex-end`：右对齐
    * `center`： 居中
    * `space-between`：两端对齐，项目之间的间隔都相等。
    * `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
//align-items     侧轴上的对齐方式。
- * `flex-start`：侧轴轴的起点对齐。
    * `flex-end`：交叉（侧）轴的终点对齐。
    * `center`：交叉（侧）轴的中点对齐。此时如果元素没有给高度的话，默认为内容的高度
    * `baseline`: 项目的第一行文字的基线对齐。
    * `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- //align-content   多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- * `flex-start`：与交叉轴的起点对齐。
    * `flex-end`：与交叉轴的终点对齐。
    * `center`：与交叉轴的中点对齐。
    * `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
    * `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    * `stretch`（默认值）：轴线占满整个交叉轴。
// 以下6个属性设置在zi项目上。
    //`order`：属性定义项目的排列（左右）顺序。数值越小，排列越靠前，默认为0。
    * `flex-grow`： 定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
    * `flex-shrink`：  定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    * `flex-basis`：  定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
    // `flex`：  定义子项目分配剩余空间（除去没有设置宽高的盒子占据的空间）用flex来表示占据多少份。用flex`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
    // align-self`：允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。（控制子项自己在侧轴的排列方式，拥有的属性值和**align-items**   的属性值差不多）

21. 绝对定位+transformX(-50%);移动自身宽的一半

22.BFC

一、什么是BFC
1、BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。
2、BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
四、哪些元素会产生BFC
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、 display为inline-block, table-cell, table-caption, flex, inline-flex
5、 overflow不为visible

五、在布局中BFC的应用场景
（1）清除盒子垂直方向上外边距合并——盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
解决方法：
根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。
（2）在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。
解决方法：
给父元素设置overflow:hidden；的时候会产生BFC
由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。

23.元素属性的继承性

1.不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
2.所有元素可以继承的
visibility和cursor。
3.行内元素可以继承的
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
4.列表元素可以继承的
list-style、list-style-type、list-style-position、list-style-image

24. line-height设置1.5和百分之200表示什么

是指你定义line-height的那个元素的font-size的1.5倍和2倍

25.当margin为负值时，对自身和其他元素的影响

1.当元素没有宽的时候，或者width：auto
负margin-left 会增加元素的宽度
负margin-right 会增加元素的宽度
2.如果有宽度设置,margin-left和margin-right为负值时,会发生位移。
负margin-top 不会增加高度，只会产生向上位移，后面元素会跟会
负margin-bottom 不会产生位移，会减少自身的供css读取的高度,会让后面跟随元素覆盖本元素