YOH9778的博客

文章目录【前端】HTML5+CSS3 CSS背景（八)1.背景相关属性2.背景相关简写属性3.线性渐变【前端】HTML5+CSS3 CSS背景（八)1.背景相关属性background-color 设置图片颜色background-image设置背景图片，可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色如果背景的图片小于元素，则背景图片会自动在元素中平铺，将元素铺满如果背景的图片大于元素，则一部分背景无法完全显示如果背景的图片和元素一样大，则会直接正常显示[外

文章目录【前端】HTML5+CSS3 CSS 字体（七)1.文字字体1.1字体的相关样式1.2 font-family（字体格式）1.3 font-face1.4行高1.4字体的简写属性2.图标字体**2.1fontawesome使用步骤****2.2通过伪元素设置图标字体****2.3阿里的字体库**3.文本的样式3.1`text-align` 文本的水平对齐方式：3.2`vertical-align`设置元素垂直对齐方式：3.3图片的对齐方式3.4 `text-decoration`设置文本修饰3.5

文章目录【前端】HTML5+CSS3 CSS 定位（六)1.定位的简介2.绝对定位3.固定定位4.粘滞定位5.绝对定位元素的布局6.元素的层级【前端】HTML5+CSS3 CSS 定位（六)1.定位的简介定位（position）:定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性可以设置定位，可选值：static 默认值，元素是静止的，没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定

文章目录【前端】HTML5+CSS3 CSS高度塌陷（五)1.高度塌陷的问题2.BFC3.clear4.clearfix【前端】HTML5+CSS3 CSS高度塌陷（五)1.高度塌陷的问题一般情况下，在浮动布局中，父元素的高度默认是被子元素撑开的，如下图所示 <style> .outer{ border: 10px red solid; } .inner{ width: 100px;

文章目录【前端】HTML5+CSS3 CSS浮动（四)1.浮动的简介2.浮动的特点3.脱离文档流的特点4.页面简单布局5.实战小练习【前端】HTML5+CSS3 CSS浮动（四)1.浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float属性来设置元素的浮动,可选值：none 默认值，元素不浮动left元素向左移动right 元素向右移动注意事项：元素设置浮动以后，水平布局的等式不需要强制成立元素设置浮动以后，会完全从文档流中脱离处理，不再占用文档流的位置元素下面

文章目录1、文档流（normal flow）2.盒子模型---介绍3.盒子模型---边框4.盒子模型---内边距5.盒子模型-外边距6.盒子的水平布局7.盒子的垂直布局10.默认样式11.盒子的尺寸12.轮廓和圆角1、文档流（normal flow）网页是一个多层的结构，一层摞着一层，通过CSS可以为每一层来设计样式，作为用户只能看到最顶上的一层，而在这些层中，最底下的一层成为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列的对我们而言，元素主要有两个特点：在文档流中，不在文档

文章目录CSS1. CSS简介1.1内联样式（行内样式）1.2内部样式表1.3外部样式表2.CSS语法3.基本选择器3.1常用选择器3.2复合选择器3.3关系选择器3.4属性选择器4.伪类选择器5.元素的伪类6.伪元素选择器7.样式的继承8.选择器的权重9.单位10.颜色CSS1. CSS简介网页分成三个部分：结构（HTML）行为（CSS）表现（JavaScript）CSS：层叠样式表CSS用来设计网页中元素的样式网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层

HTML基本特性1.字符实体有些时候我们不能直接书写一些特殊符号，比如：多个连续的空格字母两侧的大于号或小于号如果我们需要在网页中书写这些特殊的符号，需要使用html中的实体（转义字符）。实体的用法：&实体的名字;更多实体参考：HTML 字符实体(https://www.w3school.com.cn/html/html_entities.asp)2.meta标签meta主要用于设置网页中的一些元数据，元数据不是给用户看（写在head里）charset 指定网页的