提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS
(1) 概念及基本语法
1.2 在HTML中引入CSS的方法
(2) 选择器、优先级
- 选择器的灵活组合
(1) 并集选择器
也叫群选择器,是由多个选择器通过逗号连接在一起的。并集选择器允许同时给多个选择器应用同一种样式。
格式:
选择器1,选择器2,…{
属性:值;
}
注意:
1) 选择器之间利用逗号( , )连接。
2) 选择器可以是标签名称,也可以是id、class名称。
(2)嵌套(后代)选择器
格式:
选择器1 选择器2…{
属性:值;
}
注意:- 选择器之间用空格作为连接符号,可多级嵌套
- 选择器可以是标签名称, 也可以是id、class名称
- 优先级层次(!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元素的某个属性发生改变时所经历的时间,并且以平滑的方式发生改变,从面形成动画效果。