一、文档流(normal flow)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下,都在文档流中
元素分为两种状态:在文档流中,脱离文档流
元素在文档流中的特点
①块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
② 内联元素(行内元素)
1:不会独占一行
2:宽度高度默认都是被内容撑开的,不能自己定义宽高
③行内块元素
1、不会独占一行,可以设置宽高
一旦元素通过某种方式,例如浮动、绝对定位等等,脱离文档流,则原来在文档流中划分 元素类型,特点都不复存在
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box {
width: 200px;
height: 100px;
background-color: rgb(36, 223, 11);
}
span {
background-color: rgb(21, 197, 228);
width: 100px;
/* height: 200px; */
display: inline-block;
}
</style>
</head>
<body>
<div class="box">大江东去,浪淘尽,千古风流人物。
故垒西边,人道是,三国周郎赤壁。
</div>
<span>乱石穿空,惊涛拍岸,卷起千堆雪。
江山如画,一时多少豪杰。乱石穿空,惊涛拍岸,卷起千堆雪。
江山如画,一时多少豪杰。
</span>
</body>
</html>
二、盒子模型
(一)什么是盒子模型?
css盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、边距、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
margin(外边距)-清除边框外的区域,外边距是透明的
Border(边框)-围绕在内边距和内容外的边框
padding(内边距)-清除内容周围的区域,内边距是透明的
Content(内容)-盒子的内容,显示文本和图像
影响盒子大小的因素:内容区,内边距,边框会影响盒子的大小,外边距不会影响
盒模型、盒子模型、框模型(box model)
内容区 冰箱
内边距 泡沫
边框 纸盒子
外边距 快递的位置
影响盒子大小的因素:内容区,内边距,边框会影响盒子的大小,外边距不会影响
1:内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
默认情况:设置width,height都是内容区宽高
2:边框(border)元素设置边框
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 100px;
background-color: rgb(52, 241, 156);
}
.box2{
width: 40%;
height: 90%;
background-color: rgb(13, 59, 227);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
(二)盒子模型—边框
1:边框(border)元素设置边框
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
边框大小:border-width
边框样式:border-style
边框颜色:border-color
掌握: 跟多个值的情况、单独设置某一边、默认值、样式的可选值箭头的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 0px;
height: 0px;
/* background-color: rgb(222, 255, 170); */
/* 边框的大小 如果省略,有默认值,大概1-3px ,不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
*/
border-width: 20px;
/* border-left-width:40px ; */
/*
边框的样式
border-style 可选值
默认值:none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
*/
border-style: solid;
/* 设置边框的颜色 默认值是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色
border-XXX-color: ;
*/
border-color: transparent transparent rgb(251, 117, 231) transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: rgb(92, 215, 234);
/* 简写border
1、 同时设置边框的大小,颜色,样式,没有顺序要求
2、可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
3、去除某个边框
border:none;
*/
border: rgb(239, 101, 165) solid 10px;
border-bottom: none;
/* border-top:10px double green ; */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
用border radius画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 圆 */
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 200px;
margin: 20px 20px;
}
/* 半圆 */
.box2 {
width: 200px;
height: 100px;
background-color: blueviolet;
border-radius: 100px 100px 0 0;
}
/* 四分之一圆 */
.box3 {
width: 100px;
height: 100px;
background-color: rgb(43, 226, 104);
border-radius: 100px 0 0 0;
margin: 30px 30px;
}
/* 小箭头(三角形) transparent用来设置透明度 这里元素的宽度和高度都要为0 */
.box4 {
width: 0;
height: 0;
border: 70px red solid;
border-color: transparent rgb(238, 175, 228) transparent transparent;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
效果如图
2、内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 内边距 padding
是内容区和边框之间的距离,会影响到整个盒子的大小
1、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
2、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top:30px ;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
padding: 40px;
border: 10px transparent solid;
}
.box1:hover {
border: 10px red solid;
}
/*
* 创建一个子元素box2占满box1,box2把内容区撑满了
*/
.box2 {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>