CSS3的新特性

1.盒子模型:

新增了box-sizing属性,通过该属性可以控制元素的尺寸和边框。

1.1有两种盒模型:

标准盒模型:宽度只包括content部分,padding、border、margin会额外增加到总宽高(box-siezing:content-box切换 );IE盒模型:宽度包含content、padding和border部分,设置的width就包含了border和padding(box-sizing: border-box 切换)。

2.背景与边框:

如多种背景图片、边框图片(border-image)等。

3.变形(transform)和过渡(transition):

transform属性:对元素进行平移(translate)、旋转(rotate)、缩放(scale)等变形操作。

transition属性:可以为元素属性变化添加动态效果。

4.动画(animation):

使用@keyframes规则定义动画的关键帧,然后通过animation引用这些动画。

5.Flex和Grid布局:

Flex布局:flex布局是一维的,通过控制主轴和交叉轴对元素进行排列。专注于对行或列的布局。

Grid布局:grid布局是二维的,可以同时控制行和列进行布局。

6.媒体查询:

使得网页设计可以相应不同设备的尺寸和特性。

html 复制代码
<style>
    .....

    /*媒体查询,检测视口宽度,满足375px才能执行其中的CSS属性*/
    @media(width:375px){
        html {
          ....css属性

        }
    }
</style>

7.伪类和伪元素:

伪类:用于选择那些特殊状态下的元素。常见的伪类: :hover、:focus、:nth-child等。

伪元素:用于选取和样式化某个元素的一部分。常见的伪元素: ::before、::after、::first-line等。

相关推荐
IT_陈寒18 小时前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦18 小时前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu18 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码18 小时前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
namekong81 天前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天1 天前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄1 天前
HTML 表单控件
前端·microsoft·html
学习笔记1011 天前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19431 天前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#