对应的前端知识总结归纳（常被问到的知识二：CSS版块）

最新推荐文章于 2024-09-14 14:14:58 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-09-14 14:14:58 发布

阅读量242

点赞数

分类专栏：小知识点（报错、小知识）

本文链接：https://blog.csdn.net/tuzi007a/article/details/112256572

版权

小知识点（报错、小知识）专栏收录该内容

32 篇文章 1 订阅

订阅专栏

用自己的话讲有趣的知识。大家好，我是梅巴哥er。本篇介绍CSS版块的知识总结。

常用学习网站：

W3c：https://www.w3school.com.cn/css3/index.asp
菜鸟教程：https://www.runoob.com/css3/css3-tutorial.html
bootstrap官网：https://www.bootcss.com/
自己的笔记： https://blog.csdn.net/tuzi007a/article/details/112441103

知识归纳：

如何画一个三角形

// 用css边框处理
<!DOCTYPE HTML>
<html lang="zh-CN">
 <head>
  <title>三角形制作</title>
  <meta charset="UTF-8" />
  <style>
   .point {
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid blue;
     }
  </style>
 </head>
 <body>
  <div class="point">
  </div>
 </body>
</html>

说一下css盒模型
- 盒子，是封装了包括html元素的矩形块。包含width, height, padding, border, margin属性（宽高和内外边距）。
- 有两种模型，即标准盒模型和IE盒模型。通常用box-sizing来设置。两者的区别在于content包含的范围
  - 标准盒模型，它的content是不包含padding，border的。width和height指的是content的宽高。不设置或设置属性box-sizing: content-box; 就是标准盒子。
  - IE盒模型，它的content是包含padding和border的。即content的宽 = width + padding + border。设置属性box-sizing:border-box;即是IE盒模型。
  - 一些注意的点：请参考博文：盒模型要注意的点
画一条0.5px的线

// 最简单的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0.5px的线</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            margin: 50px;
            width: 200px;
            height: 0.5px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

请参考博文：画0.5px线的三种方法

Flex布局
- 参考我的博文：Flex布局复习
垂直居中的方法
- 参考博文：居中的7种方法总结
visibility=hidden, opacity=0, display=none，三者有何区别

属性和值	功能	是否改变页面布局	是否会触发事件
opacity=0	隐藏元素	否	会
visibility=hidden	隐藏元素	否	不会
display=none	隐藏元素	是	不会

双边距重叠问题
- 重叠计算边距规则：
  - 符号相同，取绝对值的最大值
  - 符号不同，取两者之和
- 参考博文：边距重叠计算方法
- 如果不想出现这个问题，首先是避免接触边都用边距数据，其次可以用padding来避免。
position属性比较

position值	有没有定位	是否脱离文档流	相对于谁的位置发生变化	能否和浮动同时使用	父盒子是否能检测到定位元素的宽高
static（默认）	无	否	无变化，正常的文档流	能	能
relative（相对定位）	有	否	自身	能	能
absolute（绝对定位）	有	是	relative的父盒子（子绝父相）	否	否
fixed（固定定位）	有	是	浏览器窗口	否	否

- 参考博文： position的4个值的比较
清除浮动的方法
- 需要清除浮动的原因
  - 父盒子没有设置高度时，子盒子不设置浮动，子盒子可以撑开父盒子
  - 子盒子设置了浮动，脱离了文档流，父盒子无法计算子盒子的高度，所以子盒子不能撑开父盒子了，父盒子高度就变成了0
- 清除浮动常用方法：
  - 给父盒子加代码： overflow: hidden;
  - 推荐使用伪元素法来清除浮动（需要注意的是，:after是css2的写法，::after是css3的写法。IE8不支持::after）
- 参考博文：为啥要清除浮动及清除浮动的4种方法
css选择器有哪些，优先级排序怎么排？
- 选择器格式： 选择器类型 { css属性和值}
- 选择器类型：
  - 通用选择器： * {margin: 0; padding: 0 }
  - 标签选择器： p { color: pink; }
  - 类选择器： .box { color: pink; }
  - id选择器： #box {color: pink; }
  - 兄弟选择器，子代选择器，后代选择器，伪类，伪元素
