css布局
一、盒子模型
1、边框
（1）边框颜色
border-color: aqua;
border-left-color: red;
border-top-color: yellow;
border-right-color: green;
border-bottom-color: yellowgreen;
| border-color：后面添加的颜色数 | 边框颜色显示位置 |
|---|---|
| 4 | 上 右 下 左 |
| 3 | 上 左右 下 |
| 2 | 上下 左右 |
（2）边框宽度
border-width: 10px;
（3）边框样式
实线，虚线等…
border-style:solid;
（4） 简写
宽度 样式 颜色
border: 2px solid rebeccapurple;
border-left:3px double #000;
（5）圆角边框
border-radius: 10px;
| 圆角边框 | 对应圆角位置 |
|---|---|
| border-radius: 10px; | 上下左右 |
| border-radius: 10px 20px; | 左上右下 右上左下 |
| border-radius: 10px 20px 40px; | 左上 左下右上 右下 |
| border-radius: 10px 20px 40px 80px; | 左上 右上 右下 左下 |
| border-radius: 50%; | 变成圆 |
| border-radius:100px 0px 0px 100px ;（高是宽的两倍） | 左半圆 |
（6）边框宽度
border-width: 1px;
| 边框宽度 | 对应宽度位置 |
|---|---|
| border-width: 1px 10px; | 上下 左右 |
| border-width: 1px 10px 20px ; | 上，左右，下 |
| border-width: 1px 10px 20px 40px ; | 上 右 下 左 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>
<style>
.d {
height: 300px;
width: 300px;
background-color: antiquewhite;
/* 边框颜色 */
border-color: aqua;
border-left-color: red;
border-top-color: yellow;
border-right-color: green;
border-bottom-color: yellowgreen;
/* 上右下左 */
border-color: black red yellow green;
/* 上 左右 下 *
border-color: black red rebeccapurple;
/* 上下 左右 */
border-color: black rebeccapurple;
/* 边框宽度 */
border-width: 10px;
/* 边框样式 :实线，虚线等...*/
border-style:solid;
/* 简写：宽度 样式 颜色 */
border: 2px solid rebeccapurple;
border-left:3px double #000;
}
.d1{
height: 200px;
width: 200px;
background-color: blueviolet;
/* 上下左右 */
border-radius: 10px;
/* 左上右下 右上左下 */
border-radius: 10px 20px;
/* 左上 左下右上 右下 */
border-radius: 10px 20px 40px;
/* 左上 右上 右下 左下 */
border-radius: 10px 20px 40px 80px;
/* 变成圆 */
border-radius: 50%; }
.d2{ /* 左半圆 */
height: 200px;
width: 100px;
background-color: aqua;
border-radius:100px 0px 0px 100px ;
.d3{
background-color: aqua;
height: 300px;
width: 800px;
/* 边框宽度 */
border-width: 1px;
border-left-width: 10px;
border-bottom-width: 20px;
/* 上下 左右 */
border-width: 1px 10px;
/* 上，左右，下 */
border-width: 1px 10px 20px ;
/* 上 右 下 左 */
border-width: 1px 10px 20px 40px ;
/* 边框颜色 */
border-color: blue;
/* 边框样式 */
border-style: double;
}
}
</style>
</head>
<body>
<div class="d">
这就是一个盒子
</div>
<div class="d1">
圆角边框
</div>
<div class="d2">
</div>
<div class="d3">
div是一个块状元素，没有默认的高，默认高度由内容撑开<br>
宽默认为100%，独占一行<br>
一般用来做页面的布局
</div>
</body>
</html>
2、内边距
（1）内边距/填充
padding: 10px;
（2）盒子内减
ps：会自动把内容宽度进行调整
box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距/填充</title>
<style>
img,.d{
height: 300px;
width: 300px;
}
.d{
background-color: blanchedalmond;
border: 1px solid yellowgreen;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d">
<img src="img/pic.jpeg" alt="">
</div>
</body>
</html>
3、外边距
自动水平居中：块元素，元素必须有宽
margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距</title>
<style>
.d1,
.d2 {
height: 60px;
width: 500px;
background-color: rebeccapurple;
}
.d2 {
background-color: aqua;
}
.d1{
padding-left: 50px;
}
.d2 p{
/* 去除外边距 */
margin-left: 50px;
}
a{
display: inline-block;
height: 50px;
width: 70px;
background-color: aliceblue;
/* 调节盒子的距离 */
margin-left: 20px;
}
.d3,.d4{
height: 400px;
width: 200px;
background-color: aqua;
}
.d3{
border-radius: 200px 0px 0px 200px;
margin-top: 100px;
}
.d4{
background-color: blue;
border-radius: 0px 2000px 2000px 0px;
margin-left: 200px;
margin-top: -400px;
}
.d5{
height: 400px;
width: 800px;
background-color:red;
/* 自动水平居中：块元素，元素必须有宽度 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="d1">
<p>1111111</p>
</div>
<div class="d2">
<p>44444444444</p>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</body>
</html>
二、标准流
1、认识
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
2、常见标准流排版规则
（1）块级元素：从上往下，垂直布局，独占一行
（2）行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
三、float浮动
1、浮动的作用
让垂直布局的盒子变成水平布局，如：一个在左，一个在右
2、浮动的代码
左浮动 float: left;
右浮动 float: right;
3、浮动的特点
（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素
（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
（4）浮动元素有特殊的显示效果：
- 一行可以显示多个
- 可以设置宽高
ps：浮动的元素不能通过text-align:center或者margin:0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float浮动</title>
<style>
.a,
.b,
.c {
height: 50px;
width: 300px;
}
.a {
background-color: yellowgreen;
float: right;
}
.b {
background-color: yellow;
float: right;
}
.c {
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="a">科技</div>
<div class="b">就开会</div>
<div class="c">开户费</div>
</body>
</html>
四、清除浮动
1、用处
清除浮动带来的影响
2、原因
子元素浮动后，此时子元素不能撑开标准流的块级父元素（子元素浮动后脱标 → 不占位置）
3、清除浮动的方法
（1）直接设置父元素高度
（2）额外标签法
（3）单伪元素清除法
（4）双伪元素清除法
（5）给父元素设置overflow : hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.a{
background-color: #5bebb3;
height: 300px;
}
.b{
height: 300px;
width: 300px;
background-color:rgb(231, 22, 22);
float: left;
}
.c{
height: 500px;
width: 800px;
background-color: gold;
}
.d,.e{
height: 200px;
width: 400px;
float: left;
background-color: blue;
}
.e{
background-color: rebeccapurple;
}
.f{
/* 清除浮动，清除浮动对后边元素的影响 */
clear: both;
height: 300px;
width: 800px;
background-color: brown;
}
.cl::after,
.cl::before{
content: '';
display: table;
}
.cl::after{
clear: both;
}
.bb{
height: 80px;
float: left;
width: 800px;
background-color: blue;
}
.cc{
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
<div class="c">
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
<div class="aa">
<div class="bb">bb</div>
</div>
<div class="cc cl" >cc</div>
</body>
</html>
扫一扫
2222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
