css、css3

置顶 已于 2025-02-27 17:20:12 修改
阅读量64 收藏
点赞数
分类专栏： 前端 文章标签： css3 前端
于 2022-11-29 11:27:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40017444/article/details/128093950
版权

css、css3

CSS

盒子模型

padding

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
在这里插入图片描述

margin

外边距合并问题

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

  1. 相邻块元素垂直外边距的合并
    在这里插入图片描述

  2. 嵌套块元素垂直外边距的塌陷
    在这里插入图片描述

定位

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

  • 定位模式—— position: static/relative/absolute/fixed/sticky
    在这里插入图片描述
  • 边偏移：
    在这里插入图片描述

绝对定位的盒子居中

在这里插入图片描述

定位叠放次序z-index

在这里插入图片描述

脱标盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）等的元素都不会触发外边距合并的问题。

元素显隐

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

CSS3

圆角边框

在这里插入图片描述

盒子阴影

在这里插入图片描述

文字阴影

在这里插入图片描述

文字阴影

在这里插入图片描述

新增选择器

在这里插入图片描述

属性选择器

在这里插入图片描述

结构伪类选择器

在这里插入图片描述

  • nth-child(n)与nth-of-type(n)区别举例
    1. nth-child(n)
      在这里插入图片描述
    1. nth-of-type(n)在这里插入图片描述

伪元素选择器

在这里插入图片描述

盒子模型

在这里插入图片描述

过渡

在这里插入图片描述

2D转换

在这里插入图片描述

动画

在这里插入图片描述

3D转换

在这里插入图片描述

浏览器私有前缀

在这里插入图片描述

其他特性（blur、calc）

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

本文参考资料：黑马程序员等

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值