Web前端开发——CSS

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS

（1） 概念及基本语法

1.2 在HTML中引入CSS的方法




（2） 选择器、优先级

4. 选择器的灵活组合
   (1) 并集选择器
   也叫群选择器，是由多个选择器通过逗号连接在一起的。并集选择器允许同时给多个选择器应用同一种样式。
   格式:
   选择器1,选择器2,…{
   属性:值;
   }
   注意:
   1) 选择器之间利用逗号（ , ）连接。
   2) 选择器可以是标签名称,也可以是id、class名称。
   （2）嵌套（后代）选择器
   格式:
   选择器1 选择器2…{
   属性:值;
   }
   注意:
   1. 选择器之间用空格作为连接符号，可多级嵌套
   2. 选择器可以是标签名称, 也可以是id、class名称
      
      

7. 优先级层次（！important 例外规则）
   

（3） 盒子模型 相关

• 盒子模型中的margin（边界）和padding（填充）属性比较简单，只能设置其大小。
• 边框（border）可以设置宽度、颜色和样式。border属性主要有三个：border-width、border-color、border-style。
• content：主体内容,width、height

（4） 背景样式的应用
（1） 背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果。

（5） 定位（绝对定位与相对定位）

已定位：position属性被设置且不是static。
祖　先：从该元素开始一直到根节点的所有元素。
最　近：距该元素距离最短的一个节点。

（6） 浮动（float与clear)
（1） Float 基本语法

（2） 说明
• left表示浮动元素在左边，元素向左浮动的。
• right表示浮动元素在右边，元素向右浮动的。
• none表示不浮动，是默认值。
（3） Clear 基本语法

（4） Cleat 语法说明
• left表示不允许在某元素的左边有浮动元素。
• right表示不允许在某元素的右边有浮动元素。
• both表示在某元素左右两边都不允许有浮动元素。
• none表示在某元素左右两边都允许有浮动元素。
（5） 注意：

（7） 弹性盒布局（Flex容器与Flex项目）

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上对齐方式。
• align-content只适用多行的flex容器（项目不止1行/1列时该属性才有效果），其作用是当flex容器在交叉轴上有多余的空间时，将项目作为一个整体进行对齐。
• flex-flow是flex-direction和flex-wrap的合集
语法格式：
flex-flow: flex-direction flex-wrap;
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间的大小（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
语法格式如下：
flex: flex-grow flex-shrink flex-basis | auto | none;

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

（8） 变形、过渡、关键帧动画
• transform属性 : 用于实现平移、缩放、旋转和倾斜等2D变换
• transform-origin属性: 用于设置变化元素的基点位置
Transition属性可以控制HTML元素的某个属性发生改变时所经历的时间，并且以平滑的方式发生改变，从面形成动画效果。