- 优先级： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
如何实现图片在某个容器中居中摆放？
- 方法一：line-height
- 方法二：flex的item居中设置
- 方法三：定位position
- 方法四：定位position + 移动translate
- 方法五：table
如何实现元素的垂直居中？
- 这个元素要分行元素、行内块元素还是块元素。
float的元素，它的display的属性是什么？
- display: block;
隐藏页面中某个元素的方法有哪些
- visibility=hidden,
- opacity=0,
- display=none
三栏布局的实现方式，尽可能多写。浮动布局时，三个div的生成顺序有没有影响？
- 参考博文：三栏布局的5种方式和优缺点
- 有影响。主要原因是浮动会脱离文档流，顺序不同，出现的效果也不一样。
calc属性
- 计算方式举例： calc(50% + 20px)。符号两边一定要有空格隔开。
display：table和本身的table有什么区别？
- 前者是css属性，后者是标签。
- 详细讲解参考该博文
z-index的定位方法
- z-index: 数字; 用于脱离文档流的定位。
如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？
- 给父元素设置属性
用的最多的css属性是啥？
- 自己想，自己总结
line-height和height的区别
- 参考博文：line-height和height的区别
设置一个元素的背景颜色，背景颜色会填充哪些区域？
- 1，一般的盒子，设置背景元素的颜色，填充的区域是content, padding, border。不包括margin
- 2，body元素，填充范围包含margin。
- 3，如果是html元素，和一般的盒子一样，只填充到border。但是它包含了body元素的外围区域。
用css实现一个硬币旋转的效果

<!DOCTYPE html>
<html>
    <title>硬币旋转动画</title>
    <meta charset="utf-8" />
    <head>
        <style>
            @keyframes turn {
                0% {
                    transform: rotate(0deg); // 旋转开始的角度
                }
                100% {
                    transform: rotate(360deg); // 旋转结束的角度
                }
            }
            .img1 {
                animation: turn;	// 旋转动画的名称
                animation-duration: 3s;	// 旋转一周耗时3s
                animation-iteration-count: infinite; // 动画循环无限次
                animation-timing-function: linear;	// 匀速旋转
            }
        </style>
    </head>
    <body>
        <img src='./img/yingbi.jpg' alt="硬币" width="100px" class="img1" />
    </body>
</html>

- 绕Y轴旋转请参考博文：绕Y轴旋转的硬币
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
- 重绘：浏览器重新绘制受影响的几何属性
- 重排：渲染树重新构建渲染树的过程。
- 重排一定重绘，重绘不一定重排。几何属性的变化，才会重排。
- 参考博文：重绘重排
CSS画正方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体</title>
    <style>
        .cube {
		height: 200px;
		width: 200px;
        border: 1px solid pink;
            }
        
        
        .cube-3D {
                width: 41px;
                height: 41px;
                margin: auto;
                margin-top: 50px;
                transform: rotateX(45deg) rotateY(-45deg);
                transform-style: preserve-3d;
                font-size: 0;
            }
        
        
        .cube-3D div {
                width: 41px;
                height: 41px;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.5;
                background-color: pink;
                border: 0.5px solid #82C14C;
            }
        
        
        .front {transform: translateZ(21px);}
        
        
        .rear {transform: translateZ(-21px);}
        
        
        .left {transform: translateX(-21px) rotateY(-90deg);}
        
        
        .right {transform: translateX(21px) rotateY(-90deg);}
        
        
        .top {transform: translateY(-21px) rotateX(90deg);}
        
        
        .foot {transform: translatey(21px) rotateX(-90deg);}
    </style>
</head>
<body>
    <div class="cube">
        <div class="cube-3D">
            <div class="front">前</div>
            <div class="rear">后</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="top">上</div>
            <div class="foot" >下</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

- 参考博文： 3D正方形
overflow清除浮动的原理
- 核心原理是overflow触发了BFC
- BFC就是块级格式化上下文
- BFC定义了一个独立的渲染区域，有自己的渲染规则，不受外界环境影响
- overflow激发了BFC自己的规则，所以可以清除浮动。
- 参考博文：原理
box-sizing的语法和基本用处
- box-sizing属性有两个值，content-box和border-box
- 俩值是用来改变盒子模型的
- content-box定义标准盒子，是默认的，标准盒子的宽度就是content的宽度,设置内边距会改变盒子大小。
- border-box定义IE盒子。设置内边距不会改变盒子大小。content = width + padding + border
- 参考博文： 2个主要值的用法
css预处理器有什么
- 用到的有less，sass
- 代码简洁，复用性强，层级关系明显，易读性强，代码更容易维护。
- 参考博文：预处理器3种和比较
bootstrap清除浮动的方法
- 参考博文一：简单介绍
- 参考博文二：详细介绍
请你说一下Bootstrap
- 前端响应式的UI框架
- 自身封装了很多CSS，JS插件，组件等，方便快速开发快速建站
- 参考博文：介绍