一. 行高
行高:文本行与行之间的间距,文本基线与基线之间的距离
/* 一行文本居中,行高=标签高度 */
.box {
height: 200px;
font-size: 40px;
line-height: 200px;
background-color: pink;
}
/* 多行文本居中,使用padding挤开 */
.box-1 {
height: 200px;
font-size: 40px;
padding: 80px 0;
background-color: red;
}
二. 圆角及透明度
border-radius: 圆的半径
opacity: 盒子透明度,会影响文本
background: rgba(0,0,0,.2) 背景透明度,不影响文本
<!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>
/* 设置圆角 */
.box {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
/* 不同圆角 */
.box-1 {
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* 透明度 */
.box-2 {
width: 200px;
height: 200px;
/* 盒子透明 */
background-color: pink;
opacity: 0.6;
/* 视觉消失,占位 */
opacity: 0;
}
.box-3 {
width: 200px;
height: 200px;
/* 背景色透明,不影响文本 */
background-color: rgba(255, 192, 203, 0.6);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box-1"></div>
<div class="box-2">pink</div>
<div class="box-3">pink</div>
</body>
</html>
三. 颜色值
三种写法
1.英文单词 2.十六进制 # 3.rgb()
.box{
width:100px;
height:100px;
background-color:black
background-color:#fff
background-color:rgb(0,0,0)
}
四. 浮动
文档排版的一种方式,有左浮动和右浮动两种,主要解决块级标签独占一行的排版不便,但也会产生脱离文档流影响后面结构和父元素塌陷等问题。
.fl {
float: left;
}
.fr {
float: right;
}
产生影响一:脱离文档流
<style>
.box-1,.box-2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box clearfix">
<div class="box-1">1</div>
<div class="box-2 fl">2</div>
</div>
可以看到,浮动的2号蓝色盒子影响了后面的结构,使结构向上移动,盒子内容也受到了影响
产生影响二:父元素塌陷
<style>
.father {
width: 300px;
background-color: gray;
}
.father .child {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div class="father">
<div class="child fl">1</div>
<div class="child fl">2</div>
</div>
当父元素的高度是靠子元素的高度撑开时,子元素浮动时,父元素就看不见了,也就是塌陷,解决方法是给父元素添加清除浮动的属性。
/* 万能清除 */
.father::after {
content: "";
height: 0;
display: block;
clear: both;
zoom: 1;
}
清除浮动方式总结
1.最常用的伪元素方法
/* 万能清除 */
.father::after {
content: "";
height: 0;
display: block;
clear: both;
zoom: 1;
}
2.增加清除浮动的盒子,即挡板
<div class="father">
<div class="child fl">1</div>
<div class="child fl">2</div>
<div style="clear: both"></div>
</div>
3.父元素溢出隐藏 overflow:hidden
五. 定位
即position,多与方位属性连用
- top: 上移
- left: 左移
- right:右移,与left属性一同出现时,以left为准
- bottom:下移,与top属性一同出现时,以top为准
- z-index:层级,Z轴移动
position的属性
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位
- static 无定位
<style>
/*
方位属性
position: absolute;
top: 600px;
left: 600px;
right:
bottom:
z-index:层级
*/
/*
position的属性
relative
absolute
fixed 固定定位
sticky 粘性定位
static 无定位
*/
body {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
background-color: #000;
color: aliceblue;
}
.box-1 {
width: 100px;
height: 100px;
background-color: pink;
position: relative; /* 相对定位不会脱离文档流 */
left: 60px;
}
.box-2 {
width: 100px;
height: 100px;
position: absolute; /* 会脱离 */
left: 120px;
background-color: skyblue;
}
.box-3 {
width: 100px;
height: 100px;
position: fixed; /* 标签固定在视口 */
left: 240px;
background-color: red;
}
.box-4 {
width: 100px;
height: 100px;
position: sticky; /* 上移距离不会小于160px,始终会在160px */
top: 160px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">0</div>
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
<div class="box-4">4</div>
</body>