CSS从入门到出门

最新推荐文章于 2024-10-12 09:53:06 发布
最新推荐文章于 2024-10-12 09:53:06 发布
阅读量93 收藏
点赞数
分类专栏： CSS系列 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56039150/article/details/125547676
版权

本文用于CSS基础学习

CSS从入门到出门

CSS—层叠样式表（Cascading Style Sheets），用于定义HTML内容在浏览器内的显示样式。

引入

  • 内联式：把CSS代码直接写进HTML标签中。标签指开始标签而非结束标签。多条样式之间用分号 隔开。
  • 嵌入式：把CSS代码写在style标签内。
  • 外部式：单独编写一个CSS文件，通过link标签引入。
  • 导入：@import，但是@import需要等待页面加载完后才会加载，可能出现无样式的情况。@import只能加载CSS。

三者优先级为：内联式>嵌入式>外部式 （近水楼台先得月） 。

FOUC

FOUC（Flash Of Unstyled Content）。使用@import导入CSS时，当样式表晚于结构性html加载时，页面将会停止之前的渲染。等到此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。

选择器

选择器是CSS灵魂所在：

选择器格式权重
!importantmax
id选择器#{}100
类选择器.{}10
属性选择器a[rel=“XXX”]10
伪类选择器a:hover{}10
标签选择器标签名{}1
伪元素选择器:before::after{}1
相邻兄弟选择器h2+p{}0
子选择器> ul>li{}0
后代选择器空格 p span{}0
通用选择器*{}0
分组选择器0

伪元素与伪类元素的区别

伪元素

在内容元素前后插入额外的元素或样式。

p::before{content:"学习CSS"}
伪类元素

将特殊的效果添加到特定的选择器上。

a:visited{color:yellow}

常见属性

可继承性

当一个继承熟悉没有指定值时，则取父元素的同属性的计算值

字体系列
属性作用
font设置所有
font-family字体系列
font-size字体大小
font-weight字体粗细
font-style字体样式
color字体颜色
文本系列
属性作用
text-indent文本缩进
text-align对齐方式
text-transform大小写
line-height行高（上一行基线到下一行基线的距离）
word-spacing单词间距
letter-spacing字母/文字间距
color字体颜色
表格布局
属性作用
caption-side
border-collapse
empty-cells
列表属性
属性作用
list-style-type
list-style-image
list-style-position
list-style列表风格
光标属性
属性作用
cursor光标为何种形态
元素可见性
属性作用
visibility控制元素隐藏

不可继承

文本属性
属性作用
vertical-align垂直文本对齐
unicode-bidi设置文本方向
white-space空白符处理
text-decoration添加到文本的装饰
text-shadow文本阴影
盒子模型
属性作用
width宽度
height高度
margin外边距
border边框
padding内边框
背景属性
属性作用
background背景
background-color背景颜色
background-image背景图片
background-repeat背景是否重复
background-position定位背景图像
background-attachment固定背景图像
定位属性
属性作用
float
clear
position
top
bottom
left
right
min-width
max-width
min-height
max-height
overflow
clip
z-index

隐藏元素的方法

方法
display:none消失，完全不占据位置，不响应
visibility:hidden隐藏，占据位置，不响应
opacity:0透明度为0，占据位置，响应
background-color: rgba(0,0,0,0.2)背景透明度为0，占据位置
z-index:负值用其他元素遮盖
clip/clip-path裁剪，占据位置，响应
transform:scale(0,0)缩放，占据位置，响应

内容布局

定位

相对定位

position:relative，该元素仍会待在原来的地方，但此后，可以通过设置top,bottom,left,right 属性，使该元素相对初始位置平移一定的距离。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .two{
      width: 200px;
      height: 200px;
      position: relative;
      left: 200px;
      top: -200px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

在这里插入图片描述

如果不设置position，两个盒子是竖直排列的，移动的距离可以是负值。

绝对定位

绝对定位会将元素拿出文档流，因此不会占用原来的空间。

绝对定位元素的包含块是距离他最近的定位祖先，也就是position属性设置为static之外的任意值的祖先元素。如果没有，那么就相对于根元素（html）元素定位。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
      left: 200px;
    }
    .two{
      width: 200px;
      height: 200px;
  /*     position: relative;
      left: 200px;
      top: -200px; */
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

在这里插入图片描述

将粉色的盒子设置absolute后，它脱离文档流不占位置，所以，绿色的盒子会跑到前面。

固定定位

固定定位是由绝对定位衍生出来的，不同之处在于，固定定位的包含块是视口（viewport） 。因此，固定定位可用来创建始终停留在窗口相同位置的浮动元素如：侧边栏等。

z-index

堆叠元素的次序：就像打扑克发牌一样，后发的牌会压在先发的牌上面。他们的次序可以通过z-index来调整。设置了z-index的元素，只要值是正值就会出现在没有设置z-index的元素上方，尚未设置z-index的元素会出现在z-index的值为负值的下方：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
      z-index: -1;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
       }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

