HTML、CSS技术总结

常见的语义化标签：

1. 标题标签 h1-h6

2. 段落标签 p

3. 换行标签 br

4. 水平线标签 hr

5. i斜体标签（iconfont字体图标的容器来使用） i

6. em 标签 斜体字 注重文本的语调加重

7. b标签 粗体字 加粗

8. strong 粗体 强调重要内容

9. blockquote 长引用标签

10. q 短引用

11. sub 文本下角标

12. sup 文本上角标

13. del 删除线

14. ins 插入线

元素的分类

- 行内元素

1.行内元素不会独占一行，会在一行上集中排列，直到该行无法排列为止

2.通常是包裹其他的行内元素以及文本信息

3.不允许设置元素的宽、高，行内元素的宽高由其内容决定！

- 块元素

1.块元素会独占页面的一行排列显示

2.块元素中可以嵌套任何的块元素(p元素除外，p元素不能嵌套其他的块元素！)或者行内元素或者文本信息

3.可以设置元素的宽和高，默认的宽度是其父元素的宽度！

- 行内块元素

1.可以设置宽高

2.不会独占一行

div和span元素

div和span元素两个都不具备任何的语义！

        div是典型的块级元素，div通常是作为一种布局容器使用！

        span是典型的行内元素，span通常是作为行内元素以及文本信息的容器使用！

列表标签

列表标签：HTML中将列表类型分为三类，有序列表(ol)、无序列表(ul)、定义列表(dl)

1. 有序列表

1.铅笔

2.橡皮擦

3.文具盒

有序列表在html中的表示是使用ol标签，列表中的每一项是使用li标签来表示

2. 无序列表

#铅笔

#橡皮擦

#文具盒

无序列表在html中的表示是使用ul标签，列表中的每一项是使用li标签来表示

3. 定义列表 （类似于解释型列表）

img标签

img标签（图片标签）：利用img标签向文档内引入外部(网络资源/本地资源)的图片资源

img标签是一个单标签（自结束标签）

img标签的属性：

src属性：外部资源的地址路径

alt属性：对图片的描述属性，文字信息的描述，当图片加载不成功时，alt属性才会发生作用

width属性：调整图片的宽度 单位是px 像素单位

height属性： 调整图片的高度 单位是px 像素单位

注意:调整图片的宽度或者高度时，只需要调整其中一个即可，另一个会自适应调整！

但是，在正常的开发中我们不会使用width属性和height属性！

超链接

a标签的属性：

href属性：指定跳转的目标路径

- 值可以是一个外部网站的地址

- 也可以是内部页面的地址

traget属性：

- _blank:新网页以新窗口的方式打开

- _self: 默认值，新网页在当前窗口中打

a标签的三种跳转方式：

1. 跳转到其他网页！（外部的或者本地的）

2. 跳转到当前页面的任意位置（锚点跳转，了解）

3. 暂时禁用跳转（#javaScript:;）

css简介

1、 行内样式(内联样式)

- 在html中每一个元素身上都存在一个全局属性，style ，通过style属性来设置元素的样式

- 该方式存在的问题：

- 使用内联样式的方式，样式只能对一个标签元素生效

- 如果有需求需要大量的整改页面的样式时，内联样式的修改是很麻烦的一件事情

- style属性的优先级特别高！不利于后续选择器进行修改！

总结：在开发中切记一定不要使用style属性来设置样式！

2、 内部样式表

- 在HTML文档中，通过style标签来设置文档相关的css样式属性

- 存在的问题：

样式的复用率不高，建议开发中尽可能的不要使用该方式，在学习阶段可以使用

3、 外联样式文件 最佳方式

新建一个.css的样式文件，在该文件中编写相应的css样式属性

然后引入到有需要的html文档中进行使用！

html文档中引入css文件是利用link标签进行样式表的引入！link标签位置写于head标签中！

选择器

基础选择器：

元素选择器：通过元素的标签名进行选择，该方式会选择页面中所以同名的元素

格式： div p span a h1 等都属于元素选择器

id选择器：通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的（类似于人的身份证号）

格式: #id值

类选择器： 通过标签元素的class属性值，来选择同类别的元素！

注意：这里的同类别，不是说 div 和 div是同类别（并不是说标签名相同的才是同类别元素）

同类别是指各元素的class值是相同的！

class值不唯一！

div class=demo

span class=demo

格式： .class值

