前端之CSS学习|青训营笔记

弗拉明戈
144 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

什么是CSS

CSS是用来定义页面元素的样式。网页为层级结构，CSS为每层设置样式，用户只能看到最上面一层的效果。

CSS是什么.png

CSS 是如何工作的

CSS工作原理.png

工作步骤如上图所示，具体分为：

  1. 浏览器加载html文件并解析；
  2. 一方面，解析文件生成DOM树，获得页面基本结构；
  3. 另一方面，解析文件加载所有css样式，解析后将这些样式添加到DOM节点中，得到渲染树，即渲染树中包含了每个节点的位置和具体样式；
  4. 根据渲染树，浏览器完成页面展示。

CSS求值过程

CSS求值过程.png

  1. 根据样式规则，筛选可以匹配到的值，记为声明值；
  2. 根据样式来源等规则选择一个优先级最高的属性值，记为层叠值；
  3. 当层叠值为空时，继承或者使用初始值，记为指定值，该值不能直接被使用；
  4. 通过计算(相对值转为绝对值等)，最终得到计算值；
  5. 计算值进一步转换，如关键字、百分比等转为绝对值，得到使用值；
  6. 最后。将小数像素转化为整数，得到渲染时实际生效的值，实际值。

CSS基本语法

1 选择器：选中页面指定元素

  • 元素选择器
<style>
        /* 
          作用：根据标签名来选中指定的元素
          语法：标签名{}
          例子：p{}  h1{}  div{} 
        */
        p{
            color: red;
        }

        h1{
            color: green;
        }
</style>
  • id选择器：id需要唯一
<style>
       /* 
         作用：根据元素的id属性值选中一个元素
         语法：#id属性值{}
         例子：#box{} #red{} 
       */ 
       #red{
           color: red;
       }

</style>
  • 类选择器
<style>
        /* 
          作用：根据元素的class属性值选中一组元素
          语法：.class属性值 
        */
        
        .blue{
            color: blue;
        }

        .abc{
            font-size: 20px;
        }
</style>
  • 通配选择器
<style>
        /* 
          作用：选中页面中的所有元素
          语法: *
        */
            *{
                color: red;
            }

</style>
  • 属性选择器
<style>
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名=属性值] 选择含有指定属性和属性值的元素
            [属性名^=属性值] 选择属性值以指定值开头的元素
            [属性名$=属性值] 选择属性值以指定值结尾的元素
            [属性名*=属性值] 选择属性值中含有某值的元素的元素
         */
        /* p[title]{ */
        /* p[title=abc]{ */
        /* p[title^=abc]{ */
        /* p[title$=abc]{ */
        p[title*=e]{
            color: orange;
        }
</style>

  • 伪类选择器

    伪类：一个元素的特殊状态，如：第一个子元素，被点击的元素等等。

<style>
        /* 状态伪类 */
        /* 
            :link 用来表示没访问过的链接（正常的链接）
         */
        a:link{
            color: red;
            
        }

        /* 
            :visited 用来表示访问过的链接
            由于隐私的原因，所以visited这个伪类只能修改链接的颜色
        */
        a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }

        /* 
            :hover 用来表示鼠标移入的状态
         */
         a:hover{
             color: aqua;
             font-size: 50px;
         }

         /*
            :active 用来表示鼠标点击
         */
         a:active{
             color: yellowgreen;
             
         }
  
</style>

<style>
        /* 
            结构性伪类
            - 根据所有的子元素进行排序:
              :first-child 第一个子元素
              :last-child 最后一个子元素
              :nth-child() 选中第n个子元素
                特殊值：
                  n 第n个 n的范围0到正无穷
                  2n 或 even 表示选中偶数位的元素
                  2n+1 或 odd 表示选中奇数位的元素
          
            - 在同类型元素中进行排序:
                :first-of-type
                :last-of-type
                :nth-of-type()
                    
            - :not() 否定伪类
                将符合条件的元素从选择器中去除
        */
        ul > li:first-child{
            color: red;
        } 
    
        ul > li:nth-child(2n+1){
            color: red;
        }

        ul > li:first-of-type{
            color: red;
        } 

</style>

  • 伪元素选择器

    伪元素：页面中一些特殊的并不真实的存在的元素（特殊的位置）

<style>
        /*      
                ::first-letter 表示第一个字母
                ::first-line 表示第一行
                ::selection 表示选中的内容
                ::before 元素的开始 
                ::after 元素的最后
                    - before 和 after 必须结合content属性来使用
        */
        p::first-letter{
            font-size: 50px;
        }
        div::before{
            content: '『';
         }

</style>
  • 复合选择器
<style>
       /* 
          交集选择器
          作用：选中同时复合多个条件的元素
          语法：选择器1选择器2选择器3选择器n{} 
        */
        div.red{
            font-size: 30px;
        }