在这里插入图片描述

当粉色框设置absolute时，粉色框覆盖绿色框，此时粉色框设置了z-index=-1，所以绿色框又将粉色框覆盖。

浮动

浮动可以使盒子向左或向右移动，直到其外边沿接触包含块的外边缘或另一个浮动盒子的外边沿。浮动盒子也会脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
      float: right;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

在这里插入图片描述

如果浮动元素后面跟着的是常规文档流中的元素，那么这个元素会当浮动元素不存在一样，该怎样布局就怎样布局。这会带来以下问题：

  • 父元素的高度无法被撑开，影响与元素同级的元素。
  • 与浮动元素同级的非浮动元素会紧随其后。
  • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则影响页面显示结构

未加浮动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      border: 3px orange solid;
    }
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }
    .three{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="one"></div>
    <div class="two"></div>
  </div>
  <div class="three"></div>
</body>
</html>

在这里插入图片描述

给框内元素添加浮动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      border: 3px orange solid;
    }
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
      float: left;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      float: left;
    }
    .three{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="one"></div>
    <div class="two"></div>
  </div>
  <div class="three"></div>
</body>
</html>

在这里插入图片描述

浮动添加后，父级盒子不能被撑开导致页面整体发生了变化。接下来我们清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      border: 3px orange solid;
    }
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
      float: left;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      float: left;
    }
    .three{
      width: 200px;
      height: 200px;
      background-color: purple;
    }
      
    /*在类名为clearfix的元素后面加入内容*/
   .clearfix:after{
    content: ".";	/*内容为.*/
    display: table;/*将元素转化为块级元素 也可以block*/
    height: 0;/*高度为0*/
    clear: both;/*清除左右两边浮动*/
  }
      
   /*IE6不支持伪类*/   
  .clearfix{
    *zoom: 1;
  }
  </style>
</head>
<body>
  <div class="container clearfix">
    <div class="one"></div>
    <div class="two"></div>
  </div>
  <div class="three"></div>
</body>
</html>

在这里插入图片描述

Flexbox

主轴：Flexbox可以针对页面中的某一区域，控制其中元素的顺序，大小，分布及对齐。这个区域内的盒子可以沿两个方向排列：默认水平排列（成行），也可以垂直排列（成列）。这个排列方式称为主轴。

辅轴：与主轴垂直的方向称为辅轴，区域内的盒子可以沿着辅轴发生位移或伸缩。

主尺寸：主轴方向的尺寸

