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

前端技术栈之CSS ｜ 青训营笔记

• 什么是CSS
• 使用CSS
• 选择器Selector
• 选择权进阶
• 布局相关技术
• 常用属性
• 块级和行级区别

什么是CSS

css 全称 Cascading Style Sheets（层叠样式表）

用来定义页面的样式 加以修饰

如：

• 设置字体颜色
• 设置位置和大小
• 添加动画效果

h1{ color: white; font-size: 14px; }

解析:

• h1(选择器 Selector) 
  

• color，font-size （属性名）
  

• white，14px （属性值）
  

使用css

使用css通常有三种方法分别是： 外链式，嵌入式，内联式。

使用方式：

• 外链<link href="需要引入那个css的地址">
• 嵌入式 <style>li{margin:0;}</style>
• 内联式<p style="margin:1em 0">Example Content</p>

选择器Selector

• 选择器可以找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
• • 按照标签名，类名或id
• • 按照属性
• • 按照dom树中的位置 css中*(星号)表示通配选择器也就是给全局HTML标签设置样式

id选择器（#+id名） 类选择器（.+类名）

选择权进阶

• 后代选择器:空格   父选择器1  子选择器2｛｝ 中间空格隔开  div   p｛｝会选择后面的所有p标签
• 子代选择器:＞     父选择器1＞子选择器2｛｝中间＞隔开  只会选择写出的标签
• 并集选择器:，    选择器1，选择器2，选择器3｛｝中间，隔开 同时选择多个
• 交集选择器:标签名.类名   选中页面中 同时满足多个选择的标签 标签名.类名｛｝
• 伪类选择器:选择器:hover｛｝ 鼠标悬停在某个元素上的状态  a:hover｛｝
• 伪类选择器选中元素的某种状态 继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值

优先级

继承＜通配符选择器< 标签选择器 < 类选择器<id选择器< 行内样式<important

布局相关技术

常规流：

• 行级
• 块级
• 表格布局
• FlexBox
• Grid布局

常用属性

浮动：float：左浮动/右浮动/不浮动/从父级继承float属性

宽度：width：140px（指定 content box宽度，取值为长度 百分数 auto ，auto由浏览器根据其他属性确定）

高度：height：140px（指定 content box宽度，取值为长度 百分数 auto ，auto由浏览器根据其他属性确定）

内边距：padding：10px （会增加盒子尺寸大小 padding方向名，可复合属性取值 四值（上右下左） 三值（上 左右 下） 两值（上下 左右） 一值（上下左右））

边框：border：1px（边框粗细） solid（边框样式） #ccc （边框颜色）

外边距：margin：10px（指定元素四个方向的外边距，取值可以是长度 百分数 auto 百分数相对容器宽度 也是复合属性）

自动内减：box-sizing：boeder-box

块级和行级区别

块级：不能和其他盒子并列摆放 适用于所有的盒模型属性

行级：和其他行级盒子可以一起放在一行或拆开成多行，盒模型的width，height不适用

块级元素：

• 生成块级盒子
• body，article，div，main，h1~h6（html块级标签）
• display：block（可通过css将行级转换为块级） 行级元素
• 生成行级盒子
• span，em，strong，cite，code等 （html行级标签）
• display：inline（可通过css将块级转换为行级）

本笔记只是简单记了一些常用的属性和选择器有不对望理解并麻烦指正一下。