1. 浮动属性
1.1 基本概念
float：定义元素在哪个方向浮动（左右排列），浮动元素也脱离文档流，但是与绝对定位相反，会保持原有的流动性，浮动会把元素都变成块布局模式。
left：元素从左向右浮动
right：元素从右向左浮动
none：默认值，不设置浮动
- 元素设置浮动之后，设置浮动的元素都会有块元素的特性，可以设置宽高
- 元素设置浮动之后会尽可能的占据最小的空间
1.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{
border: 5px solid black;
}
.box2{
height: 30px;
background-color: skyblue;
}
.box div{
height: 140px;
width: 140px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="box2"></div>
</body>
</html>
设置浮动后：
<!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{
border: 5px solid black;
}
.box2{
height: 30px;
background-color: skyblue;
}
.box div{
height: 140px;
width: 140px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="box2"></div>
</body>
</html>
导致问题：当一个容器没有设置高度时，该容器里的元素设置了浮动属性之后元素会脱离文档流，因为容器的高都是由内容撑开自适应的高度，所以会导致高度塌陷的问题（天蓝色长条往上填充），从而影响布局模式。
解决方法：
- 预先给容器设置高度，高度一般都是自适应。
- 给浮动元素的父容器添加一个overflow属性（超出部分的处理），该属性会重新计算容器的高度，浮动元素也会算进去。
- 给浮动元素的父容器也添加一个float属性。
- 在浮动元素的下面添加一个空标签（有无内容都可），添加一个clear:both，该属性会清除该元素上方浮动元素导致的高度塌陷的问题。
- 在父容器中设置伪元素::after，在CSS属性中设置 clear: both，也可以清除浮动产生的问题。
<!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{
border: 5px solid black;
/* 方法一：提前在父容器中设置一个高度 */
height: 140px;
}
/* 方法五 */
/* 通过给当前浮动元素的父容器加上一个伪元素，在属性中加上clear:both 属性 */
.box::after{
content: "";
display: block;
clear: both;
}
.box2{
height: 30px;
background-color: skyblue;
}
.box div{
height: 140px;
width: 140px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<!-- 方法四 -->
<!-- 浮动元素下方添加一个空标签，在当前标签里，添加一个clear:both，该属性会清除该元素上方浮动元素导致的高度塌陷的问题-->
<p style="clear: both;"></p>
</div>
<div class="box2"></div>
</body>
</html>
2. CSS的常用样式
2.1 文本相关样式
文本对齐方式
text-align：;
| 值 | 描述 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
通过设置 text-align: center; 配合行高 line-height: 元素容器的高度;可以将文字居中在元素正中心（水平和垂直方向均居中）位置
文本缩进
text-indent: 2em;
缩进两个中文字符
文本装饰
text-decoration: ;
| 值 | 描述 |
|---|---|
| none | 无文本装饰/清除文本装饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 贯穿线/删除线 |
2.2 字体相关样式
字体大小
font-size:16px;
字体类型
font-family:‘楷体’;
字体倾斜/斜体
font-style: ;
| 值 | 描述 |
|---|---|
| normal | 默认字体样式 |
| italic | 斜体字体样式 |
| oblique | 倾斜字体样式 |
字体加粗
font-weight: ;
| 值 | 描述 |
|---|---|
| 100-500 | 字体不加粗 |
| 600-900 | 字体加粗 |
| lighter | 字体不加粗 |
| bold | 字体加粗 |
<!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>
.tag{
width: 200px;
height: 600px;
border: 1px solid red;
color: red;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 60px;
/* 也可以通过font属性来批量设置字体相关的样式 */
/* 分别对应属性 font-style font-wieght font-size/lihe-height font-family*/
font: normal bold 30px/60px '楷体';
}
</style>
</head>
<body>
<div class="tag">
这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容
</div>
<!-- 元素属性里的默认属性比如宽度（width）之类，数值不需要加单位，默认为px -->
<div width='200' style="width: 200px;"></div>
</body>
</html>
2.3 背景相关样式
| 属性 | 描述 |
|---|---|
| background-image | 设置元素的背景图片 |
| background-position | 设置背景图片的定位位置 |
| background-size | 设置背景图片的尺寸大小 |
| background-repeat | 设置背景图片重复 |
| opacity | 设置透明度（取值0-1） |
<!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>
div{
width: 400px;
height: 600px;
background-color: rgba(141, 143, 236, 0.623);
/* 设置背景图片的时候，默认情况会向上下左右四个方向无限重复背景图片 */
background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1173848667,4068453094&fm=26&gp=0.jpg);
/* background-size 更改背景图片的宽度 */
/* 参数一：表示宽度设置 */
/* 参数二：表示高度设置 */
background-size: 200px 300px;
/* 同时设置100% 可以铺满整个容器 */
/* background-size: 100% 100%; */
/* contain 背景图片高度为容器高度，宽度会自适应 */
/* background-size: contain; */
/* cover 背景图片宽度为容器宽度，高度会自适应 */
/* background-size: cover; */
/* background-repeat 背景图片重复 */
/* no-repeat 不重复 */
background-repeat: no-repeat;
/* repeat-x 横向重复 */
/* background-repeat: repeat-x; */
/* repeat-y 纵向重复 */
/* background-repeat: repeat-y; */
/* 背景图片定位 */
/* 设置背景图片的相对偏移量 */
/* 参数一：横向偏移量 */
/* 参数二：纵向偏移量 */
background-position: 100px 100px;
/* 0 表示完全透明 */
/* 1 表示不透明 */
/* 取值范围支持0~1 */
opacity: 1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4 超出部分处理
overflow：对元素超出部分进行处理
overflow: hidden; 超出部分隐藏
overflow: scroll; 超出部分以滚动条的形式展现
text-overflow：文本超出部分处理
- text-overflow: ellipsis; 超出部分以…形式显示
- 进行单行文本超出部分处理时，需要设置字体不换行属性 white-space:nowrap
<!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>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
/* scroll 超出以滚动条的形式展示 */
overflow: scroll;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid red;
/* 在做单行文本超出部分处理的方式时，需要将文本设置不换行排列在同一行 */
white-space: nowrap;
/* 超出部分截取 */
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
</div>
<div class="box2">
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
</div>
</body>
</html>
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