应用：导航栏的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navbar ul{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
            list-style: none;
            padding: 0;
            background-color: skyblue;
            display: flex;
        }
        .navbar li{
            display: inline-block;
            text-align: center;
            background-color:pink;
            width: 20%;
            outline: 1px solid whitesmoke;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <ul>
            <li>Home</li>
            <li>Space</li>
            <li>Plantes</li>
            <li>Stars</li>
            <li>Mi</li>
        </ul>
    </nav>
</body>
</html>

在这里插入图片描述

元素层叠顺序

从低到高为：

  • 背景和边框
  • 负的z-index
  • 块级盒
  • 浮动盒
  • 行内盒
  • z-index=0
  • 正的z-index

页面布局

单位

单位特点
px（像素）固定，一旦设置不会改变
%（百分比）相对，相对于祖先
em（相对于父元素）相对，适用于移动端
rem（相对于根元素）相对，适用于移动端
vw（相对于视图窗口宽度）相对，相对于视图
vh（相对于视图窗口高度）相对，相对于视图

BFC

BFC（Block Formatting Context）块格式化上下文，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

W3C：浮动元素和绝对定位元素，非块级盒子的块级容器，以及溢出值不为“可见”的块级盒子，都会为他们的内容创建新的BFC。

触发规则
  • position为absolute或fixed
  • display为inline-block，table-block，table-caption
  • float不为none
  • overflow不为visible
  • 根元素就是最大的BFC

盒子模型

标准盒子

width = content

宽度 = width + padding + border + margin

box-sizing :content-box

IE盒子

width = content + padding + margin

宽度 = width + margin

box-sizing:border-box

属性
margin与padding

margin：需要在border外侧添加空白，且空白处不需要背景时。

padding：需要在border内测添加空白，且空白处需要背景时。

弹性盒布局

网格布局

多栏布局

两栏布局

一般的两栏布局指左边一栏宽度固定，右边一栏宽度自适应：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        //利用左浮动设置左栏，右栏margin-left与左栏等大
        .outer{
            height: 500px;
            background-color: skyblue;
        }
        .left{
            height: 100%;
            float: left;
            width: 200px;
            background-color:pink ;
        }
        .right{
            height: 100%;
            margin-left: 200px;
            width:auto;
            background-color: purple;
        }
        
        //利用BFC
        .outer{
            height: 500px;
            background-color: skyblue;
        }
        .left{
            height: 100%;
            float: left;
            width: 200px;
            background-color:pink ;
        }
        .right{
            height: 100%;
            overflow: hidden;
            background-color: purple;
        }
        
        //利用flex布局
        .outer{
            height: 500px;
            background-color: skyblue;
            display: flex;
        }
        .left{
            width: 200px;
            background-color:pink ;
        }
        .right{
            flex:1;
            background-color: purple;
        }
        
        //利用相对定位与绝对定位
        .outer{
            height: 500px;
            background-color: skyblue;
            position: relative;
        }
        .left{
            height: 100%;
            position: absolute;
            width: 200px;
            background-color:pink ;
        }
        .right{
            height: 100%;
            margin-left: 200px;
            background-color: purple;
        }
        
        //利用相对定位与绝对定位
        .outer{
            height: 500px;
            background-color: skyblue;
            position: relative;
        }
        .left{
            height: 100%;
            width: 200px;
            background-color:pink ;
        }
        .right{
            height: 100%;
            background-color: purple;
            position: absolute;
            left: 200px;
            bottom: 0;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

三栏布局

左右两栏宽度固定，中间自适应：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        //利用浮动，center盒子必须位于最后
        .outer{
            height: 500px;
            background-color: skyblue;
        }
        .left{
            height: 100%;
            width: 200px;
            float: left;
            background-color: pink;
        }
        .right{
            height: 100%;
            width: 200px;
            float: right;
            background-color:purple;
        }
        .center{
            height: 100% ;
            margin-left: 200px;
            margin-right: 200px;
            background-color: coral;
        }
        
        //利用flex，要使center盒子位于left和right中间
        .outer{
            height: 500px;
            background-color: skyblue;
            display: flex;
        }
        .left{
            width: 200px;
            background-color: pink;
        }
        .right{
            width: 200px;   
            background-color:purple;
        }
        .center{
            flex:1;
            background-color: coral;
        }
        
        //利用相对定位与绝对定位
        .outer{
            height: 500px;
            background-color: skyblue;
            position: relative;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: pink;
            position: absolute;
        }
        .right{
            width: 200px;
            height: 100%;
            right: 0;
            top: 0;
            background-color:purple;
            position: absolute;
        }
        .center{
            height: 100%;
            margin-left: 200px;
            margin-right: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

在这里插入图片描述

圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .head{
            height: 100px;
            background-color: yellow;
        }

        .outer{
            height: 500px;
            background-color: skyblue;
            padding-left: 200px;
            padding-right: 200px;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: pink;
            position: relative;
            left: -200px;
            float: left;
            margin-left: -100%;

        }
        .right{
            width: 200px;
            height: 100%;
            background-color: purple;
            position: relative;
            left: 200px;
            float: left;
            margin-left: -200px;
        }
        .center{
            width: 100%;
            height: 100%;
            float: left;
            background-color: orange;
        }

        .foot{
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="head"></div>

    <div>
        <div class="outer">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </div>

    <div class="foot"></div>
</body>
</html>

在这里插入图片描述

双飞翼布局

双飞翼布局和圣杯布局样式相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .head{
            height: 100px;
            background-color: yellow;
        }

        .outer{
            height: 500px;
            background-color: skyblue;
        }
        .center{
            float: left;
            height: 100%;
            width: 100%;
        }
        .inside{
            margin-left: 200px;
            margin-right: 200px;
            height: 100%;
            background-color: yellowgreen;
        }
        .left{
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 100%;
            background-color: pink;
        }
        .right{
            float: left;
            margin-left: -200px;
            width: 200px;
            height: 100%;
            background-color: purple;
        }
        
        .foot{
            height:100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="head"></div>

    <div class="outer">
        <div class="center">
            <div class="inside">

            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="foot"></div>
</body>
</html>

在这里插入图片描述

案例

三角形

CSS三角形是由边框绘制的，当边框粗细很小时，我们会认为他是矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 100px;
            height: 100px;  
            border: 3px solid;
            border-color: pink skyblue wheat yellowgreen;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

我们试着改变边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 100px;
            height: 100px;  
            border: 100px solid;
            border-color: pink skyblue wheat yellowgreen;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

我们可以很明显的看出边框并不是矩形（线）而是三角形，上述案例中心有一个100×100的盒子，接下来，我们去掉盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0;
            height: 0;  
            border: 3px solid;
            border-color: pink skyblue wheat yellowgreen;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

我们可以很清晰的看到，四个三角形。当我们使得边框其他三边均透明时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;  
            border-top: 100px pink solid;
            border-left:100px transparent solid;
            border-right:100px transparent solid; 
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;  
            border-top: 100px pink solid;
            border-right:100px transparent solid; 
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

当长和宽不相等时，我们可以改变三角形的形状：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;  
            border-left:100px transparent solid;
            border-right:100px transparent solid; 
            border-bottom: 200px pink solid;

        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

原理：对于边框

  • 取消一条边时：与这条边相邻的两条边会变直：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;  
            border-top: 100px pink solid;
            border-left:100px skyblue solid;
            /* border-right:100px wheat solid;  */
            border-bottom: 100px yellowgreen solid;

        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

  • 当仅有邻边时：两边会变成对分三角形：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;  
            border-top: 100px pink solid;
            border-left:100px skyblue solid;
            /* border-right:100px wheat solid;  */
           /*  border-bottom: 100px yellowgreen solid; */

        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

在这里插入图片描述

  • 当保留边没有其他接触时：所有东西都会消失

圆形

通过给正方形添加圆角实现圆形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
        }
        
        /*通过边框画圆*/
        .circle{
            width: 0;
            height:0;
            border-radius: 50%;
            border:100px pink solid ;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

在这里插入图片描述

扇形

通过给三角形添加圆角实现扇形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fan{
            width: 0;
            height: 0;
            border: 100px transparent solid;
            border-top: 100px pink solid;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="fan"></div>
</body>
</html>

在这里插入图片描述

性能优化

加载性能

  • CSS压缩：打包压缩CSS文件，减小文件体积
  • CSS单一样式
  • 减少使用@import使用link

选择器性能

  • 关键选择器：CSS选择符是从右往左进行匹配的，当使用后代选择器时，浏览器会遍历所有子元素来确定是否指定元素。
  • 避免使用*而只对需要用到的元素进行选择。
  • 尽量避免使用后代选择器，且后代选择器最好不要超过三层。
  • 对于可继承属性，避免重复指定规则。

渲染性能

  • 尽量减少使用高性能属性：浮动，定位。
  • 尽量减少页面重排，重绘。
  • 去除空规则{}以减少CSS文档体积。
  • 属性值为0时不加单位。
  • 属性值为小数，可以省略小数点之前的0。
  • 雪碧图（CSS sprites ）把网站上用到的一些图片整合到一张到单独的图片中，从而减少HTTP请求，但会使得图片体积增大。

可维护性与健壮性

  • 将具有相同属性的样式抽离出来，整合并通过class在页面中使用，提高CSS可维护性。
  • 样式与内容分离：将CSS定义到外部
&王大宇
关注
专栏目录
Spring Boot入门到精通（超详细）
qq_41627024的博客
06-06 6029
本文主要讲了Springboot从基础到高阶涉及到的相关技术，让读者能够快速入门，深入了解Springboot框架，并能够熟练的使用springboot，快速提升个人技能。
并查集从入门到出门
weixin_74705510的博客
12-08 871
一篇并查集入门级教学
树状数组从入门到出门
weixin_74705510的博客
12-08 867
树状数组入门级教学，以及树状数组拓展用法
d3从入门到出门
weixin_33777877的博客
07-30 197
前言 基于d3js 5.5版本基础教程 环境配置 下载最新d3js文件, 参考: d3js官网 当前版本5.5, d3js v4与v3之间的api有一定的差异。 选择元素 d3主要有两个选择器 select 选择相应的dom元素, 如果有多个, 选择第一个 selectAll 选择所有的指定的dom元素. 通过选择器可以选择相应得dom元素, 而选择器的语法基本就是css选择器的语法....
二分答案从入门到出门
weixin_74705510的博客
12-06 897
二分答案入门级教学以及STL的upper_bound()和lowber_bound()的使用
Service Worker 从入门到出门
weixin_38168696的博客
07-11 320
前言 正常的开场本应该是“什么是Service Worker”，但Service Worker往往会和PWA被一同提起。无论屏幕前的你是有丰富PWA开发经验的大佬，还是从没有听过这个概念的小佬，本文都有义务讲清楚Service Worker和PWA的关系，在此假设大家仅仅是一个对Service Worker感兴趣的前端工程师，并没有丰富的相关经验。 另外，本文力求抓住重点，理清思路，并不是一篇偏技...
Kali从入门到出门-手记
阿木同学
11-05 4983
KALI手记 [L]为方法 [Q]是问题点 [A]为解决办法 [T]为工具 常用工具 [T] DNSenum DNS工具、DNS枚举 #dnsenum --enum baidu.com 附加选项： #--threads [num] 设置多线程 #-r 启用递归查询 #-d 设置WHOIS请求之间的延迟 #-w 启用WHOIS请求 #-o 输出到指定位置 [T]Nmap 看主机是否在线 #nmap -sP 192.168.1.1 扫描指定IP端口 #nmap 192.168.1.1 扫描指定IP 范围端口 #
c语言从入门到秃头表情包,c语言从入门到放弃表情包 - c语言从入门到放弃微信表情包 - c语言从入门到放弃QQ表情包 - 发表情 fabiaoqing.com...
weixin_33266645的博客
05-21 1898
从入门到精神异常(资深病友狗头著)_精神异常_病友_狗头表情不好意思拿错了(Java Web从入门到精通)_拿错_JAVA_Web表情C语言从研发到脱发_脱发_研发_语言表情我也只是新手入门第一次见有人就如此会装逼 幸会幸会 哪里的话_新手入门_装逼_幸会幸表情熊猫头写个C语言(666)_666_写个_熊猫_语言表情有了这些，还要女朋友干嘛！(C语言、C++、微积分、CSS、Visual Stud...
牛逼！Java 从入门到精通，超全汇总版
热门推荐
程序员cxuan的个人主页
05-06 7万+
文章目录Java 基础Head First JavaJava 核心技术卷一Java 编程思想设计模式Head First 设计模式图解设计模式设计模式重学 Java 设计模式Java 进阶Java 并发编程实战Java 并发编程艺术Java 并发编程之美图解Java多线程设计模式JVM深入理解 Java 虚拟机Java 虚拟机规范HotSpot 实战自己动手写 Java 虚拟机MySQLMySQL 基础教程SQL 基础教程深入浅出 MySQLMySQL 必知必会SQL 必知必会高性能 MySQLMySQL
web前端从入门到放弃
apple_73086122的博客
10-19 1038
web前端初学
Springboot入门到精通（超详细文档）
m0_67393413的博客
06-12 3380
我们知道，从 2002 年开始，Spring 一直在飞速的发展，如今已经成为了在Java EE（Java Enterprise Edition）开发中真正意义上的标准，但是随着技术的发展，Java EE使用 Spring 逐渐变得笨重起来，大量的 XML 文件存在于项目之中。繁琐的配置，整合第三方框架的配置问题，导致了开发和部署效率的降低。2012 年 10 月，Mike Youngstrom 在 Spring jira 中创建了一个功能请求，要求在 Spring 框架中支持无容器 Web 应用程序体系结构
HTML5+CSS大作业——端午节日(25页) 图片滚动
12-01 382
HTML5+CSS大作业——端午节日(25页) 图片滚动 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????H
制作一个简单HTML传统端午节日网页（HTML+CSS）
wx___BJ050106的博客
08-15 824
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网......
CSS高级技巧
探索软件工程的奥秘
10-09 1102
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 681
【代码】CSS彩虹按钮设计demo。
CSS 容器查询一探究竟
最新发布
潜隐-前端
10-12 730
CSS container 已经出来很久了, 你是否真的好好了解过呢? 快来看一看吧, 本文将对 CSS container 特性进行详细梳理....
【CSS】flex: 1； 的意思
小秀的博客
10-09 455
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
CSS 实战录: 双栏、四等分、不等间距、自适应...
潜隐-前端
10-12 1066
本文深入探讨了在实际工作中遇到的一个 Flex 布局问题以及解决方案的总结, 旨在帮助其他开发者更好地应对类似的挑战!!
【CSS】SCSS混合的使用
owo_ovo的博客
10-09 314
【CSS】SCSS混合的使用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值