1.盒子布局
<!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>盒子布局</title>
<style>
.one{
width: 200px;
height: 200px;
border: 1px solid black;
}
.two{
width:100px ;
height: 100PX;
background-color: red;
/* border-bottom:1px solid black;
border-top: 2px solid green; */
/* boder 边框 上右下左 */
border: 20px;
/*
none:定义无边框
hiddn:与"none"相同。不过应用于表时除外,对于表,hiddn用于解决边框冲突。
dotted:定义点状边框,在大多数浏览器中呈现为实线。
deshed:定义虚线,在大多数浏览器中呈现为实线。
solid:定义实线。
*/
padding: 20px;
/* padding: 内边距 内容距离边框的问题 上右下左 */
margin-left:27px;
/* margin: 外边距 边框距离页面的问题 */
}
</style>
</head>
<body>
<div class="one">
<div class="two">这是一个div</div>
</div>
</body>
</html>
2.元素分类
<!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>元素分类</title>
<!--
块级元素 ------- 独占一行(自动换行) div p hn hr 可以设置宽度和高度
行内元素(内联) ------ 不会自动换行 a span 不可以设置宽度和高度(不起作用)
display可以实现块级元素和行内元素之间互换
属性取值:
none ----- 表示不会被显示,隐藏元素的方式之一
block ----- 将元素变为块级元素,也会自动换行(默认有个换行符)
inline ----- 将元素变为行内元素
-->
<!--
css中隐藏元素的方式:
第一种:display:none
第二种:width:0;height:0;
-->
</head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
/* width: 100px;
height: 100px;
background-color: red;
display: none; */
width: 0;
height: 0;
}
</style>
<body>
<div class="one"></div>
<div >这是第一个div标签</div>
<div>这是第二个div标签</div>
<div>这是第三个div标签</div>
<a href="#">这是第一个a标签</a>
<a href="#">这是第二个a标签</a>
<a href="#">这是第三个a标签</a>
<a href="#">这是第四个a标签</a>
</body>
</html>
3.浮动布局
<!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>浮动布局</title>
<!--
通过float属性去设置浮动布局
取值:left none(不浮动) right
注意:如果浮动取值是Left的话(左浮),会对后面的元素产生一定的影响
-->
<!--
如果要消除这种影响(消除浮动)通过clear属性
none:默认 允许两边都可以浮动
left:不允许左边的浮动
right:不允许右边的浮动
both:不允许两侧有浮动 -->
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
clear: both;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
float: right;
clear: right;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>
4.定位布局
<!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>定位布局</title>
<!--
属性:position ------ 设置对象的定位方式
tatic ----- 静态定位(没有设置位置)默认
absolute ------- 绝对定位 :将对象从文档流中分离出来,设置left top right bottom这四个方向去设
置相较于父级对象的相对定位,如果不存在这样的父级对象,那么父级是body
relative ------ 相对定位:对象不从文档流中分离出来,设置left top right bottom这四个方向去设置
相较于自身的相对定位 -->
<style>
.main{
width:1200px;
height: 600px;
border: 1px solid black;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
/* position: absolute;
top: 200px;
left: 200px; */
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
clear: both;
position: relative;
left: 600px;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>
5.其他属性
5.1 overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=1.0">
<title>overflow</title>
<!--
设置对象内容超过指定的高度或者宽度的时候如果管理它的内容
visible----- 默认值 不剪切内容也不添加滚动条
auto ----- 在必需时对象才会被裁剪或者添加滚动条
hidden ----- 不显示超过对象尺寸的内容(会被隐藏)
scroll ---- 总会显示滚动条 -->
<!--
隐藏元素的方式:
1. display:none;
2. width:0 height:0
3. overflow:hidden -->
<style>
.img{
width: 200px;
height: 200px;
border: 1px solid black;
/* overflow: scroll; */
/* overflow: hidden; */
/* overflow: auto; */
overflow:visible;
}
</style>
</head>
<body>
<div class="img">
<img src="..\images\2d0daa27318044818b5f8bb8c2079383.png" alt="">
</div>
</body>
</html>
5.2 zoom
<!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>zoom</title>
<!--
设置或者检索对象的缩放比例
normal : 默认值 显示的是对象的实际尺寸
number:百分比|无符号的浮点数 浮点数为1.0相当于100%相当于取值为normal -->
<style>
.main{
width: 200px;
height: 200px;
border: 1px solid black;
}
img{
zoom: 1.0;
}
</style>
</head>
<body>
<div class="main">
<img src="D:\demo\images\2023-04-05_115204.png" alt="">
</div>
</body>
</html>
6.弹性盒子css3
6.1常见的属性
flex- direction -------
指的是弹性容器中子元素的排列方式
flex-wrap ------
指的是弹性容器中子元素超出父容器时是否换行
flex-flow ----flex- direction
和
flex-wrap
的简写
align-items ---
设置的弹性容器中元素在侧轴
(
纵轴)的对齐方式
justify-content ------
设置的弹性容器中元素在主轴(横轴)的对齐方式
align-content-------
修改了
flex-flow
的行为,类似于
align-items
,它是对齐的弹性线
6.2 flex-direction
<!DOCTYPE html>
<!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>弹性盒子</title>
<!--
row ----- 左对齐(横向的从左到右排列),默认
row- reverse ------ 反向的横向排列(右对齐),从后往前排,最后一项排在最前面
column ----- 纵向排列
column-reverse ----- 反向纵向排列 -->
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-direction: column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</body>
</html>
6.3 felx-wrap
<!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>弹性盒子</title>
<!--
nowrap ---- 默认值,规定弹性元素不会换行
wrap ---- 弹性元素在需要的时候会换行
wrap-reverse ------ 会换行,但是是反方向 -->
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-wrap: wrap-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
<div class="flex-item">flex item10</div>
<div class="flex-item">flex item11</div>
</div>
</body>
</html>
6.4 flex-flow
<!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>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-flow: column-reverse wrap;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
</body>
</html>
6.5 align-items
<!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>弹性盒子</title>
<!--
stretch 默认,项目被拉伸以适合容器
center 项目被拉伸于容器中央
flex-start 项目被拉伸于容器开头
flex-end 项目被拉伸于容器末端
baseline 项目被拉伸于容器的基线
-->
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
align-items: baseline;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</body>
</html>
6.6 justify-content
<!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>弹性盒子</title>
<!--
center 项目被拉伸于容器中央
flex-start 默认值,项目被拉伸于容器开头
flex-end 项目被拉伸于容器末端
space-between 项目在行与行之间留有间隙
sapce-around 项目在行之前,行之间和行之后留有空间
-->
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
justify-content: space-around;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</body>
</html>
6.7 align-content
<!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>弹性盒子</title>
<!--
align-content-------修改了flex-flow 的行为,类似于align-items,它是对齐的弹性线
stretch 默认值,行拉伸以占据剩余空间
center 朝着弹性容器的中央对行打包
flex-start 朝着弹性容器的开头对行打包
flex-end 朝着弹性容器的结尾对行打包
space-between 行均匀分布在弹性容器中
sapce-around 行均匀分布在弹性容器中,两端各占一半
-->
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</body>
</html>