通配符选择器： 选择页面中所以的元素

格式： *

复合选择器：是由两个或多个基础或其他选择器共同构成的！称为复合选择器！

- 交集选择器: 同时满足多个选择器的元素才能被选中

语法： 选择器1选择器2选择器3 {}

注意：各选择器之间没有任何的符合包括空格

- 并集选择器： 被选择的元素只需要满足其中一种选择器即可被选中！

语法： 选择器1,选择器2,选择器3 {}

注意：各选择器之间是用,逗号进行分隔

关系选择器！

子代选择器：

格式： 选择器1>选择器2>选择器3...

注意：子代选择器主要是看直接的父子关系！

后代选择器：

格式： 选择器1 选择器2 选择器3 ...

注意：后代选择器主要是看重祖先和后代元素的关系，（父元素和子元素都是特殊的元素）

总结：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！

子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！

兄弟选择器:

格式：

- 1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素

- 2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素

结构伪类选择器：

伪类： 不存在的类，是一些特殊的类！代表的是元素的某种状态

在css中可以将伪类进行分类，分成两大类：

结构型伪类：与hmlt结构相关的类

动态伪类： 与用户的交互相互的类

伪类的语法一般是： :伪类名

注意：伪类选择器大多数情况下不会单独进行使用，通常和其他选择器配合使用！

结构伪类（常用的）：

:first-child 父元素下的第一个子元素

:last-child 父元素下的最后一个子元素

:nth-child() 父元素下的第n各子元素

注意：以上这些伪类都是将父元素下的所有子元素进行排序的！包括不同类型的节点！

:first-of-type 父元素下同类型的子元素进行排序中的第一个子元素

:last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素

:nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素

注意： 以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序

动态伪类：

动态伪类主要是和用户的交互相关

常用的动态伪类：

:link 用来表示没有被访问过的超链接(只能用于a标签)

:visited 用来表示已经被访问过的超链接(只能用于a标签)

:hover 表示鼠标移入到某元素内 （用于任何元素）

:active 表示点击某元素 (用于任何元素)

伪元素通常是使用： ::伪元素名

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

注意：以下两个伪元素必须搭配css中的content属性进行使用！

::before 元素的最开始的位置

::after 元素的末尾位置

选择器优先级

各选择器之间的权重值：从低到高

继承的样式 ： 无限低

通配符选择器： 0，0，0，0

元素选择器： 0，0，0，1

类/属性/伪类选择器: 0，0，1，0

id选择器： 0，1，0，0

行内样式(标签的style属性)： 1，0，0，0

!important 无穷大(注意该方式慎用！)

文档流

1、元素遵循文档流的规则（元素在文档流中的表现）

块元素的特点：

1.块元素会在页面中独占一行（自上而下垂直排列）

2.默认宽度是其父元素的宽度（子元素的宽度默认是填满父元素）

3.默认高度是被自身的内容撑开/或者靠自身的子元素/或者设置一些相关的css属性

行内元素的特点：

1.行内元素不会独占页面的一行，只占自身大小的区域

2.行内元素在页面中是从左往右水平排列的，当一行无法容纳时才会自动换行

3.行内元素的默认宽度和默认高度都是由自身的内容决定的！（行内元素不能设置width和height属性）

行内块元素的特点：

1.可以设置宽高

2.不会独占一行

2、元素不遵循文档流的规则（元素不在文档流中的表现 脱离文档流）

1.元素脱离文档流后，不再占据文档流的实际位置！

2.元素脱离文档流后，元素的层级会自动提高！

3.元素脱离文档流后，将不在区分块元素，行内元素，行内块元素！统一视为一种元素，脱离文档流的元素

4.元素脱离文档流后，默认的宽度和高度由内容决定的！也可以自行设置宽高！

float:left; 浮动元素的特点、脱离文档流元素的特点

盒模型

盒模型（盒子模块、框模型）：

- css将网页中的所有元素都看作成一个矩形盒子

- 元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到合适的位置！

- 每一矩形盒子都是由以下几个部分组成：

1.内容区 （content）

2.内边距 (padding)

3.边框 （border）

4.外边距 (margin)

盒模型-内容区：

盒子模型中的内容区是用于排列所有的子元素以及文本内容的区域，内容区的大小由csss的width和hight决定

内容区的大小也会影响整个盒子的大小

盒模型-边框:

