理解CSS|青训营笔记

用户3276011718750
82 阅读4分钟

0abf2add3a0e69298f8639843c8f526a.jpeg

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

新人第二天请指教

一.什么是CSS

CSS全称Cascading Style Sheets，用来定义页面元素的样式，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

如果说HTML是人的骨架，那么CSS就是人的血肉！

二. CSS如何工作，我们如何使用CSS

  • css工作原理 image.png 从图可知如图所示，计算机从上至下加载HTML文件并进行解析后产生DOM树，并在解析HTML后加载解析CSS文档，接着将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示出来。
  • 使用CSS的方法

    • 内联样式：顾名思义写在HTML元素里面的CSS样式，设置标签的style=""属性,称为内联样式（不建议使用） image.png

    • 嵌入样式：在HTML的<head>标签中使用标签,称为嵌入式样式

    image.png
    • 外联样式：创建并链接外部CSS文件,称为外部样式表

image.png

三. CSS选择器

3.1选择器的作用

image.png

3.2 CSS选择器

  •  标签选择器

image.png

结构：`标签名 { css属性名：属性值； } `
作用：通过标签名，找到页面中所有这类标签，设置样式 
注意点： 
1. 标签选择器选择的是一类标签，而不是单独某一个 
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

  •  类选择器

image.png

结构：`.类名 { css属性名：属性值； }`  
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式  
注意点： 
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）  
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头  
3. 一个标签可以同时有多个类名，类名之间以空格隔开   
4. 类名可以重复，一个类选择器可以同时选中多个标签

  •  id选择器

image.png

结构：`#id属性值 { css属性名：属性值;}`
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式  
注意点：
1. 所有标签上都有id属性   
2. id属性值类似于身份证号，在一个页面中是唯一的，不可重复的！   
3. 一个标签上只能有一个id属性值   
4. 一个id选择器只能选中一个标签

  •  通配符选择器

image.png

结构：`* { css属性名：属性值； }` 
作用：找到页面中所有的标签，设置样式

3.3 CSS选择器的组合

image.png

3.4 CSS选择器的权重

  1. No.1：代表内联样式，如: style=””，权值为1 0 0 0。
  2. No.2：代表ID选择器，如：#content，权值为0 1 0 0。
  3. No.3: 代表类，伪类和属性选择器，如.content，权值为0 0 1 0。
  4. No.4: 代表类型选择器和伪元素选择器，如<div></div> <p></p>，权值为0 0 0 1。
  5. No.5: 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0 0 0 0。
  6. No.6: 继承的样式没有权值。

3.4 伪类和继承

伪类选择器：不基于标签和属性定位元素

image.png

继承： 某些属性会自动继承其父元素的计算值，除非显示指定一个值一般利用显示继承对CSS初始化（与布局有关的一般不能继承）

四.布局

4.1 盒子模型

  • 概念
    1. 页面中的每一个标签，都可看做是一个 “盒子” ，通过盒子的视角更方便的进行布局
    2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
  • 盒子
    1. CSS 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） 构成，这就是 盒子模型

image.png

4.2 布局相关技术

  1. 常规流 image.png

    • 行级 image.png

    • 块级
      image.png BFC:
      内部的Box会在垂直方向，依次放置。

    Box垂直方向的距离由外边距（margin）决定。属于同一个BFC的两个相邻Box的margin会发生重叠，选margin大的作为两个Box的边距。

    BFC的区域不会与浮动元素重叠。

    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

    计算BFC的高度时，浮动元素也要参与计算。

    • FlexBox

image.png

  • 浮动

    1. 浮动元素会脱离常规流（文档流），不在常规流中占位
    2. 浮动元素比常规流级别高，会覆盖常规流中的元素
    3. 浮动元素之间，下一个浮动元素会在上一个浮动元素后面左右浮动
    4. 浮动后元素变成inline-box一行可显示多个，还能设置宽高

  • 定为

    1. 绝对定位position:absolute
    2. 相对定位position:relevant
    3. 固定定位position:fixed
avatar
文章
阅读
粉丝