前端复习： css

qq_42248520

已于 2024-01-10 17:44:18 修改

阅读量1.1k

点赞数 38

文章标签：前端 css

于 2024-01-10 17:28:31 首次发布

本文链接：https://blog.csdn.net/qq_42248520/article/details/135496920

版权

一什么是视口

1. 浏览器中的视口

在桌面浏览器中，视口的大小通常是浏览器窗口的大小，用户可以通过调整窗口大小来改变视口的大小。视口的宽度由浏览器窗口的宽度决定，高度由浏览器窗口的高度决定。

2. 移动设备中的视口

布局视口（layout viewport）：布局视口是文档实际布局的基础。它的大小通常大于设备的屏幕大小，以适应网页内容的显示。用户可以通过页面滚动来查看超出布局视口的内容。
视觉视口（visual viewport）：视觉视口是用户当前可见的部分，即屏幕上实际可见的网页区域。用户通过缩放、滚动等操作来改变视觉视口的大小和位置。

为了确保网页在移动设备上具有适应性，可以通过设置meta标签来指定视口的大小和缩放行为。例如，使用以下meta标签可以将视口大小设置为设备宽度，并禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

二文档流是什么

文档流是指元素在页面中按照其在HTML文档中的顺序布局的方式。在文档流中，元素会按照其在HTML文档中出现的顺序一个接一个地放置，并且默认会占据父元素的空间。

常见的3种流：

块级流：是默认的布局流模型，使元素在垂直方向上一个接一个的排列。每个块元素都会占据一行，从上到下依次排列。常见的块级元素有<div>、<p>、<h1>到<h6>等。
行内流：行内流让元素在水平方向上一个接一个地排列。行内元素默认不会换行，它们会尽可能地放在同一行内。常见的行内元素有<a>、<span>、<strong>、<em>等。
行内块级流：行内块级流结合了行内流和块级流的特性。行内块级元素可以在水平方向上一个接一个地排列，并且可以设置宽度、高度、内边距和外边距等样式属性。常见的行内块级元素有<img>、<input>和<button>等

三盒模型

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

四 BFC 块级格式化上下文

1. 形成BFC

flot不是none
display是flex、inline-block等
position是absolute或者fixed
overflow不是visible

常见应用：清除浮动

五 css 选择器

1. 元素选择器：使用元素标签作为选择器

2. 类选择器：使用. 加上类名作为选择器

3. ID选择器：使用#加上ID名称作为选择器

4. 属性选择器：通过元素属性进行选择，例如：[name]选择具有name属性的元素，[name=“value”]选择具有name属性且值为value的元素

5. 伪类选择器：如:hover,:nth-child(n)

6. 伪元素选择器:如::before,::after

7. 子元素选择器:使用>选择直接子元素

8. 相邻兄弟元素选择器: 使用+选择紧接在另一个元素后面的元素:如: div+p选择div后的p元素

9. 通用兄弟选择器: 使用~选择在另一个元素后面的元素,如: div~p选择div后的所有p元素

六 css权重计算

style>ID>(类、伪元素、属性)>元素和伪元素

内联样式（Inline Styles）特定性为1000。
ID选择器特定性为100。
类选择器、伪类选择器和属性选择器特定性为10。
元素选择器和伪元素选择器特定性为1。

七样式单位

1. 绝对单位:px

2. 相对单位

em：em单位是相对于父元素字体大小的单位。例如，如果父元素的字体大小为16px，设置子元素的字体大小为1.5em，则子元素的字体大小将为1.5倍的父元素字体大小，即24px（1.5 * 16px）。这也适用于其他属性，如元素的高度、宽度、间距等。
rem：rem的值相对于根元素（即html元素）的字体大小。如果根元素的字体大小为16px，设置元素的字体大小为2rem，那么该元素的字体大小将是32px。
%：百分比单位是相对于父元素的大小进行计算的。例如，设置一个元素的宽度为50%，表示它的宽度将是其父元素宽度的一半。

3. 视口单位

vw（视口宽度单位）：表示视口宽度的百分比，1vw等于视口宽度的1%。
vh（视口高度单位）：表示视口高度的百分比，1vh等于视口高度的1%。
vmin（视口宽度和高度中较小的那个）：表示视口宽度和高度中较小值的百分比。
vmax（视口宽度和高度中较大的那个）：表示视口宽度和高度中较大值的百分比。

八定位

定位元素: absolute、relative、fixed等

relative 相对于自身的定位
absolute 相对于最近一层的定位元素进行定位

九水平垂直居中方式

1. 使用Flexbox布局：

父元素上设置display: flex;和justify-content: center;实现水平居中。
父元素上设置align-items: center;实现垂直居中。

2. 使用绝对定位和transform属性：

父元素上设置position: relative
子元素上设置position: absolute;和top: 50%;、left: 50%;
子元素上使用transform: translate(-50%, -50%);将元素自身向左上角平移50%的宽度和高度。

3. 使用绝对定位和marigin属性：

父元素上设置position: relative
子元素上设置position: absolute;、top: 0;、left: 0;、right:0、bottom:0
子元素上设置margin: auto;

4. 文本水平垂直居中：

父元素上设置text-align: center;实现水平居中。
父元素上设置line-height: 计算值;，并使line-height等于父元素的高度实现垂直居中。

十 flex

1. display: 设置父容器的显示方式为flex，可以取值为flex或inline-flex

2. flex-direction: 指定子元素在容器中的排列方向, 决定主轴。

row 水平排列，默认值
column 垂直排列
row-reverse 水平逆序排列
column-reverse 垂直逆序排列

3. flex-wrap: 控制子元素是否换行

nowrap 不换行，默认值
wrap 换行
wrap-reverse 逆序换行

4. justify-content: 决定子元素在主轴上的对齐方式

flex-start 起始端对齐
flex-end 终止端对齐
center 居中对齐
space-between 两端对齐，项目间间隔相等
space-around 每个项目两侧的间隔相等
space-evenly 每个项目两侧和项目之间的间隔相等

5. align-items: 决定子元素在交叉轴上的对齐方式

flex-start 起始端对齐
flex-end 终止端对齐
center 居中对齐
baseline 基线对齐
stretch 拉伸对齐

6. align-content: 控制多行子元素在交叉轴上的对齐方式。适用于有多行的情况。

flex-start 起始端对齐
flex-end 终止端对齐
center 居中对齐
space-between 两端对齐，项目间间隔相等
space-around 每个项目两侧的间隔相等
stretch 拉伸对齐

十一长单词溢出 (word-break: break-all;)

十二文本溢出

// 无行数处理
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 有行数处理 如3行溢出省略
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
}

十三响应式布局

常见处理：

1. 媒体查询：设置html的font-size大小

2. 使用rem，em，vw，百分比相对视口单位处理，实际开发框架引入postcss-px2rem，px2rem-loader

vue.config.js 配置
const px2rem = require('postcss-px2rem')

const postcss = px2rem({
    remUnit: 16 // 基准大小 baseSize，需要和rem.js中相同
})

module.exports = {
    ...
    css: {
        loaderOptions: {
            postcss: {
                   plugins: [postcss]
            }
        }
    }
} 

//rem.js 

const baseSize = 16
function setRem () {
let width = document.documentElement.clientWidth
    if(Width <= 1366){
        width = 1366
    }
    const scale = width/1920
    document.documentElement.style.fontSize  = baseSize * Math.min(scale,2) + 'px'
}
setRem()
window.onresize = function(){ setRem()}

// main.js中引入 rem.js

3. flex布局