CSS样式篇
文章平均质量分 61
CSS
零度flying
坐而论道,不如起而行之!!!
展开
-
探究CSS3中的transition和transform属性
探究CSS3中的transition和transform属性开门见山的说,transition、transform和translate这三者经常有人搞混,先把这三者做一个简单解释:transform是 转换,指的是改变所在元素的外观,它有很多种手段(转换函数)来改变外观,例如 位移、缩放、旋转 等,而其中的位移的函数名就叫translate,所以说,translate是transform的一部分。transition是 过渡,指的是某个CSS属性值如何平滑的进行改变,就是平常说的 动效。而tra转载 2021-06-07 17:19:22 · 812 阅读 · 0 评论 -
三列布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .w原创 2021-05-17 23:58:18 · 65 阅读 · 0 评论 -
BFC块级格式化上下文
转载:什么是BFCBFC的定义:(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。我们常说的文档流其实分为==定位流、浮动流和普通流==三种。而普通流其实就是指BFC中的FC。 FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及转载 2021-05-07 11:24:53 · 211 阅读 · 0 评论 -
伪元素和伪类
伪元素和伪类转自:伪元素和伪类的区别总结 其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 伪元素选择符转载 2021-05-07 10:15:08 · 130 阅读 · 0 评论 -
5.CSS---过渡线
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>画一个直线</title> <style> /*中间的过度的横线*/ .link-top { width: 50%; height: 1px; border-top: solid原创 2021-05-02 20:18:27 · 331 阅读 · 0 评论 -
1.CSS结构
CSS 基础知识1. CSS全称:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS结构1. CSS由样式表组成;2. 样式表由规则构成;3. 规则由选择器+声明块构成;4. 声明块包含各类样式声明数据;5. 声明数据为CSS属性+CSS属性组成的键值对组成; <style> .ceshi{原创 2021-04-11 18:56:29 · 262 阅读 · 0 评论 -
2.CSS选择器
CSS选择器常用选择器种类1.通配符选择器 * *{margin:0; padding:2px}2.id选择器 #list{ margin:0; padding:0px; border:none; }3.类选择器 .类名 .list{ width:23px; }4.元素 元素名(如:p) p{ font-size:12px; }原创 2021-04-11 18:52:44 · 73 阅读 · 1 评论 -
3.CSS -position定位
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .l原创 2021-04-11 15:26:11 · 51 阅读 · 0 评论 -
4.CSS---三角形
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .border-wrap {原创 2021-04-11 12:54:09 · 93 阅读 · 1 评论