</style>

<style>
        /* 
          并集选择器/选择器组
          作用：同时选择多个选择器对应的元素
          语法：选择器1,选择器2,选择器3,选择器n{}
        */      
        h1, span{
            color: green
        }

</style>
  • 关系选择器
<style>
        /* 
          子元素选择器    
          作用：选中指定父元素的指定子元素
          语法：父元素 > 子元素
         */

        div.box > span{
            color: orange;
        }

        /* 
            后代元素选择器：
                作用：选中指定元素内的指定后代元素
                语法：祖先 后代
         */
         div span{
             color: skyblue
         } 

         /* 
            选择下一个兄弟
                语法：前一个 + 下一个
            选择下边所有的兄弟
                语法：兄 ~ 弟
          */

          p + span{
              color: red;
          }

          p ~ span{
              color: red;
          }
</style>

  • 选择器优先级：根据选择器的特异度

    一般情况，id选择器 > 类和伪类选择器 > 元素选择器

2 布局 layout：为指定的元素设定样式

布局相关技术.png

2.1 常规流(文档流)

文档流为最底一层，是网页的基础。 元素在文档流中的特点为：

  • 块元素：独占一行；宽度为父元素的全部，高度被内容撑开
  • 行内元素：不独占一行，只占自身大小；高度被内容撑开
重要概念：盒模型
CSS中的元素都可以看做一个矩形盒子,对页面布局类似于摆放盒子。
  • 盒模型组成如下：
    1. 内容区(content) : 所有元素和文本内容都在内容区，可以设置其 width 和 height;
    2. 内边距(padding) ： 内容区与边框之间的距离；
    3. 边框(border) : 盒子边缘，边框以内为盒子内部；
    4. 外边距(margin): 不会影响盒子的可见框大小，但是会影响盒子的位置和实际占用空间大小。

盒模型.png

其中，padding, border, margin都可设置三种属性：width style color，四个方向：top bottom left right；
水平居中：margin：0 auto;
垂直居中：父元素 line-height = height;
处理溢出：overflow

2.2 浮动 float

浮动可以使一个元素向其父元素的左侧或者右侧移动； 元素浮动后，从文档流中脱离，不在占用文档流位置，下方还在文档流中的元素会自动向上移动。

  • 浮动会导致高度塌陷问题：当父元素搞懂不写死，且子元素使用float时，父元素会出现高度丢失问题，下方元素上移，会导致布局混乱。

高度塌陷问题.png

  • 解决办法：为父元素开启BFC
重要概念：BFC(Block Formatting Context) 块级格式化上下文

元素开启BFC后，会变成一个独立的布局区域。

  • 元素开启BFC后的特点：

    1. 不会被浮动元素所覆盖
    2. 子元素和父元素外边距不会重叠
    3. 可以包含浮动的子元素

  • 开启元素的BFC的方法：

     常用的方式: 设置 overflow:hidden, 以使其可以包含浮动元素
    1. 设置元素的浮动（不推荐）
    2. 将元素设置为行内块元素（不推荐）
    3. 将元素的overflow设置为一个非visible的值
重要布局：弹性盒 flex

CSS中的又一种布局手段，它可以代替浮动来完成页面的布局

  • flex 特点：
    1. flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变；
    2. 要使用弹性盒，必须先将一个元素设置为弹性容器；
  • 弹性容器：
    1. 设置：
      • display:flex 设置为块级弹性容器；
      • display:inline-flex 设置为行内弹性容器
    2. 样式：
      • flex-wrap: 设置弹性元素是否在弹性容器中自动换行；
      • align-items: 元素在辅轴上如何对齐；
      • justify-content： 主轴上的元素如何排列；
  • 弹性元素： flex 增长 缩减 基础;
    • initial "flex: 0 1 auto".
    • auto "flex: 1 1 auto"
    • none "flex: 0 0 auto" 没有弹性

2.3 定位 position

高级布局手段，可以将元素摆放到页面任意位置。

position.png

  • 相对定位 relative

    不设置偏移量offset, 元素不发生任何变化。

  • 绝对定位 absolute

  1. 开启绝对定位后，元素会从文档流中脱离；
  2. 元素相对于离它最近的开启定位的祖先元素定位，如果所有祖先元素都未开启定位，则相对于根元素定位。

绝对定位.png

  • 固定定位 fixed

    永远参照浏览器的视口定位

总结

  • CSS作用：用于设置网页样式，配合HTML一起完成网页渲染效果。

  • CSS实现：首先通过各种选择器选中要操作的元素，然后对其进行布局，将其放置在合适的位置并设置格式。

  • CSS中样式设置繁多，要学会查找MDN文档，并且多加练习，才能熟练掌握！

avatar
文章
阅读
粉丝