CSS（复习）|青训营笔记

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

CSS

CSS是什么？

CSS是Cascading Style Sheets的简称，通过设置字体和颜色、元素的位置和大小、添加动画效果来改变页面元素的样式。

CSS的使用语法

选择器{
    声明;
    声明;
}

引入CSS的方法

• 外联式

<link rel="stylesheet" href="外部引用.css" type="text/css">

• 内联式

<p style="margin:1 em 0">Example Content</p>

• 嵌入式

<style>
    选择器{
        声明;
        声明;
    }
</style>

CSS的工作原理

• 选择器 selector
  • 根据选择器去找出页面中的元素，给它们设置样式。
  • 使用多种方式选择元素
    • -按照标签名、类名或id
    • -按照属性
    • -按照DOM树中的位置

选择器的种类

• 通配符选择器

<style>
* {
 color: red;
 font-size: 20px;
}
</style>

• 类选择器

 .类名
    {
       声明;
       声明;
   }

布局 Layout

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局的种类

• 常规流

width||height

width(height)指的是：指定content box宽(高)度，取值为长度、百分数、auto，auto由浏览器根据其他属性确定，百分数相对于容器的content box宽(高)度

padding

指定元素四个方向的内边距,百分数相对于容器的宽度

margin

指定元素四个方向的外边距，取值：长度，百分数，auto， 水平居中 margin:auto

margin collapse

div a和b之间的间距为两个margin的最大值

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

box-sizing

box-sizing:border-box

• 行级元素 特点：相邻行内元素在一行上，一行可以显示多个。高和宽直接设置无效，默认宽度就是它本身内容的宽度，行内元素只能容纳文本或其他行内元素，行级可以和其他行级盒子放在一起或者分开成多行，盒模型中的width和height不适用
• 块级元素 常见的块级元素有<h1>~<h6><div><ul><li>。特点：自己独占一行，高度宽度内外边距都可控制，宽度默认是容器100%，是一个容器及盒子，里面可以放行内或块级元素
• inline-block 本身是行级元素，可以放在行和中，可以设置宽高，作为一个整体不会背拆散成多行。
  • 表格布局
  • FlexBox
  • Grid
• 浮动
• 绝对定位

---

下期笔记将总结Grid、flexBox布局相关知识点~