CSS3新增特性

已于 2023-04-10 21:06:07 修改
阅读量1k 收藏 19
点赞数 3
分类专栏： web前端开发 文章标签： css3 前端
于 2023-03-25 20:11:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47743942/article/details/129753601
版权

css3新增特性

 
 

1.css3简介

  • 新增了更加实用的选择器，如：动态伪类选择器、目标伪类选择器、伪元素选择器
  • 新增了更好的视觉效果，如：圆角、阴影、渐变
  • 新增了丰富的背景效果，如：支持多个多个背景图片、新增背景相关属性
  • 新增了全新的布局方案，弹性盒子
  • 新增了web字体
  • 新增了颜色设置方式
  • 新增了，例如：HSL、HSLA、RGBA，新增opacity属性控制透明度
  • 新增了2D和3D变化，如：旋转、扭曲、缩放、位移
  • 新增了动画与过渡效果
  • …

css3私有前缀：W3C标准所提出的某个css特性，在被浏览器正式支持之前，浏览器产商会根据浏览器内核，使用私有前缀来测试css特性，在正式支持后就不需要该私有前缀了，例如：-webkit-border-radius:20px

私有前缀查询
在这里插入图片描述

常见浏览器私有前缀：

  • Chrom浏览器：-webkit-
  • Safari浏览器：-webkit-
  • Firefox浏览器：-moz-
  • Edge浏览器：-webkit-

常用的css3新特性主流浏览器都是支持的，并且借助webpack构建工具可以帮我们添加私有前缀

 

2.新增长度单位

（面试常问！）
在这里插入图片描述
 

3.新增颜色设置方式

rgba：类似rgb，添加了透明度
hsl：色相、饱和度、亮度
hsla：色相、饱和度、亮度、透明度

 

4.新增选择器

动态伪类：
在这里插入图片描述

目标伪类：

:target 选中锚点指向的元素

语言伪类：

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

UI伪类：
在这里插入图片描述
结构伪类：
在这里插入图片描述
在这里插入图片描述
否定伪类：

:not(选择器) 排除满足括号中条件的元素

伪元素：
在这里插入图片描述
 

5.新增盒子属性

box-sizing怪异盒模型
在这里插入图片描述

resize调整盒子大小
在这里插入图片描述

box-shadow盒子阴影
在这里插入图片描述

opacoty不透明度
在这里插入图片描述
 

6.新增背景属性

background-origin 设置背景图原点

在这里插入图片描述

background-clip 设置背景图的向外裁剪的区域
在这里插入图片描述

background-size 设置背景图的尺寸
在这里插入图片描述

backgorund 复合属性
在这里插入图片描述

多背景图
在这里插入图片描述
在这里插入图片描述
 

7.新增边框属性

边框圆角
在这里插入图片描述

边框外轮廓
在这里插入图片描述

 

8.新增文本属性

文本阴影
在这里插入图片描述

文本换行

在这里插入图片描述

文本溢出
在这里插入图片描述

文本修饰
在这里插入图片描述

文本描边
在这里插入图片描述

 

9.新增渐变（本质背景图片）

线性渐变

在这里插入图片描述

