大前端学习笔记4-CSS常用样式

时间：2023-08-30 01:06:01 | 来源：网站运营

时间：2023-08-30 01:06:01 来源：网站运营

• 字体类样式包括：字体font-family、字号font-size、粗细font-weight、风格font-style四个。

• 字体综合属性font的三种写法

• Firewords软件（量取文字行高用）

• 文本属性包括：颜色color、水平对齐text-align、修饰text-decoration、缩进text-indent、行高line-height五个。

• 盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度height、内边距padding、边框border、外边距margin。

• 常见盒模型区域：盒模型的属性中，根据不同属性的效果，可以划分区域。

• 盒模型属性

• 宽度width和高度height的特殊应用

• 盒模型的复合属性

• 盒模型复合属性的单一属性划分

• 复合属性和单一属性的应用

• 五种常用的盒模型扩展

• 溢出解决方案：overflow属性

• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
• HTML就是一种标准文档流文件。
• HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

• 元素等级包括：块级元素、行内元素及行内块元素三种。

• 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式。
• 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

• 脱离标准流

1. display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质，要想实现更多的界面布局效果需要脱离标准流的限制。
2. 标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

• 浮动的定义

• 浮动的性质：为了更好的利用浮动进行布局，我们需要了解浮动相关的性质。

• 浮动存在的问题

• 清除浮动的方法（重点）

• 伪类和类之间有一定的相似之处，也存在明显的区别。

• <a>标签可以根据用户行为不同，划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

• CSS中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。
• CSS中通过background属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

• 背景属性的综合写法

• 背景应用：背景属性在实际应用中有很多使用场景，下面是几个比较常见的场景。

• CSS3新增背景属性

• 背景缩放background-size

• 定位：跟盒模型、浮动等属性一样，是另一种布局的重要属性，常用于制作压盖或者位置有关的效果。

• 偏移量属性：定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。

• 相对定位、绝对定位、固定定位的区别和共通点

• 相对定位（relative）的注意事项及实际应用

• 绝对定位（absolute）的参考元素及参考点

• 绝对定位（absolute）的注意事项及实际应用

• 定位的应用

• 压盖顺序：实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。