陈业贵的博客_css系列（精通精通）

display：flex

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0px;margin: 0px;}

html

属性值

默认值

原创 2021-11-16 16:29:38 166 阅读

css伸缩布局 (中)，讲解的到位。哈哈哈。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px;padding: 0px;

html

取值

基线

原创 2021-11-16 16:28:51 86 阅读

flex-direction

<!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 type="text/css"> *{

html

css

it技术

原创 2021-11-16 16:27:27 80 阅读

a伪类

<!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 type="text/css"> a:

a标签

伪类选择器

html

鼠标悬停

css

原创 2021-11-16 16:27:27 146 阅读

css中清除浮动float 上

<!DOCTYPE html><html lang="en"><head>

html

清除浮动

取值

企业开发

css

原创 2021-11-16 16:12:31 164 阅读

transtion详解

<!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 type="text/css"> *{padding: 0px;margi

html

过渡动画

css

HTML/CSS

原创 2021-11-16 16:11:24 151 阅读

transtion属性

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px;

过渡效果

html

css

HTML/CSS

原创 2021-11-16 16:11:24 90 阅读

flex-wrap align-content详解

<!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 type="text/css"> *{

html

css

取值

两端对齐

HTML/CSS

原创 2021-11-16 16:11:24 123 阅读

order排序

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 600px;

html

取值

css

HTML/CSS

原创 2021-11-16 16:11:24 145 阅读

flex-grow计算公式

<!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 type="text/css"> *

html

取值

css

HTML/CSS

原创 2021-11-16 16:11:24 173 阅读

transform-origin

<!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 type="text/css"> *{ marg

html

取值

css

HTML/CSS

原创 2021-11-16 16:11:23 152 阅读

transform集合

<!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 type="text/css"> *{padding: 0px;margi

html

取值

缩放

2d

css

原创 2021-11-16 16:11:23 71 阅读

perspective设置在哪里呢详解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>95-2D转换模块-旋转轴向</title> <style> *{ margin: 0; padding: 0; } ul{ width: 80

html

2d

HTML/CSS

原创 2021-11-16 16:11:23 175 阅读

transtion

<!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 type="text/css"> *{ marg

html

过渡效果

css

延迟时间

HTML/CSS

原创 2021-11-16 16:11:23 45 阅读

animation怎么执行的。

<!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 type="text/css"> *{ margi

html

css

动画效果

HTML/CSS

原创 2021-11-16 16:11:23 105 阅读

flex-shrink计算公式

<!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 type="text/css"> *{ marg

html

权重

取值

css

HTML/CSS

原创 2021-11-16 16:11:22 183 阅读

animation详解串写

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div { width: 100px; height: 50px; backgrou

html

css

延迟时间

HTML/CSS

原创 2021-11-16 16:11:22 79 阅读

animation属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>101-动画模块-其它属性上</title> <style> *{ margin: 0; padding: 0; } div { width:

取值

html

sed

HTML/CSS

原创 2021-11-16 16:11:22 51 阅读

animation属性

<!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 type="text/css"> *{padding: 0;margin:

等待状态

html

执行状态

取值

css

原创 2021-11-16 16:11:22 71 阅读

css中-清除浮动方式四

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html

css

清除浮动

块级元素

伪元素

原创 2021-11-16 16:10:48 54 阅读

css中清除浮动方式五

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html

css

清除浮动

原创 2021-11-16 16:10:22 73 阅读

css中清除浮动方式三

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html

块级元素

css

清除浮动

企业开发

原创 2021-11-16 16:10:12 66 阅读

css中伪元素选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>68-伪元素选择器</title> <style> *{ margin: 0; padding:

html

伪元素

选择器

标签名

显示模式

原创 2021-11-16 16:09:57 257 阅读

a：伪类

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html

css

原创 2021-11-16 16:08:13 92 阅读

css的border-radius注意点

<!DOCTYPE html><html><head> <title></title> <style typ

圆角

html

css

原创 2021-11-16 16:06:36 143 阅读

css中border-radius

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

html

css

原创 2021-11-16 16:06:21 159 阅读

css的linear-gradient注意点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>127-线性渐变</titl

html

线性渐变

原创 2021-11-16 16:06:11 99 阅读

css的linear-gradient

<!DOCTYPE html><html><head> <title></title> <style type="text/c

html

css

原创 2021-11-16 16:05:56 129 阅读

css的radial-gradient大详解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>130-径向渐变</title> <style> *{ margin: 0;

线性渐变

html

原创 2021-11-16 16:05:47 607 阅读

flex-grow flex-shrink注意点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: non

html

JavaScript

原创 2021-11-16 16:02:56 99 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

陈业贵的博客