边框属于盒子的边缘部分，边框以内属于盒子内部，超过边框的就是盒子外部区域，边框的大小将会影响到整个盒子的大小

css中设置盒子的边框，由以下三个属性决定：

边框的宽度： border-width

边框的颜色： border-color

边框的样式： border-style

利用css提供的简写属性： border：1px solid red 同时设置了宽度、颜色、样式，这三个值没有顺序关系

- border-width 可以同时指定四个方向的边框宽度，也可以定向指定，根据值的不同

border-width：

值的情况：

四个值： 上 右 下 左 border-width: 10px 20px 30px 40px

三个值： 上 左右 下 border-width： 10px 20px 10px

两个值： 上下 左右 border-width： 10px 20px

一个值： 上下左右 border-width： 10px

- border-color 用法和border-width是一样的

- border-style 边框的样式：

值的情况：

- solid 实线

- dotted 点状虚线

- dashed 虚线

- double 双实线

- none 无边框（默认值）

盒模型-内边距：

- 内边距是指内容区与边框之间的距离

- 每个盒子一共由四个方向的内边距

可以分别通过css属性设置：

padding-top 上内边距

padding-right 右内边距

padding-left 左内边距

padding-bottom 下内边距

大多数情况下使用简写方式： padding：

根据值数量的不同，效果不同：

四个值： 上 右 下 左

三个值： 上 左右 下

两个值： 上下 左右

一个值： 上下左右

注意：内边距的大小设置会影响盒子可见框的大小

盒模型-外边距

- 外边距不在盒模型自身上，

- 外边距不会影响盒子可见框的大小

- 每个盒子具备四个方向的外边距：

margin-top 上外边距 设置正值或者负值

margin-right 右外边距

margin-left 左外边距

margin-bottom 下外边距

除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距

margin属性的用法和padding是一模一样的

元素类型的转换

元素的类型转换，

块元素 ==》 行内元素，行内块元素

行内元素 ==》 块元素，行内块元素

通过css的样式属性，display实现转换

可选值：

inline： 设置为行内元素

block： 设置为块元素

inline-block： 设置行内块元素

table: 设置为表格元素 了解

none： 将元素设置为不显示(是完全不存在于页面，不是简单的隐藏)

对应元素的隐藏设置，可以利用display：none进行切换

还可以visibility属性来设置元素的显示状态

可选值：

- visible 默认值，元素正常显示

- hidden 元素在页面中隐藏 元素不在页面中显示，但是元素依然占据着页面的位置！

高度塌陷最优解

.clearfix::after,

.clearfix::before{

content: '';

display: table;

clear: both;

}

定位

相对定位：

当元素的position属性值，设置为relative则对该元素开启了相对定位模式！

- 相对定位元素的特点：

1.元素开启了相对定位后，如果不设置偏移量元素是不会发生任何变化的

2.相对定位是参照于元素在文档流中的位置进行定位的 （参照自身原本的位置，为基准）

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质，块还是块，行内还是行内，....

总结：相对定位是对页面布局影响最小的定位方式！

绝对定位

- 当元素的position属性值设置为absolute就为元素开启了绝对定位

- 绝对定位元素的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，（脱离文档流的元素）

4.绝对定位会让元素提升层级

5.绝对定位元素是相对于其最近的开启了定位的包含块来定位的

口诀：‘子绝父相’

固定定位：

- 将元素的position值设置为fixed则开启了固定定位

- 固定定位也是一种特殊的绝对定位，所有固定定位的特点基本上和绝对定位的特点的一致！

注意：唯一不同是固定定位永远参照于浏览器的视口进行定位

粘滞定位:

- position设置为 sticky开启粘滞定位

- 粘滞定位和相对定位的特点基本一致

- 不同点是粘滞定位可以在元素到达某个位置时将其固定

元素背景相关的css属性

1. 设置元素的背景颜色 bg-color */

background-color: red; */

2.设置元素背景图片 bg-image */

背景图片的设置，与元素大小有关

- 如果背景图片小于元素，则背景图片会自动在元素中平铺并且将元素填满

- 如果背景图片大于元素，将会一个部分背景在元素显示

- 背景图与元素大小一致，正好就显示背景图！

3.图片的背景重复方式的设置 bg-repeat

可选值：

1. repeat 默认值，背景会沿着元素x轴y轴双方向重复

2. repeat-x x轴方向重复

3. repeat-y y轴方向重复

