![](https://img-blog.csdnimg.cn/20210413094659833.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
修饰我们的world
samarua
while "live" : print("Loli")
展开
-
【CSS3】CSS3新特性——3D转换
▊ 透视(perspective) 视距是眼睛到屏幕的距离——近大远小 透视写在被观察元素的父盒子上 z是物体到屏幕的距离(z可以是负值) 通常都是给父盒子加perspective固定视角,然后修改子元素的translateZ ▊ 3D移动(translate3d) transform: translateX(n); transform: translateY(n); transform: translateZ(n); transform: translate3d(x, y, z);原创 2020-05-20 23:31:08 · 743 阅读 · 0 评论 -
【CSS3】CSS3新特性——2D转换
▊ 什么是转换(transform)? 转换可以理解为变形,可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果 ▍ 移动(translate) transform: translate(x,y); /*总写*/ transform: translateX(n); transform: translateY(n); /*分开写也行*/ 作用:改变元素在页面中的位置,类似定位 translate最大的优点:不会影响其他元素的位置 百分比写法是自身元素的原创 2020-05-20 23:30:40 · 297 阅读 · 0 评论 -
【CSS3】CSS3新特性——新增选择器
▊ 属性选择器 根据属性进行选择。 E[attr] 选择具有arrt属性的E元素 E[attr="val"] 选择具有arrt属性且属性值等于val的E元素 E[attr^="val"] 选择具有arrt属性、且属性值以val开头的E元素 E[attr$="val"] 选择具有arrt属性、且属性值以val结尾的E元素 E[attr*="val"] 选择具有arrt属性、且属性值含有val的E元素 注: 本质类似于交集选择器 类选择器、伪类选择器、属性选择器,权重为原创 2020-05-17 15:59:02 · 229 阅读 · 0 评论 -
【CSS】基础笔记——第七天
▋ CSS属性书写顺序原创 2020-05-16 10:29:10 · 213 阅读 · 0 评论 -
【CSS】基础笔记——第六天
▊ CSS布局的三种机制 普通流(标准流) 浮动 定位 ▊ 为什么使用定位? 我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素 有时也需要一个不随着鼠标滚动而滚动的固定在屏幕上的盒子 ▊ 定位详解 定位包含两部分:定位模式和边偏移 ▍边偏移 很简单,就是:top: 20px 、 left: 30px这样的格式 ▍定位模式(position)(重点) 总的来说,定位模式有: 定位模式 静态定位 static 相对定位 relative原创 2020-05-16 10:28:22 · 328 阅读 · 0 评论 -
【CSS】基础笔记——第五天
▋ CSS属性书写顺序 ❶ 布局定位属性:display / position / float / clear / visibility / overflow… ❷ 自身属性:width / height / margin / padding / border / background… ❸ 文本属性:color / font / text-decoration / text-align / ve...原创 2020-05-16 10:27:43 · 260 阅读 · 0 评论 -
【CSS】基础笔记——第四天
▉ 浮动(float) ▊ CSS布局的三种机制 网页布局的核心——用CSS摆放盒子 CSS提供三种机制来设置盒子的摆放位置——普通流(标准流)、浮动、定位 ❶ 普通流——块级元素自上而下、行内元素自左到右的HTML布局 ❷ 浮动——让盒子从普通流浮起来,主要作用是让多个块级盒子一行显示 ❸ 定位——将盒子定在浏览器的某一个位置 ▊ 为什么需要浮动? 当一行需要多个块且...原创 2020-05-16 10:26:59 · 220 阅读 · 0 评论 -
【CSS】基础笔记——第三天
▉ CSS盒子模型 ▊ 盒子模型(Box Model) 盒子模型的四个组成部分:外边距(margin),边框(border),内边距(padding),内容(content) 外边距——盒子与盒子的距离 边框——盒子的厚度 内边距——盒子边框与内容的距离 ▊ 边框(border) ▶ 属性 :border-width(边框宽度),border-style(边框样式),b...原创 2020-05-16 10:26:28 · 365 阅读 · 2 评论 -
【CSS】基础笔记——第二天
▉ CSS复合选择器 ▶ 后代选择器 又称为包含选择器 可以选择元素或元素组的子孙后代;原理是根据这一整个父子关系链进行匹配;优点是可以匹配一个特定的标签组,减少代码量 loli ul li { color: pink; } /* 快速匹配到<div class="loli">下的<ul>下的所有<li> */ ▶ 子元素选择器 和后代选择器极为相似,但子元...原创 2020-05-16 10:25:55 · 238 阅读 · 0 评论 -
【CSS】基础笔记——第一天
▉ Hello,CSS ▶ CSS(Cascading Style Sheets), 称为CSS样式表、层叠样式表、级联样式表 ▶ 作用: 设置版面的布局和外观显示样式 ▉ CSS样式表 ▶ 行内式(内连样式)——控制一个标签 <div style="color: pink; font-size: 23px">萝莉赛高!</div> 缺点是没有实现结构...原创 2020-05-16 10:25:11 · 239 阅读 · 0 评论