html+css基础：20、css3的新增长度单位、新增颜色设置方式、新增选择器、新增盒子模型相关属性(box-sizing、resize、box-shadow、opacity)
·
css3的新增长度单位、新增颜色设置方式、新增选择器、新增盒子模型相关属性的box-sizing、resize、box-shadow、opacity等：
Ⅰ、css3的新增长度单位：vw/vh、vmax/vmin
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增长度单位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: deepskyblue;
}
.box2 {
width: 20vw;
height: 20vh;
background-color: green;
}
.box3 {
width: 20vmax;
height: 20vmin;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">像素</div>
<div class="box2">vw和vh</div>
<div class="box3">vmax</div>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
// 在不同的视口下的页面(盒子大小是不同的)：
Ⅱ、css3的新增颜色设置方式：在CSS2中讲了
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>讲解CSS2时，已经详细说过了，请看CSS2的笔记</h1>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅲ、css3的新增选择器：
其一、代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增选择器</title>
</head>
<body>
<h1>讲解CSS2时，已经详细说过了，请看CSS2的笔记</h1>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
Ⅳ、css3的新增盒子模型相关属性：
其一、box-sizing 属性代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_box-sizing</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: deepskyblue;
padding: 5px;
border: 5px solid black;
margin-bottom: 20px;
}
/*
box-sizing：content-box | border-box
content-box 表示：padding和border不被包含在定义的width和height之内，是标准模式下的盒模型(实际宽度：200+5*2+5*2，内容宽度：200)；
border-box 表示：padding和border被包含在定义的width和height之内，怪异模式下的盒模型(实际宽度：200，内容宽度：200-5*2-5*2)；
*/
.box2 {
width: 200px;
height: 200px;
background-color: gray;
padding: 5px;
border: 5px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
其二、结果为：
// 一进入页面后的页面：
其三、resize 属性代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_resize</title>
<style>
/*
resize: none|both|horizontal|vertical;
none：用户无法调整元素的尺寸；
both：用户可调整元素的高度和宽度；
horizontal：用户可调整元素的宽度；
vertical：用户可调整元素的高度；
注意: 单独设置 resize 属性是无效的，resize 属性需要与 overflow 属性结合使用才有效，并且 overflow 属性的值需要设置为 auto、hidden 或 scroll；
并不是所有的元素都可以设置 resize 属性，比如 img 和 table 属性就没办法使用 resize 属性；
*/
.box1 {
width: 400px;
height: 400px;
background-color: orange;
resize: both;
overflow: scroll;
}
.box2 {
width: 800px;
height: 600px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">123</div>
</div>
</body>
</html>
其四、结果为：
// 一进入页面后的页面：
其五、box-shadow 属性代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_box-shadow</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: orange;
margin: 0 auto;
margin-top: 100px;
font-size: 40px;
/* 写两个值，含义：水平位置 垂直位置 */
/* box-shadow: 10px 10px; */
/* 写三个值，含义：水平位置 垂直位置 阴影的颜色 */
/* box-shadow: 10px 10px blue; */
/* 写三个值，含义：水平位置 垂直位置 模糊程度 */
/* box-shadow: 10px 10px 20px; */
/* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 */
/* box-shadow: 10px 10px 20px blue; */
/* 写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 */
/* box-shadow: -10px -10px 20px 10px blue; */
/* 写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 */
/* box-shadow: 10px 10px 20px 10px blue inset; */
position: relative;
top: 0;
left: 0;
transition: 0.4s linear all ;
}
.box1:hover {
box-shadow: 0px 0px 20px black;
top: -1px;
left: 0;
}
</style>
</head>
<body>
<div class="box1">你好啊</div>
</body>
</html>
其六、结果为：
// 一进入页面后的页面：
// hover 之后的效果：
其七、opacity 属性代码：
// 图片信息为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_opacity</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
font-size: 40px;
opacity: 0.1;
font-weight: bold;
}
.box2 {
position: relative;
}
h1 {
position: absolute;
top: 100px;
left: 0;
background-color: black;
color: white;
width: 400px;/* 此时使用 width：100%; 不生效的原因：因为其父元素是 box2，但 box2 是块级元素会铺满整个视图，但同时也是定位元素宽高是自己赋值的，因此 width: 100%; 会铺满视图 */
line-height: 100px;
text-align: center;
font-size: 40px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box1">你好啊</div>
<div class="box2">
<img src="../images/你瞅啥.jpg" alt="">
<h1>你瞅啥</h1>
</div>
</body>
</html>
其八、结果为：
// 一进入页面后的页面：
Ⅴ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482
更多推荐
30
0- 0
已为社区贡献3条内容
所有评论(0)