前端综合实训总结

1.CSS单位

CSS中有多种单位可用于指定尺寸、长度、角度等值。

下面是一些常见的CSS单位：

1. px (pixels)：像素单位，是相对于屏幕上的单个像素点的长度单位。

2. % (percentage)：百分比单位，相对于父元素的特定属性的值进行计算。例如，width: 50% 表示元素宽度为父元素宽度的50%。

3. em：相对于父元素的字体大小的单位。1em 等于父元素的字体大小。

4. rem：相对于根元素（html元素）的字体大小的单位。1rem 等于根元素的字体大小。

5. vw (viewport width)：相对于视窗宽度的百分比单位。1vw 等于视窗宽度的1%。

6. vh (viewport height)：相对于视窗高度的百分比单位。1vh 等于视窗高度的1%。

7. vmin：相对于视窗宽度和高度中较小值的百分比单位。

8. vmax：相对于视窗宽度和高度中较大值的百分比单位。

9. pt (points)：打印单位，相对于 1/72 英寸。

10. cm (centimeters)：厘米单位。

11. mm (millimeters)：毫米单位。

12. in (inches)：英寸单位。

13. ex：相对于字体x-height（小写字母x的高度）的单位。

14. ch：相对于"0"字符宽度的单位。

15. deg (degrees)：角度单位。

16. rad (radians)：弧度单位。

这些单位可以在CSS属性中使用，如宽高、边距、字体大小、定位等。根据需要选择适当的单位以实现所需效果。

2.flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

​

​3.元素定位

为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。

元素定位有四种，可以使用position样式来设置元素定位，所以此属性值有四种：

static：静态定位（默认）。依据文档流定位。
relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。
fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

4.伪元素选择器

伪元素选择器并不是针对真正的元素使用的选择器,伪元素选择器只针对CSS中已有的伪元素起作用。

CSS提供的伪元素选择器有如下几个:
１、 :first-letter :该选择器对应的CSS样式对指定对象内的第一个字符起作用。
２、:first-line : 该选择器对应的CSS样式对指定对象内的第一行起作用。
３、:before : 该选择器与内容的属性结合使用，用于在指定对象内部的前端插入内容。
 4、:after : 该选择器与内容的属性结合使用，用于在指定对象内部的尾端添加内容。
下面先看：first-letter微元素选择器的用法。：first-letter选择器仅对块元素（例如：<div…/>、<p…/>、<section…/>）起作用。如果想对行内元素（如：<span…/>）使用该属性，必须先设定对象的heihjt、width属性，或者设定position属性为absolute，或者设定display属性为block。通过该选择器配合font-size、float属性可制作首字下沉效果。

5.元素浮动

流动模型是默认的网页布局模型，也就是说网页在默认状态下的HTML网页元素，都是根据流动模型来分布网页内容的。