CSS基础样式设置
文本颜色的设置（color）
color属性: 设置文字颜色（可以继承的）
- 可以直接设置颜色的名字（开发中很少使用，因为不精确）
- red green yellow pink blue grey purple orange lightblue lightgreen greenyellow yellowgreen
-
设置为三原色 红r 绿g 蓝b
-
所有颜色都是由这三种颜色调制出来的
-
每一个颜色的值都是 0-255之间
-
rgb(30,120,200)
-
颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)
-
-
颜色还可以设置为十六进制（不能设置透明度）
-
#加上16进制的颜色值 6位 -
#112233--> 11代表red的十六进制值 22代表green颜色的十六进制值 33代表blue颜色十六进制值 -
十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候 可以每一位简写一个
#112233-->#123 #aabb11-->#ab1 #000000-->#000 #111222-->#111222
-
-
HSL设置颜色
-
H代表Hue 色调 0和360代表红色，选择范围是[0,360] 120代表绿色 240代表蓝色
-
S代表Saturation 饱和度 0-100%
-
L代表Lightness 亮度 0-100%
-
HSLA() 中 hsl代表的意思不变 a代表透明度 [1,0]
-
-
继承 inherit
-
透明颜色：transparent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
color: red;
color: rgb(30,120,200);
color: rgba(20,111,111,.7);
color: #ae43ea;
color: hsl(0,100%,50%);
color: hsla(0,100%,50%,.3);
}
</style>
</head>
<body>
<div class="outer">
今天天气真好
<span>对，真的好</span>
</div>
</body>
</html>
关于a标签颜色的继承
- a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
- 但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
- a的4个状态（有链接、被点击后、点击中、鼠标悬浮）是有自己的样式的，只能通过伪类来控制这4中样式
- 所以在开发中给a标签设置颜色，需要直接对a标签进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于a标签颜色的继承</title>
<style>
.box{
color: red;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈
<a>笑个鸡哦</a>
</div>
</body>
</html>font-famliy：设置字体(可以继承)
-
常见中文字体："Microsoft YaHei"、"SimHei"、"SimSun"
-
但是我们设置的字体用户可能没有，我们需要设置备用字体
在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体
-
目前常用的字体可以分为5大类
- serif：衬线字体族 衬线指的是字母结构笔画之外的装饰性笔画 （serif 典型的字体有：Times New Roman、MS Georgia、宋体……）
- sans-serif：无衬线字体族 （sans-serif 典型的字体有：MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体……）
- cursive:手写体族 楷体（cursive 典型的字体有：Caflisch Script、Adobe Poetica、迷你简黄草、华文行草……）
- monospace：等宽字体族 （monospace 典型的字体有：Courier、MS Courier New、Prestige……）
- fantasy：梦幻字体族（fantasy 典型的字体有：WingDings、WingDings 2、WingDings 3、Symbol……）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-famliy</title>
<style>
.box{
font-family: "Microsoft YaHei";
font-family: "SimSun";
font-family: "SimHei";
font-family: "SimHei","SimSun","Microsoft YaHei";
/*字体的五大类*/
font-family: Serif;
font-family: sans-serif;
font-family: cursive;
font-family: Monospace;
font-family: fantasy;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈
<span>笑个鬼</span>
</div>
</body>
</html>外部引入字体包
- 外部引入的字体包和某一个元素没有任何关系，而是本页面都可以使用这个字体
- 在css中使用@font-face来引入外部字体包
- 原来我们页面自带的字体包都有自己的名字，我们首先给引进来的字体包起一个名字,font-face中有一个font-famliy属性 是给字体包起名字的
- 还要使用src：url（）来引入字体包
- 根据你起得名字，来使用字体包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部引入字体包</title>
<style>
@font-face {
font-family: "jier";
src:url("../images/abc.ttf");
}
.outer{
font-family: "jier";
}
</style>
</head>
<body>
<div class="outer">
看我的表演 我是非主流子
</div>
</body>
</html>font-size
-
常用的单位是px、em、rem 当然也有不用的 cm in等等
-
可以设置小数（低版本ie不支持）
-
字号最好不要设置为奇数
-
一般来说汉字是正方形的，宽高就等于字号大小
-
但是实际文字占用的高度要大于字号大小，根据字体的不同，文字上下有一定的不能控制的间隙,因为文字的大小是基于4线格的（顶线 中线 基线 底线） 汉字并不能完整的填充满四线格
-
浏览器都有自己的默认字号大小和最小字号
谷歌浏览器默认字号大小是16px
谷歌浏览器支持的最小字号 多数是12px
如果设置12以下，字体不支持
但是如果设置字号为0 那么文字高度为0 消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字号设置</title>
<style>
.box{
font-size: 30px;
font-family: "Microsoft YaHei";
font-family: "SimSun";
font-family: "SimHei";
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈
<span>我也哈哈gj哈</span>
</div>
</body>
</html>字体风格：font-style（可以继承）
-
normal：正常
多数元素的默认值
对于默认倾斜或斜体的元素 i var em 可以调整成正常非倾斜样式
-
italic 让元素呈现斜体 一般指的是一个字体
在字体设计的过程中，会对一个文字设计 正常体 斜体 粗体 等状态
而italic只是选择让使用斜体显示
-
oblique 让常规字体进行倾斜（强行让当前文字变倾斜）
oblique 后可以跟一个旋转角度 以deg为单位
谷歌只支持0deg
火狐只支持汉字和-90 -90度的设置
-
对于上边两种倾斜版本，使用上没有什么区别（italic会占用高度较小）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
em,i,var{
font-style: normal;
}
.outer{
font-style: italic;
font-style: oblique 0deg;
}
</style>
</head>
<body>
<div>
<em>em啊</em>
<i>i啊</i>
<var>哈哈哈啊</var>
</div>
<div class="outer">
outer中
<span>span里</span>
</div>
</body>
</html>font-weight:(继承)
用来定义字体的粗细 其实目前浏览器只支持3个级别 细 正常 粗
-
normal：正常粗细 可以将默认加粗的字体进行改变为正常 比如 b strong
-
bold：加粗
-
bolder:相对父级来说的，比父级要粗一个级别
-
lighter：相对父级来说，比父级细一个级别
-
100-900 整除100的整数：
因为浏览器只支持 细 粗 正常3个 所以
100-300 是细
400-500 正常
600-900 加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-weight 字体粗细</title>
<style>
.outer b,.outer strong{
font-weight: normal;
}
.box{
font-weight: bold;
}
.box span{
font-weight: lighter;
}
.box span em{
/*font-weight: lighter;*/
font-weight: bolder;
}
.con{
font-weight: 100;
}
</style>
</head>
<body>
<div class="outer">
<b>我是小b</b>
<strong>我是小s</strong>
</div>
<div class="box">
我是一个box
<span>我是一个span <em>我是em</em></span>
</div>
<div class="con">
我是con
</div>
</body>
</html>font合写：
font-style font-weight font-size/line-height font-famliy
- font合写必须要书写 font-size 和font-famliy 否则合写不生效
- font合写其实在实际项目中使用的很少，一般我们要分开设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font合写</title>
<style>
.font{
line-height: 1.8;
font:italic bold 40px "Microsoft YaHei";
}
</style>
</head>
<body>
<div class="font">
看我的合写 你记不记得住
</div>
</body>
</html>line-height：(继承)
-
用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离
-
line-height和内联元素连接非常紧密，行高直接决定了内联元素占用的高度（不包括替换元素）
-
值：(不支持负值)
- normal：执行浏览器默认值，在各个浏览器中不同，并且还受字体的影响
- 数字：没有单位，比如1.5 就是当前元素文字大小的1.5倍
- 百分比：也是相对于当前元素的文字大小计算的，很少使用
- 长度：带单位，直接设置行高
-
行距与半行距
行距是 上边一行文字的底线和下边一行文字的顶线之间的距离
半行距 就是行距的一半; 让行高减去一行文字的高度，得到的值除以2，就是半行距
一行文字的上边和下边分别是两个半行距
半行距高度*2 + 文字的字号 = 行高
-
使用line-height对单行文字（也可以是内联元素）做垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line-height</title>
<style>
.con1{
width: 200px;
background-color: red;
color: #fff;
/*line-height: 1.8;*/
/*line-height: 100%;*/
/*line-height: 16px;*/
}
.con2{
background-color: red;
line-height: normal;
}
.con3_outer{
background-color: red;
line-height: 16px;
}
</style>
</head>
<body>
<p class="con1">
用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离
</p>
<div>
<span class="con2">我是一个spanpan</span>
</div>
<br>
<div class="con3_outer">
<span class="con3">看我居中</span>
</div>
</body>
</html>单行文字做垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文字做垂直居中</title>
<style>
.box{
/*line-height的设置 可以让元素在line-height的值里边垂直居中，不一定非要设置高度*/
background-color: red;
/*height: 100px;*/
line-height: 100px;
}
.con{
background-color: pink;
line-height: 100px;
/*span在con中垂直居中，主要是看父元素的line-height*/
}
.con span{
line-height: normal;
}
</style>
</head>
<body>
<div class="box">
今天天气知道你好
</div>
<div class="con">
<span>你好</span>
</div>
</body>
</html>line-height的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line-height的继承</title>
<style>
.nav>li{
width: 200px;
height: 60px;
line-height: 60px;
background-color: red;
position: relative;
}
.con{
position: absolute;
top: 60px;
left: 0;
background-color: pink;
line-height: 20px;
display: none;
}
.nav>li:hover .con{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li>
今日头条
<ul class="con">
<li>头条1</li>
<li>头条2</li>
<li>头条3</li>
<li>头条4</li>
<li>头条5</li>
<li>头条6</li>
</ul>
</li>
</ul>
</body>
</html>vertical-align
-
一种简单的 CSS 属性，用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
-
默认情况下，在一个行框中，所有内容都是基线对齐
-
但是图片没有基线，所以就把图片的底部当成了基线对了
-
vertical-align 可以设置让一个元素以自身的哪一个位置对齐
-
值：
-
baseline 基线对齐
-
top 让元素顶部与整行的顶部对齐
-
bottom 让元素底部与整行的底部对齐
-
middle 让元素的中间在行框的x-height中间对齐
-
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06.vertical-align</title>
<style>
.box{
background-color: red;
font-size: 100px;
height: 400px;
}
.box img{
height: 50px;
vertical-align: baseline;
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
vertical-align: text-top;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/05.jpg" alt="">
<span>hehehe</span>
哈
</div>
</body>
</html>-
使用
vertical-align你能在不同场景下去进行灵活细微的元素对齐工作-
float：只能对齐它们的顶部，而且可能导致布局塌陷，需要手动清除 -
position:absolute：会使元素脱离文档流，以致于它们不能影响周围的元素 -
手动添加内外边距的方法：需要父元素高度固定
-
transform:translateY：属于 CSS3 新特性，对 IE8、IE9 有一些兼容性的问题
-
让图片在父级垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让图片在父级垂直居中</title>
<style>
.box{
height: 500px;
background-color: red;
line-height: 500px;
}
.box img{
height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/05.jpg" alt="">
</div>
</body>
</html>去除图片默认间隙
-
因为图片底部默认和行框的文字基线对齐，所以图片和行框底部有一定的间隙
-
就算行框只有一个图片，间隙也存在。是因为在当前行框内，如果存在一个行内块元素的时候，就会渲染一个看不见摸不着的节点
-
这个节点拥有当前元素的字号大小，行高等信息。这个节点被称作为“幽灵空白节点”
-
去除间隙：
-
display:block;
图片底部能够和文字的基线对齐，是因为图片默认的vertical-align为baseline
但是verticle-align这个属性只有行内元素和行内块元素支持，块级元素是失效的
所以将img设置为块元素属性 就可以不用基线对齐了
也可以理解为：因为改成块，解决了幽灵空白节点的问题,并且没有元素和他在个行框
-
设置verticle-align不为baseline 比如 top bottom middle都可以
-
空白是文字有字号大小，撑开了当前的em方框
直接让字号大小变成0 文字就没有大小了 也就是幽灵空白节点文字大小变成0了 也不会撑开间隙了,主要针对于没有文字的行框
-
改变文字的高度 文字的高度可以由line-height来控制
让line-height：0 也可以解决问题
-
浮动
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06.vertical-align</title>
<style>
.box{
background-color: red;
/*font-size: 0px;*/
/*line-height: 0;*/
}
.box span{
font-size: 50px;
}
.box img{
height: 150px;
/*display: block;*/
/*vertical-align: middle;
vertical-align: top;
vertical-align: bottom;*/
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/05.jpg" alt="">
<span>hahahagh</span>
</div>
<div>
<span></span>
</div>
</body>
</html>text-decoration：文本修饰（不继承）
虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围
- none：取消下划线
- underline:下划线
- overline:上划线
- line-through：删除线
text-decoration其实是一个简写的属性。
- text-decoration-line：上划线 下划线 删除线
- text-decoration-color：颜色
- text-decoration-style：实线solid 虚线dashed 点线dotted 波浪线wavy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
a,u{
text-decoration: none;
}
.outer{
text-decoration: underline;
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
}
.outer span{
text-decoration: overline red wavy;
}
</style>
</head>
<body>
<div>
<a href="###">a</a>
<u>u</u>
</div>
<div class="outer">
<span>你好</span>
世界
</div>
</body>
</html>text-indent首行文本缩进
-
单位是px 缩进的像素 固定的单位，字号大小改变 还需要重新书写px
-
em单位 em是一个相对单位，1em=当前文字的字号大小 如果缩进两个文字 那么2em
-
只针对块级元素生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.text-indent首行文本缩进</title>
<style>
p{
width: 200px;
background-color: yellow;
font-size:16px;
/*text-indent: 32px;*/
text-indent: 2em;
}
span{
text-indent: 2em;
}
</style>
</head>
<body>
<p>
今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
<br>
<span>
真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊
</span>
</p>
</body>
</html>text-align:(继承)
- 规定行内的内容如何相对于它的块级父元素水平方向对齐
- 并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐
- left：默认 左对齐
- center：居中
- right：右对齐
- justify 两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本对齐</title>
<style>
.outer{
width: 600px;
height: 200px;
background-color: red;
text-align: center;
}
.con{
width: 300px;
height: 100px;
background-color: yellow;
text-align: center;
text-align: right;
line-height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="con">
hello world <span>span</span>
</div>
</div>
</body>
</html>字符和词间距：
-
在html中，英文数字的组合 只要没有空格都会被当做是一个单词
在汉字中，虽然不会把多个汉字连在一起当做是一个单词
但是仍然词间距的时候 ，只改变空格隔开的间距
-
letter-spacing:控制字符间距
-
word-spacing:控制词间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符和词间距</title>
<style>
.show{
/*width: 100px;*/
background-color: red;
letter-spacing: 0px;
word-spacing: 0px;
}
</style>
</head>
<body>
<div class="show">
how are you i'm fine thank you
<br>
今天天气 真的好
</div>
</body>
</html>背景类的设置：
-
背景颜色设置：
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box;">
背景图的设置：
background-image:url(路径) 背景图引入后 默认原点在元素的左上角
在html中，由左至右 是x轴方向 由上至下 是y轴方向 x和y的交叉是原点
-
背景图定位：
background-position：x轴方向位置 y轴方向位置
值的写法：
- px
- 百分比 百分比是参照于 容器的总宽度-图片的总宽度
- 其他写法
- x：center left right
- y: center top bottom
-
background-repeat:控制背景图片是否平铺
- no-repeat：不平铺
- repeat：x和y都平铺（默认）
- repeat-x：只有x轴平铺
- repeat-y：只有y轴平铺
-
背景图提供了合写（一般我们都使用合写）
background：color image position repeat；
都可以进行省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景类的设置</title>
<style>
.box{
width: 1000px;
height: 600px;
/*background-color: #5df2ff;
background-image: url(../images/05.jpg);
background-position: 50px 50px;
background-position: 50% 50%;
background-position: right 50%;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;*/
/*background: #5df2ff url("../images/05.jpg") center center no-repeat;*/
/*background-color: red;
background: url("../images/05.jpg") center center no-repeat;*/
}
</style>
</head>
<body>
<div class="box">
我是一个box元素
</div>
</body>
</html>overflow属性
-
元素超出父级，不会影响父级的兄弟元素位置
-
overflow属性定义一个内容太大无法适应容器的时候应该怎么做
-
设置给被超出的元素
- visible：默认，内容不会被修剪，而是显示在元素的框外
- hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成
-
overflow：auto和scroll的区别：
- auto:是自动生成滚动条，不超出不生成 超出才生成
- scroll：无论是否超出都会生成滚动条
-
overflow-x：
overflow-y：
只控制x和y的超出情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow属性</title>
<style>
.outer{
width: 200px;
height: 100px;
background-color: red;
/*overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;*/
overflow-x: hidden;
overflow-y: hidden;
}
.con{
width: 400px;
height: 200px;
background-color: pink;
}
.bottom{
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="con">
今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</div>
</div>
<div class="bottom">
</div>
</body>
</html>display属性：
-
指定了元素的显示类型，包含两种基础特征，用于规定元素生成什么样子的盒模型
-
外部显示类型：定义元素怎么样参加流体布局
-
内部显示类型：定义了元素内 子元素的布局方式
-
-
值
-
block：
让元素以块标签属性显示（block-block）
-
inline
让元素以行元素属性显示（inline-inline）
-
inline-block
让元素以行内块的属性显示
inline控制行内显示
block控制可以设置宽高
-
none:
让元素隐藏，包含子孙元素全部隐藏，并且不会占用任何位置，在DOM也访问不到可视化宽高（就算设置了宽高，使用js的offsetWidth和offsetHeight都获取不到宽高）
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
.con1{
display: block;
width: 400px;
height: 100px;
background-color: pink;
}
.con3{
display: inline;
width: 100px;
height: 100px;
background-color: red;
}
.con4{
display: inline-block;
width: 100px;
height: 100px;
background-color: #5df2ff;
}
.con5{
display: none;
}
</style>
</head>
<body>
<span class="con1">hello</span>
<em class="con2">world</em>
<div class="con3">那哈哈哈</div>
<div class="con4">con44</div>
<div class="con5">
222
<span>333</span>
</div>
</body>
</html>visibility属性：
控制元素显示或者隐藏
- hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
- visible：让visibility：hidden隐藏的元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
.box{
width: 600px;
height: 400px;
background: yellow;
}
.con1{
width: 300px;
height: 100px;
background-color: pink;
visibility: hidden;
}
.con1 .inner{
width: 100px;
height: 50px;
background-color: #5ab3f4;
visibility: visible;
}
.con2{
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="con1">
<div class="inner"></div>
</div>
<div class="con2"></div>
</div>
</body>
</html>display和visibility隐藏的区别
- visibility可以继承，子元素是因为继承了才隐藏
- 可以覆盖继承，子元素即可显示
- display不能被继承，而是直接带着所有内部元素直接隐藏
- visibility隐藏，原来空间仍然保留,display隐藏，原来空间消失被占用
- js可以获取到visibility隐藏元素的可视化宽高, js不可以获取到display隐藏元素的可视化宽高
opacity不透明度：
指定了一个元素的透明度
- 当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待 即使里边的元素没有继承opacity。它也和父级有一样的透明度
- opacity的取值是 1-0
- 1代表完全不透明
- 0代表完全透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opacity透明度</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: deeppink;
font-size: 30px;
text-align: center;
line-height: 200px;
opacity: .6;
}
</style>
</head>
<body>
<div class="box" id="box">
<span>你好</span>
</div>
<script>
var oBox = document.querySelector("#box");
var timer = null;
var i = 1;
timer = setInterval(function () {
i -= 0.01;
oBox.style.opacity = i;
},1000/60)
</script>
</body>
</html>opacity和rgba和hsla透明的区别：
- rgba和hsla只是一个颜色，是属性的取值，比如color background-color，所以只是对颜色的一个处理
- opacity是一个属性，透明是直接设置给元素的，并不会对元素的某部分进行控制
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器