<!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>HTML5</title>
    <style>
        .box{
            /* 默认从上到下，渐变角度为20，各个颜色开始位置 */
            background-image: linear-gradient(20deg,red 50px,yellow 100px, green 150px);
            font-size: 80px;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            color: transparent;
            -webkit-background-clip: text;/* 设置背景图的向外裁剪的区域 为text表示背景只呈现在文字上，需要加-webkit-前缀 */
            height: 200px;
            width: 400px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">坚持不懈</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>HTML5</title>
    <style>
        .box{
            /* 默认从圆心四散，不一定时正圆，看容器本身宽高比 */
            /* 长半径80，短半径50，圆心150,150，各个颜色渐变位置 */
            background-image: radial-gradient(80px 50px at 150px 150px,red 50px, yellow 100px,green 150px);
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

重复渐变
在这里插入图片描述
在这里插入图片描述
 

10.新增字体

通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字
体了，但是要注意兼容性。

存在问题：加载速度问题、版权问题、字体格式问题
在这里插入图片描述

使用字体图标：如阿里图标库、FontAwesome图标库

优点：
相比图片更加清晰，为矢量图放大不会失真
灵活性高，更加方便改变大小、颜色、风格等
兼容性好，IE也能支持

 

11.2D变换

使用transform属性
默认：坐标系往右为x正方向，往下为y正方向

.2D位移 （位移百分比是参照自身！！！）
在这里插入图片描述
在这里插入图片描述
 

2D缩放
在这里插入图片描述
里面文字也会缩放的，被拉伸，负数就实现了相反效果，缩放也不能应用在行内元素上

 

2D旋转
在这里插入图片描述
绕z轴才是2D旋转，绕x轴或y轴旋转是3D旋转，行内元素无法实现2D旋转

在这里插入图片描述

<!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>HTML5</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 50px;
        }
        .tran{
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(30deg);/* 2D旋转时与下面写法一样效果 */
            /* transform: rotateZ(30deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="tran"></div>
    </div>
</body>
</html>

 

2D扭曲（了解）
在这里插入图片描述
行内元素无法实现2D扭曲

 

多重变换
在这里插入图片描述
因为旋转之后坐标系就发生改变了，沿着自身的横向和纵向，而不是最初的坐标系了，在进行平移就按旋转之后坐标系，因此建议最后旋转。
在这里插入图片描述
 

变换原点
在这里插入图片描述
 

12.3D变换

父元素开启3D空间和景深，使用transform属性
在这里插入图片描述
在这里插入图片描述

 

透视点位置
在这里插入图片描述
在父元素上设置

 

3D 位移
在这里插入图片描述
当z轴位移等于景深长度值时，图形消失，因为与观察者眼睛平齐了，超过景深长度时也看不见了，相当于到观察者后脑勺后面去了，看不见了
z轴位移不能写百分比，因此浏览器中元素没有厚度，无法进行位移

 

3D旋转（3D效果最好）
在这里插入图片描述
在这里插入图片描述
 

3D 缩放
在这里插入图片描述
由于元素没有厚度，因此相当于对景深进行处理，如scaleZ(4)，相当于把景深长度值/4，即元素奔向你而来

 

多重变换
在这里插入图片描述
在这里插入图片描述

<!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>HTML5</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深 */
            perspective: 500px;
        }
        .tran{
            width: 100px;
            height: 100px;
            background-color: blue;
            transform-origin: left;
            transform: translateZ(200px) scaleZ(3) rotateY(40deg);
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="tran">坚持不懈</div>
    </div>
</body>
</html>

 

背部可见
在这里插入图片描述
 

13.过渡

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一
种样式

浏览器支持：Internet Explorer 10+, Firefox, Opera, Chrome, 和 Safari

transition-property 设置过渡属性
在这里插入图片描述
display:none无法实现过渡

 

transition-duration 设置过渡持续时间
在这里插入图片描述
 

transition-delay 设置过渡延迟时间

作用：指定开始过渡的延迟时间，单位： s或ms

 

transition-timing-function 设置过渡类型
在这里插入图片描述
ease比ease-in-out更平滑，刚开始ease-in-out更慢
step-start不考虑过渡的时间，直接到终点
step-end考虑过渡时间，但无过渡效果，过渡时间到了后直接到终点
贝塞尔曲线可以做橡皮筋效果，超过了再弹回来
 

transition 复合属性
在这里插入图片描述
 

过渡小案例：
在这里插入图片描述

在这里插入图片描述

<!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>HTML5</title>
    <style>
        .outer{
            width: 300px;
            height: 169px;
            border: 1px solid red;
            position: relative;
            /* overflow: hidden; */
            margin: 200px;
            transform-style: preserve-3d;
            perspective: 500px;
            background-image: url(4.gif); 
        }
        .dream{
            width: 300px;
            transition: all linear 1s;
            position: absolute;
            z-index: 10;
        }
        .mask{
            width: 300px;
            height: 169px;
            background-color: black;
            color: white;
            font-size: 60px;
            text-align: center;
            line-height: 169px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all linear 1s;
        }
        .outer:hover .mask{
            opacity: 0.5;
        }
        .outer:hover .dream{
            transform: translate3d(150px,105px,100px) scale(1.6) rotateX(360deg);
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="outer">
        <img class="dream" src="dream.webp">
        <div class="mask">我的梦想</div>
    </div>
</body>
</html>

 

14.动画

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续
快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流
畅
在这里插入图片描述

 

基本使用

  1. 第一步：定义关键帧
    （1）简单定义方式：
    在这里插入图片描述
    （2）完整定义方式：
    在这里插入图片描述
  2. 给元素应用动画（定义动画名字不能相同）

在这里插入图片描述
 

其它属性
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
不发生动画时，停在哪里

在这里插入图片描述

 

复合属性
在这里插入图片描述
 

动画小案例：
在这里插入图片描述

<!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>HTML5</title>
    <style>
        div{
            width: 283px;
            height: 567px;
            background-image: url(run.png);
            margin: 50px;
            animation: run 1s steps(5) infinite reverse;
        }
        @keyframes run {
            from{}
            to{
                background-position: -1134px 0;
            }
        }
    </style>
</head>
<body>
    <div></div> 
</body>
</html>

 

15.过渡和动画对比

  1. 过渡需要一个触发条件，如：鼠标点击，鼠标悬浮，按下按键等，而动画不需要触发条件，会自动进行
  2. 过渡只关注关键帧，而动画可以在各个阶段进行精细控制

 

16.多列布局

作用：专门用于实现类似于报纸的布局

在这里插入图片描述
在这里插入图片描述
 
在这里插入图片描述

<!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>HTML5</title>
    <style>
        div{
            column-count: 5;
            column-gap: 30px;/* 设置列边距 */
            column-rule: 5px dashed red; /* 列与列边框的风格，宽度、颜色 */
        }
        img{
            width: 100%;
            transition: all 0.8s linear;
        }
        img:hover{
            box-shadow: 0 0 20px gold;
            transform: translate(-100px,-100px) scale(1.5) rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="p1.webp">
        <img src="p2.webp">
        <img src="p3.webp">
        <img src="p4.webp">
        <img src="p5.webp">
        <img src="p6.webp">
        <img src="p7.webp">
        <img src="p8.webp">
        <img src="p9.webp">
        <img src="p10.webp">
        <img src="1.gif">
        <img src="2.gif">
        <img src="3.gif">
        <img src="4.gif">
        <img src="5.gif">
        <img src="meinv.jpg">
        <img src="p1.webp">
        <img src="p2.webp">
        <img src="p3.webp">
        <img src="p4.webp">
        <img src="p5.webp">
        <img src="p6.webp">
        <img src="p7.webp">
        <img src="p8.webp">
        <img src="p9.webp">
        <img src="p10.webp">
        <img src="1.gif">
        <img src="2.gif">
        <img src="3.gif">
        <img src="4.gif">
        <img src="5.gif">
        <img src="meinv.jpg">
        
    </div> 
</body>
</html>

 

17.伸缩盒模型

伸缩盒模型又称弹性盒子，Flexible Box
可以轻松控制：元素的分布方式、元素对齐方式、元素视觉顺序…
演变出新的布局方式—flex布局，在移动端应用比较广泛
传统布局方式：display属性+position属性+float属性

浏览器支持：
chrom：29.0+，在21.0+需要使用-webkit-
edge：11.+，在10.0+需要使用-ms-
firefox：28.0+，在18.0+需要使用-moz-
safari：9.0+，在6.1+需要使用-webkit-
opera：17.0+

 

伸缩容器、伸缩项目
在这里插入图片描述
元素没有脱离文档流，父元素不会高度塌陷，子元素成为伸缩项目，不包括子元素里面的子元素
 

主轴与侧轴
在这里插入图片描述
 

18.主轴方向
在这里插入图片描述

 

主轴换行方式
在这里插入图片描述
 

flex-flow属性
在这里插入图片描述

 

主轴对齐方式
在这里插入图片描述
在这里插入图片描述

 

侧轴对齐方式

  1. 一行的情况下
    在这里插入图片描述
    在这里插入图片描述

  2. 多行的情况下

在这里插入图片描述
stretch：如果伸缩项目未设置高度，将占满整个容器的高度
在这里插入图片描述
在这里插入图片描述
 

元素水平垂直居中
（面试题常问！！！很重要）

  1. 行内元素和行内块元素

text-align:center （父元素设置）
line-height:值(height) （父元素设置）

  1. 块级元素

margin:o auto
margin-top:值（（父高-子高）/2）
overflow:hidden（父级元素开启BFC，避免外边距重叠问题）
当子元素为行内时，没有外边距重叠问题，父元素为块级，子元素为块级时才有
但子元素为行内时，margin:0 auto无效，可以直接指定margin-left

position:absolute
top:0
bottom:0
left:0
right:0
margin:auto
position:relative（父开启相对）
开启定位后行内、行内块、块级都变成块级元素，需要父元素有高度

position:absolute
top:50%
left:50%
transform:translate(-50%, -50%) （再移回自身50%）或者 margin-left: -值; margin-top:-值;
position:relative（父开启相对）
开启定位后行内、行内块、块级都变成块级元素，需要父元素有高度

display:flex（父元素设置）
justify-content:center
align-items:center
开启flex后行内、行内块、块级都变成块级元素，需要父元素有高度

display:flex（父元素设置）
margin:auto（子元素设置）
开启flex后行内、行内块、块级都变成块级元素，需要父元素有高度

display:flex（父元素设置）
height:calc(100vh - 被占用高度)（父元素设置）（此处用法见后面案例）
margin:auto（子元素设置）
开启flex后行内、行内块、块级都变成块级元素，父元素没有高度时
calc( )属于css3，用于动态计算长度值，可以使用top: 50%; margin-top: -?px; 代替

 

基准长度 flex-basic
在这里插入图片描述

 

伸长 flex-grow

在这里插入图片描述
 

缩短 flex-shrink
在这里插入图片描述
在这里插入图片描述
压缩是按自身比例进行的，即同甘不共苦
压缩到极限时，也会保证里面内容的呈现
 

flex复合属性
（面试常问！！！）
在这里插入图片描述

flex:1 1 auto --> auto 可以拉伸，可以压缩，不设置基准长度
flex:1 1 0 --> 1 可以拉伸，可以压缩，设置基准长度为0，此处已均分显示
flex:0 0 auto --> none 不拉伸，不压缩，不设置基准长度
flex:0 1 auto --> 0 auto 不拉伸，可以压缩，不设置基准长度 （默认值）

 

项目排序

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0

通过给某个伸缩项目order值，改变视觉顺序

 

单独对齐

通过 align-self 属性，可以单独调整某个伸缩项目侧轴的对齐方式
默认值为 auto ，表示继承父元素的 align-items 属性

flex案例：
在这里插入图片描述

<!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>HTML5</title>
    <style>
    * { 
        font-family: Arial; 
        font-size: 14px; 
        margin: 0; 
        padding: 0; 
        border: none; 
        }
    a { text-decoration: none; }
    ul { list-style: none; }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;/* 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 */
    }
    .page-header{
        height: 70px;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
    .header-nav{
        display: flex;
    }
    .header-nav li a{
        color: white;
        font-size: 20px;
        border: 1px solid white;
        border-radius: 8px;
        padding: 10px;
        margin-right: 20px;
    }
    .header-nav li:last-child a{
        margin-right: 0;
    }
    .page-content{
        display: flex;
        height: calc(100vh - 70px);/* 动态计算父元素的高度：100%视口高度 - 被头部占用的高度 */
    }
    .content-nav{
        width: 1000px;
        height: 300px;
        margin: auto; /* flex布局没有脱离文档流的 */
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .content-nav .item{
        width: 180px;
        height: 200px;
        background-color: orange;
        display: flex;
        flex-direction: column;
        align-items: center; /* 此时侧轴默认为stretch，将占满整个容器高度，需要调整否则图片会放大 */
        justify-content: space-evenly;
        transition: all 0.2s linear;
        cursor: pointer;
    }
    .content-nav .item:hover{
        box-shadow: 0 0 20px gold;
        transform: scale(1.1); /* 一个值代表同时水平和垂直缩放比例 */
    }
    .content-nav .item span{
        font-size: 20px;
        color: white;
    }
    .content-nav .item:nth-child(1){
        background-color:#595CA8;
    }
    .content-nav .item:nth-child(2){
        background-color:#FF9D2E;
    }
    .content-nav .item:nth-child(3){
        background-color:#01A6DE;
    }
    .content-nav .item:nth-child(4){
        background-color:#015E91;
    }
    .content-nav .item:nth-child(5){
        background-color:#1DC128;
    }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header class="page-header">
        <a href="javascript:;">
            <img src="./logo.png" alt="">
        </a>
        <ul class="header-nav">
            <li><a href="javascript:;">国内校区</a></li>
            <li><a href="javascript:;">缅甸校区</a></li>
            <li><a href="javascript:;">非洲校区</a></li>
            <li><a href="javascript:;">美国校区</a></li>
        </ul>
    </header>
    <!-- 内容区 -->
    <div class="page-content">
        <div class="content-nav">
            <div class="item">
                <img src="item1.png">
                <span>我的邮箱</span>
            </div>
            <div class="item">
                <img src="item2.png">
                <span>云服务</span>
            </div>
            <div class="item">
                <img src="item3.png">
                <span>手机课堂</span>
            </div>
            <div class="item">
                <img src="item4.png">
                <span>微信服务</span>
            </div>
            <div class="item">
                <img src="item5.png">
                <span>在线客服</span>
            </div>
        </div>
    </div>
</body>
</html>

 

18.响应式布局

如小米官网、苹果官网，当界面缩小到一定程度时，呈现的界面是不一样的，没有响应式则出现滚动条
在这里插入图片描述

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成
媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）
使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
先写正常样式，在写媒体查询应用的样式，没有优先级，只是先后顺序，覆盖问题

浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

媒体查询类型：
all：检测所有设备
screen：检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等
print：检测打印机

媒体特性：

width： 检测视口宽度
max-width： 检测视口最大宽度
min-width： 检测视口最小宽度
height： 检测视口高度
max-height： 检测视口最大高度
min-height： 检测视口最小高度
device-width： 检测设备屏幕的宽度
max-device-width： 检测设备屏幕的最大宽度
min-device-width ：检测设备屏幕的最小宽度
orientation：检测视口的旋转方向（是否横屏）

  • portrait ：视口处于纵向，即高度大于等于宽度
  • landscape ：视口处于横向，即宽度大于高度

运算符：
and：并且
, 或 or：或
not：否定
only：肯定

加上only可以处理低版本IE的兼容性问题，由于无法识别媒体特性而导致乱加样式，加了only之后，若无法处理则全部忽略

 

常用阈值
以下为相比比较主流的划分，不绝对
在这里插入图片描述
 

基本用法
在这里插入图片描述

 

19.BFC

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个 “特异功能”。
该“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功 能”被激活
所谓激活“特异功能”，专业点说就是：该元素创建了BFC （又称：开启了 BFC ）

开启BFC解决的问题：
元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题
元素开启 BFC后，自己不会被其他浮动元素所覆盖
元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷

如何开启BFC
在这里插入图片描述
在这里插入图片描述

 

20.前端学习

在这里插入图片描述

 

21.补充:绝对定位元素的位置

元素开启了绝对定位后，水平局部公式必须满足：

包含块内容区的宽度 = left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right

当发生过度约束时：

  • 如果9个值中没有auto，则会自动调整right的值使等式成立
  • 如果有auto的值，则会调整auto的值使等式成立
  • 可以设置auto的值：margin，width，left，right
  • left和right默认为auto，如果不指定left和right的值，则会调整这两个值
.two{
    width: 100px;
    height: 100px;
    background-color: burlywood;

    position: absolute;
    /* margin:0 auto 0 auto; */
    margin-left: auto;
    margin-right: auto;
    /* left: 0; */    /* 不设置为0，则默认为auto */
    /* right: 0; */   /* 不设置为0，则默认为auto */
        }

在这里插入图片描述
开启绝对定位后，上述不写left: 0;right: 0;则设置margin-left: auto;margin-right: auto;来实现水平居中是无效的，会调整right的值，使等式成立
 

元素开启了绝对定位后，垂直局部公式必须满足：

包含块内容区的高度 = top+ margin-top + border-top + padding-top + width + padding-buttom+ border-buttom+ margin-buttom+ buttom

当发生过度约束时：

  • 如果9个值中没有auto，则会自动调整bottom的值使等式成立
  • 如果有auto的值，则会调整auto的值使等式成立
  • 可以设置auto的值：margin，width，left，right，top，bottom
  • top和bottom默认为auto，如果不指定top和bottom的值，则会调整这两个值
.two{
     width: 100px;
     height: 100px;
     background-color: burlywood;

     position: absolute;
     /* margin:auto auto 0 0; */
     margin-top: auto;
     margin-bottom: auto;
     /* top: 0;    */
     /* bottom: 0;    */
        }

在这里插入图片描述
因此，垂直水平居中实现如下：

.two{
     width: 100px;
     height: 100px;
     background-color: burlywood;

     position: absolute;
     margin:auto;
     left: 0;
     right: 0;
     top: 0;   
     bottom: 0;   
        }

在这里插入图片描述

 

339+
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【css新增特性思维导图梳理】
12-31
个人对【css新增特性思维导图梳理】
day7小结
KanaseKanon的博客
09-24 777
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
CSS3新增了哪些新特性？
最新发布
常来常往，共同成长
03-13 1655
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 而CSS3也增加了很多新特性，为开发带来了更佳的开发体验
CSS3新增了哪些新特性?
zy1992As的博客
03-20 204
CSS3的新特性大大提升了网页设计的灵活性和可扩展性，使得开发人员可以更轻松地实现各种效果和布局。10.@keyframes动画：用于创建CSS动画的新属性，可以在不同的关键帧上设置CSS属性的值。8.Flexbox布局：一种用于灵活布局的新模型，可以让容器的子元素自适应空间大小。9.Grid布局：另一种用于网格布局的新模型，可以在二维平面上对元素进行布局。12.过滤器：可以对元素的颜色、亮度、对比度、饱和度等进行调整。6.Transform：设置元素的旋转、缩放、倾斜等变换效果。
11.CSS3新增了哪些新特性？
kleinBlue.的博客
11-07 2933
一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 CSS3也增加了很多新特性，为开发者带来了更佳的开发体验 从几个维度列举一些常见的特性，如下 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆...
CSS3详解
clover_page的博客
04-12 3802
CSS3详解 一、CSS3 1-1、基本概念 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 1-2、发展历程 CSS1.0：网页基本样式 CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
【Css3新增的特性】
weixin_52369825的博客
07-18 510
5、文字排版：css3引入了一系列用于文字排版的属性，如text-shadow（文字阴影）、（text-overflow（文本溢出）、worder-wrap（断行处理）、text-justify(文本对齐和间距调整）等。4、阴影和渐变：css3 新增了box-shadow和linear-gradient/radial-gradient等属性，是的开发者可以通过css直接添加阴影效果和渐变色的效果，而无需依赖图像编辑工具。
CSS3中的5个有趣的新技术
12-02
CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。软件开发网将在这篇文章向...
HTML5与CSS3教程课件ppt
03-29
HTML5与CSS3的基础教程不仅介绍了文本、图像、链接、列表、表格、表单、多媒体等网页元素，也介绍了如何为网页设计结构、布局...书中详细讲解了视频、音频及其他新增特性，从零开始教会读者创建渐进增强的普适性网站。
CSS3知识总结
weixin_51109349的博客
12-15 1739
CSS3什么是css3浏览器前缀css3选择器边框圆角渐变径向渐变线性渐变文本和盒子阴影文字换行CSS3字体css3 背景倒影滤镜过渡2D装换3D转换动画1.指定动画2.使用动画flex布局多媒体查询怪异盒子多列布局 什么是css3 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。 最需要注意的问题是各个浏览器
【全面】CSS3新增了哪些新特性？
有事儿私信。
09-19 1502
CSS3 是 CSS (Cascading Style Sheets) 的第三个主要版本，引入了许多令人兴奋的新特性和功能。在本文中，我们将介绍 CSS3 中一些重要的新增特性，并提供相应的代码示例。
【前端知识之CSS】CSS3新增特性
weixin_44337386的博客
05-12 1592
本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS3新增特性。
前端开发面试题—CSS3新增特性
黛琳ghz的博客，期待你的关注。
09-01 1460
CSS3是CSS（层叠样式表）技术的升级版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题。使用CSS3不仅可以设计炫酷美观的网页，还能提高网页性能。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。...............
Css3详解
Zheng_xinle的博客
08-30 7151
Css3 一、什么是Css3? “CSS3是CSS（层叠样式表）技术的升级版本，是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能。CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。” 二、Css3可以做什么？ css3可以使用的图片和脚本来实现的效果 比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、过渡、动画、多栏布局、媒体查询等 Css3动画 一、Css3动画 CSS3 可以创建动画，它可以取代许多网
html5 css3新特性
08-22
HTML5和CSS3带来了许多令人兴奋的新特性。下面是其中一些主要的特性： HTML5： 1. 语义化标签：HTML5引入了一些新的语义化标签，如<header>、<nav>、<article>和<footer>，使得代码更加清晰易懂。 2. 媒体元素：新增的<video>和<audio>标签可直接在网页中嵌入视频和音频内容，不再需要使用第三方插件。 3. 本地存储：HTML5提供了Web Storage和IndexedDB两种本地存储方式，可以在客户端存储数据，减少对服务器的请求。 4. Canvas绘图：<canvas>标签允许通过JavaScript在网页上进行图形绘制，实现了更加复杂的动画和游戏效果。 CSS3： 1. 边框和阴影：CSS3引入了一系列新的样式属性，可以轻松地实现圆角边框、阴影效果等，提升页面的美观性。 2. 过渡和动画：通过transition和animation属性，可以在元素状态变化时实现平滑过渡和动画效果，提升用户体验。 3. 弹性布局：使用Flexbox模型可以更方便地实现弹性布局，使得网页在不同屏幕尺寸下自适应。 4. 媒体查询：CSS3中新增的@media查询可以根据设备屏幕尺寸和特性，为不同的设备提供不同的样式，实现响应式设计。 这些只是HTML5和CSS3中的一些新特性，它们为开发者提供了更多的可能性和更好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值