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 · 749 阅读 · 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 · 308 阅读 · 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 · 237 阅读 · 0 评论 -
【CSS】基础笔记——第七天
▋ CSS属性书写顺序原创 2020-05-16 10:29:10 · 221 阅读 · 0 评论 -
【CSS】基础笔记——第六天
▊ CSS布局的三种机制普通流(标准流)浮动 定位 ▊ 为什么使用定位?我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素有时也需要一个不随着鼠标滚动而滚动的固定在屏幕上的盒子 ▊ 定位详解定位包含两部分:定位模式和边偏移▍边偏移很简单,就是:top: 20px 、 left: 30px这样的格式▍定位模式(position)(重点)总的来说,定位模式有:定位模式静态定位static相对定位relative原创 2020-05-16 10:28:22 · 334 阅读 · 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 · 270 阅读 · 0 评论 -
【CSS】基础笔记——第四天
▉ 浮动(float) ▊ CSS布局的三种机制网页布局的核心——用CSS摆放盒子CSS提供三种机制来设置盒子的摆放位置——普通流(标准流)、浮动、定位❶ 普通流——块级元素自上而下、行内元素自左到右的HTML布局❷ 浮动——让盒子从普通流浮起来,主要作用是让多个块级盒子一行显示❸ 定位——将盒子定在浏览器的某一个位置 ▊ 为什么需要浮动?当一行需要多个块且...原创 2020-05-16 10:26:59 · 231 阅读 · 0 评论 -
【CSS】基础笔记——第三天
▉ CSS盒子模型 ▊ 盒子模型(Box Model)盒子模型的四个组成部分:外边距(margin),边框(border),内边距(padding),内容(content)外边距——盒子与盒子的距离边框——盒子的厚度内边距——盒子边框与内容的距离 ▊ 边框(border)▶ 属性 :border-width(边框宽度),border-style(边框样式),b...原创 2020-05-16 10:26:28 · 374 阅读 · 2 评论 -
【CSS】基础笔记——第二天
▉ CSS复合选择器▶ 后代选择器又称为包含选择器可以选择元素或元素组的子孙后代;原理是根据这一整个父子关系链进行匹配;优点是可以匹配一个特定的标签组,减少代码量loli ul li { color: pink; } /* 快速匹配到<div class="loli">下的<ul>下的所有<li> */▶ 子元素选择器和后代选择器极为相似,但子元...原创 2020-05-16 10:25:55 · 247 阅读 · 0 评论 -
【CSS】基础笔记——第一天
▉ Hello,CSS▶ CSS(Cascading Style Sheets),称为CSS样式表、层叠样式表、级联样式表▶ 作用: 设置版面的布局和外观显示样式 ▉ CSS样式表▶ 行内式(内连样式)——控制一个标签 <div style="color: pink; font-size: 23px">萝莉赛高!</div>缺点是没有实现结构...原创 2020-05-16 10:25:11 · 246 阅读 · 0 评论