七、 Emmet写法
Emmet写法：代码的简写方式，输入缩写VsCode会自动生成对于的代码
-
HTML
类选择器：<div class="box"></div> 标签名.类名 id选择器：<div id="box"></div> 标签名#id名 同级标签：<div></div><p></p> div+p 父子级标签：<div><p></p></div> div>p 多个相同标签：<span>1</span><span>2</span><span>3</span> span*3 有内容相同的标签：<div>内容</div> div{内容} -
CSS：
大多数简写方式为属性单词的首字母
八、背景属性
-
背景色：background-color
-
背景图：background-image
-
网页中使用背景图实现装饰性的图片效果
-
缩写：
bgi -
属性值：url（背景图URL）
<style> /* 背景图默认为平铺效果，有可能会复制粘贴多份填满盒子 */ /* 画一个700*700的盒子 */ div { width: 700px; height: 700px; background-image: url(./11相对路径/imagines/截图\ 2.png); } </style> </head> <body> <div>div 标签</div> </body>
-
-
背景图平铺方式：background-repeat
-
缩写：
bgr -
属性值：
-
no-repeat：不平铺
-
repeat：平铺（默认效果）
-
repeat-x：水平方向平铺
-
repeat-y：垂直方向平铺
<style> /* 盒子的左上角显示 */ div { width: 600px; height: 600px; background-color: pink; background-image: url(./11相对路径/1.jpg); background-repeat: no-repeat; /* background-repeat:repeat-x; */ } </style> </head> <body> <div>div 标签</div> </body>
-
-
-
背景图位置：background-position
-
缩写：
bgp -
属性值：水平方向位置 垂直方向位置
-
关键字：
-
left 左侧
-
right 右侧
-
center 居中
-
top 顶部
-
bottom 底部
-
-
坐标（数字+px，正负都可以）
水平：正数向左，负数向右
垂直：正数向下，负数向上
<style> /* 盒子的左上角显示 */ div { width: 700px; height: 700px; background-color: pink; background-image: url(./11相对路径/1.jpg); background-repeat: no-repeat; /* 左上角：background: position:0 0/left top*/ /* 右下角：background: position:right bottom */ /* 水平：正数向左，负数向右 */ /* background: position -50px 0 ; */ /* background-position: 50px 0; */ /* 垂直：正数向下，负数向上 */ /* background-position: 0 100px; */ /* background-position: 0 -100px; */ } </style> </head> <body> <div>div 标签</div> </body> -
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
/* background-position: bottom left; */ /* background-position: 50px; */
-
-
背景缩放：background-size
-
作用：设置背景图大小
-
缩写：
bgz -
属性值：
-
关键字
-
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
-
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
-
-
百分比：根据盒子尺寸计算图片大小
-
数字+单位（eg：px）
-
/* contain:如果图的宽度跟盒子尺寸相等停止播放，可能导致盒子露白 */ /* background-size: contain; */ /* cover:图片完全覆盖盒子，可能导致图片不全 */ /* background-size: cover; */ /* 100%图片宽度和盒子相等，图片高度按照图片等比例缩放 */ background-size: 100%;
-
-
背景图固定：background-attachment
-
作用：背景不会随着元素的内容滚动
-
缩写：
bga -
属性值：fixed
-
-
背景图复合属性：background
-
缩写：
bg -
属性值：背景色 背景图 背景平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
div { width: 700px; height: 900px; background: pink url(./11相对路径/1.jpg) no-repeat center bottom/cover; } -
九、显示模式
显示模式：标签（元素）的显示方式
作用：布局网页的时候，标签的显示模式选择合适的标签摆放内容
-
块级元素
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
-
-
行内元素
-
一行可以显示多个
-
设置宽高属性不生效
-
宽高尺寸由内容撑开
-
-
行内块元素
-
一行可以显示多个
-
设置宽高属性生效
-
宽高尺寸也可以由内容撑开
-
<style>
/* 块级：独占一行，宽度默认父级100%，加宽高生效 */
div {
width: 100px;
height: 100px;
}
.div1 {
background-color: brown;
}
.div2 {
background-color: orange;
}
/* 行内：一行可以显示多个；尺寸由内容撑开；加宽高不生效 */
span {
width: 200px;
height: 200px;
}
.span1 {
background-color: brown;
}
.span2 {
background-color: orange;
}
/* 行内块：一行存多个；默认尺寸由内容撑开；加宽高生效 */
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 块元素 -->
<div class="div1">div标签</div>
<div class="div2">div标签</div>
<!-- 行内元素 -->
<span class="span1">span11111111</span>
<span class="span2">span1</span>
<!-- 行内块元素 -->
<img src="./11相对路径/1.jpg" alt="">
<img src="./11相对路径/1.jpg" alt="">
</body>
转换显示模式
-
属性名：display
-
属性值
-
block：块级
-
inline-block：行内块
-
inline：行内
-
div {
width: 100px;
height: 100px;
/* display: inline-block; */
/* display: inline; */
}
.div1 {
background-color: brown;
}
.div2 {
background-color: orange;
}
案例
<style>
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}
/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
十、PxCook、盒子模型
PxCook（像素大厨）是一款截图射击工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
-
开发面板（自动智能识别）
-
设计面板（手动测量尺寸和颜色）
盒子模型作用：布局网页，摆放盒子和内容
盒子模型重要组成部分：
-
内容区域—width&height
-
内边距—padding（出现在内容与盒子边缘之间）
-
作用：设置内容与盒子边缘之间的距离
-
属性名：padding/padding-方位名词
div { width: 200px; height: 200px; background-color: pink; padding-top: 10px; padding-right: 30px; padding-bottom: 50px; padding-left: 30px; } -
内边距—多值写法
取值个数 示例 含义 一个字值 padding：10px 四个方向内边距均为10px 两个值 padding：10px 80px 上下：10px，左右：80px 三个值 padding：10px 40px 80px 上：10px，左右：40px，下：80px 四个值 padding：10px 20px 40px 80px 上：10px，右：20px，下：40px，左：80px
-
-
边框线—border
-
缩写：
bd -
属性值：边框线粗细 线条样式 颜色（不区分顺序）
-
常用线条样式
-
solid 实线
-
dashed 虚线
-
dotted 点线
div { width: 200px; height: 200px; background-color: pink; border: 2px dashed red; } -
-
设置单方向的边框线
-
属性名
border-方位名词（缩写：bd+方位名词首字母，eg：bdl） -
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div { width: 200px; height: 200px; background-color: pink; /* bdt */ border-top: 1px solid #000; /* bdr */ border-right: 2px dashed red; border-left: 5px solid orange; border-bottom: 3px dotted #000; } -
-
-
外边距—margin（出现在盒子外面)
-
作用：拉开两个盒子之间的距离
-
提示：与padding属性值写法、含义相同
-
外边距—多值写法（也可以写方位名词）
取值个数 示例 含义 一个字值 margin：10px 四个方向外边距均为10px 两个值 margin：10px 80px 上下：10px，左右：80px 三个值 margin：10px 40px 80px 上：10px，左右：40px，下：80px 四个值 margin：10px 20px 40px 80px 上：10px，右：20px，下：40px，左：80px div { width: 200px; height: 200px; background-color: pink; /* padding会撑大盒子 ，margin不会撑大盒子*/ padding: 20px; border: 1px solid black; margin: 50px; /* 要求盒子要有宽度，版心居中 */ margin:0 auto; }外边距问题——合并现象
-
场景：垂直排列的兄弟元素，上下margin会合并
-
现象：取两个margin中的较大值生效
<style> /* 取较大值 */ .one { width: 100px; height: 100px; background-color: pink; margin-bottom: 20px; } .two { width: 100px; height: 100px; background-color: orange; margin-top: 50px; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body>外边距问题—塌陷问题
-
场景：父子级的标签，子级的添加上边距会产生塌陷问题
-
现象：导致父子级一起向下移动
-
解决办法：
取消子级margin，父级设置padding；父级设置overflow：hidden；父级设置：border-top
<style> .father { width: 300px; height: 300px; background-color: pink; /*方法一： padding-top: 50px; */ /* 防止撑大盒子：box-sizing: border-box; */ /* 方法二：overflow: hidden; （溢出隐藏）*/ /* 方法三：border-top: 1px solid #000;（会撑大盒子） */ } .son { width: 100px; height: 100px; background-color: orange; /* 方法二、三：margin-top: 50px; */ } </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> -
-
盒子模型—尺寸计算
默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border/padding会撑大盒子
解决：1.手动做减法，减掉border/padding的尺寸 2.内减模式：box-sizing:borser-box
div {
width: 200px;
height: 200px;
/* 手动减法 */
/* width：160px */
/* height: 160px; */
background-color: pink;
/* padding: 20px; */
padding: 20px;
box-sizing: border-box;
}
盒子模型—元素溢出
作用：控制溢出元素的内容的显示方式
属性名：overflow
属性值：
-
hidden：溢出隐藏
-
scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
-
auto：溢出滚动（溢出才显示滚动条位置)
盒子模型—圆角
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字px/百分比
提示：属性值是圆角半径
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
/* border-radius: 20px; */
/* 四值：左上 右上 右下 左下（顺时针） */
/* border-radius: 10px 20px 40px 80px; */
/* 三值：左上 右上+左下 右下 */
/* border-radius: 10px 40px 80px; */
/* 两值：左上+右下 右下+左上 */
/* border-radius: 10px 80px; */
}
常见应用—正圆形状：给正方形盒子设置圆角属性为 匡高的一半/50%
常见应用—胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半
<style>
img{
width: 200px;
height: 200px;
/* 最大值是50%，超过50%没有效果 */
border-radius: 100px;
}
div{
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
</style>
</head>
<body>
<!-- 正圆形 -->
<img src="./屏幕截图 2023-04-09 161726.png" alt="">
<!-- 胶囊形 -->
<div></div>
</body>
盒子模型—阴影（拓展）
作用：各元素1设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
-
x轴偏移量和y轴偏移量必须书写
-
默认是外阴影。内阴影需要添加
inset
div{
width: 200px;
height: 80px;
background-color: orange;
margin: 50px auto;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;
}
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