4. no-repeat 背景图片不重复

background-repeat: no-repeat;

4.图片的位置设置 bg-positon x，y

图片位置的指定两种方式：

- 具体的坐标值

- 方位词 top left right

background-position: top center;

5.设置背景展示的范围 bg-clip

可选值：

- border-box 默认值 背景在边框的下方

- padding-box 背景不会在边框，只出现在内容区和内边距

- content-box

background-clip: content-box;

6.背景图片的大小设置

bg-size

注意：背景图片的大小设置，一般只设置一个值另一个值自适应！防止破坏图片比例！

- cover 之间将元素铺满，比例不变

- contain 铺满元素，但是通过单向设置图片的大小，保证图片比例不变情况下！尽量的平铺元素

background-size: contain;

简写属性 bg

background: url('./OIP-C.png') top center no-repeat;

flex弹性盒

flex (弹性盒)：

- 是css中的又一种高级的布局手段，它主要用来替代浮动的！

- flex可以使得元素具有弹性！让元素可以跟随页面发送变化！

- 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒

- 利用css的属性 display 开启

display:flex 将元素设置为块级弹性容器

display：inline-flex 将元素设置为行内块的弹性容器

- 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！

元素一旦开启了flex布局，那么该容器就自动生成两个轴线！

分别是主轴和侧轴

- 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右

- 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下

注意：弹性元素，就会在主轴和侧轴上进行排列！

- css的属性设置

- 弹性容器设置相关的css属性

- 以下这些属性都是设置在弹性容器身上的！

1. flex-direciton 指定容器中的主轴和侧重方向！

可选值：

- row 默认值 主轴是x轴 方向是从左往右 ，侧轴是y轴，方向是从上往下

- column 主轴是y轴 方向是从上往下 ，侧轴是x轴，方向是从左往右

2. flex-wrap 设置弹性元素是否在弹性容器中换行

可选值：

nowrap 默认值 弹性元素不会换行

wrap 元素可以进行换行

3. flex-flow 该属性是 direciton和wrap属性的简写！

4. justify-content 分配主轴上的空白空间

可选值：

flex-start 元素从主轴的起点排列 默认值

flex-end 元素从主轴的终点排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布的元素之间 ，开始元素顶格容器边缘，末尾元素顶格容器的边缘

space-evenly 空白均匀分布到元素

5. align-items 设置元素在侧轴上对齐的方式

可选值：

- streth 默认值， 如果元素未设置高度或者宽度，则将元素沿着侧轴填满

- flex-start 元素不会拉伸，沿着侧轴起点对齐

- flex-end 元素不会拉伸，沿着侧轴终点对齐

- center 侧轴居中对齐

- baseline 文本基线对齐 了解

6. align-content 分配侧轴上的空白空间 ，

注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap

可选值：

flex-start 所有元素向侧轴的起点对齐

flex-end 所有元素向侧轴的终点对齐

center 所有元素向侧轴的中间对齐

space-around 空白分布到元素的两侧

space-between 空白均匀分布的元素之间

stretch 空白单向向元素一侧分配，产生间隙

- 弹性元素的属性：

1. order 排序 数值越小 排列越靠前 默认为0

2. flex-grow 指定弹性元素的伸展系数 元素的扩充 默认情况元素不会自动扩充

3. flex-shrink 指定弹性元素的压缩 当空间不够时对元素进行压缩 默认压缩系数是1

4. flex-basis 指定元素的初始值大小，元素的宽高属性！ 该属性要优于元素的宽高属性！

5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写

- flex

auto ： 1 1 auto

none ： 0 0 auto

6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待

- flex-start

- flex-end

- center

- baseline 了解

- stretch 拉满侧轴

注意： 弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！

元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素

骰子练习

颜色值

预置文本: 代表颜色的英文单词

transparent: 透明

background-color: transparent;

rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色

使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色

每个参数的取值范围是：0~255 (256是一个字节的大小Byte)

background-color: rgb(74, 40, 40);

rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明

background-color: rgba(204, 20, 20, 0.5);

HSL值: H色调 S饱和度（灰度） L代表亮度

background-color: hsl(0, 36%, 41%);

十六进制值: 以井号开头

十六进制数由1~10超过10的部分由A~F表示

前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色

background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f

background-color: #f00;

带透明度的十六进制

background-color: #ff00ff7b;

项目仿写：

小米首页