块元素和行内元素
display样式可以有以下几种值：
- none 隐藏
- inline 行内元素（不换行，高宽无效）
- inline-block 不换行的块元素
- block 块元素（独占一行， 可以设置高宽）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
#txt1{
width: 300px;
height: 50px;
border: 1px solid red;
/* 行内元素设置display:block,就会转换成块标签
display:inline-block, 不换行的块标签
display:inline, 行内标签
*/
display: block;
}
</style>
</head>
<body>
<!-- 行内元素：
在一行显示（不换行）
高宽无效
display:inline
-->
<a href="">首页</a>
<img src="./img/boy.jpg" alt="">
<span id="txt1">span标签</span>
<input type="text" name="" >
<!-- 块元素：
每一个标签独占一行
可以设置高宽
display:block
-->
<p>p标签</p>
<div class="box1">
</div>
</body>
</html>
流式布局（默认）
一个接一个往下排列
inline-block实现横向布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1,.box2,.box3{
width: 100px;
height: 100px;
display: inline-block;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
定位布局
相对定位
参考点是标签默认所在的位置
标签移走之后，原来的位置不会释放（其它标签不能占用这个位置）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
.box1,.box2,.box3{
width: 100px;
height: 100px;
/* 相对定位:
参考点是标签默认所在的位置
标签移走之后，原来的位置不会释放（其它标签不能占用这个位置）
*/
position: relative;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
left: 100px;
top:-100px;
}
.box3{
background-color: blue;
left: 200px;
top: -200px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<p>fdsaflasl</p>
</body>
</html>
绝对定位
参考点统一为父容器的左上角顶点
标签移走之后，它原来所占的位置可以被其它标签补位
定位坐标可以用：
left + top
left + bottom
top + right
right + bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
/* 绝对定位要求把父容器的定位方式设为relative
参考点就是父容器的左上角顶点
*/
position: relative;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
/* 绝对定位:
参考点统一为父容器的左上角顶点
标签移走之后，它原来所占的位置可以被其它标签补位
*/
position: absolute;
left: 100px;
top:0px;
}
.box3{
background-color: blue;
position: absolute;
/* left: 200px;
top: 0px; */
/* right: 0px;
bottom: 0px; */
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<p>fdsjalfjsa</p>
</div>
</body>
</html>
浮动布局
-
float:
- left 左浮动
- right 右浮动，第一个标签排最右边
-
clear: 清除浮动
- 标签设置浮动之后，后续标签也会跟着浮动
- 为了避免对后续标签的影响，要对后续第一个标签设置清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
}
.
box1,.box2,.box3{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
/* 浮动：
left 左浮动
right 右浮动，第一个标签排最右边
*/
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
.p1{
/* 清除浮动:
标签设置浮动之后，后续标签也会跟着浮动
为了避免对后续标签的影响，要对后续第一个标签设置清除浮动
*/
clear: both;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<div class="box3">
3
</div>
<p class="p1">fdsjalfjsa</p>
<p>ccccccc</p>
</div>
</body>
</html>
练习：用list实现横向菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表转横向菜单</title>
<style type="text/css">
.menu{
/* 去掉列表前面的图标 */
list-style: none;
}
.menu li{
float: left;
/* width: 60px; */
margin-left: 30px;
}
.menu li:hover{
cursor: pointer;
color: blue;
}
</style>
</head>
<body>
<ul class="menu">
<li>新闻</li>
<li>hao123</li>
<li>地图</li>
<li>贴吧</li>
<li>视频</li>
<li>图片</li>
<li>网盘</li>
<li>更多</li>
</ul>
</body>
</html>
弹性布局
所有的样式都在容器里面设置
-
display为flex
-
flex-direction
排列方向 :
row 横向排列，默认值
row-reverse 横向排列，右对齐，顺序反转
column 竖排
column-reverse 竖排,底边对齐，顺序反转row
column
-
justify-content
对齐方式:
在排列方向对齐方式。横排时，水平方向对齐方式；竖排，垂直方向的对齐方式
（以下说明都是按row方向排列）center 水平居中
flex-start 左对齐
flex-end 右对齐
space-around 中间等距间隔，两边的间距时中间间距的一半
space-between 中间间隔等距，两边靠边
space-evenly 完全等距间隔排列（两边和中间都等距）space-around
space-evenly
space-between
-
align-items
跟排列方向垂直的方向上的对齐方式：
（如果时横向排列，这个样式就是垂直对齐方式； 如果纵向排列，这个样式就是水平
方向的对齐方式）
center 居中
flex-start 顶对齐
flex-end 底边对齐flex-start
flex-end
-
flex-wrap
换行方式
nowrap 不换行， 压缩标签的宽度，在一行显示完所有标签
wrap 换行
wrap-reverse 换行，顺序反转
（注意： 换行之后的行距由align-content样式决定）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局</title>
<style type="text/css">
#outer{
height: 500px;
width: 500px;
border: 1px solid red;
margin: auto;
/* 弹性布局:
容器的display设为flex
*/
display: flex;
/* 排列方向
row 横向排列，默认值
row-reverse 横向排列，右对齐，顺序反转
column 竖排
column-reverse 竖排,底边对齐，顺序反转
*/
flex-direction: row;
/* 对齐方式:
在排列方向对齐方式。横排时，水平方向对齐方式；竖排，垂直方向的对齐方
式
（以下说明都是按row方向排列）
center 水平居中
flex-start 左对齐
flex-end 右对齐
space-around 中间等距间隔，两边的间距时中间间距的一半
space-between 中间间隔等距，两边靠边
space-evenly 完全等距间隔排列（两边和中间都等距）
*/
justify-content: space-between;
/* 跟排列方向垂直的方向上的对齐方式：
（如果时横向排列，这个样式就是垂直对齐方式； 如果纵向排列，这个样式就是水
平方向的对齐方式）
center 居中
flex-start 顶对齐
flex-end 底边对齐
*/
align-items: flex-start;
/* 换行方式
nowrap 不换行， 压缩标签的宽度，在一行显示完所有标签
wrap 换行
wrap-reverse 换行，顺序反转
（换行之后的行距由align-content样式决定）
*/
flex-wrap: wrap;
}
.box{
width: 100px;
height: 100px;
border: 1px solid blue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="outer">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<!-- <div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
7
</div>
<div class="box">
8
</div>
<div class="box">
9
</div> -->
</div>
</body>
</html>
弹性布局实现上下左右居中显示
display: flex;
justify-content: center;
align-items: center;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用flex实现上下左右居中</title>
<style type="text/css">
.outer{
/* vw视口宽度单位, 全屏宽度是100vw */
width: 100vw;
/* vh视口的高度单位,全屏的高度是100vh */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="box">
</div>
</div>
</body>
</html>
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1,
.box2 {
width: 1200px;
height: 340px;
display: flex;
font-size: 14px;
flex-direction: row;
justify-content: space-around;
}
.box1 {
background-color: #a52b2a;
/* rgb(165, 42, 42) */
}
.box2 {
background-color: rgb(254, 215, 2);
}
p {
line-height: 20px;
}
.price {
color: red;
}
.goods {
width: 220px;
height: 240px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1">
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
</div>
<div class="box2">
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
<div class="goods">
<img src="img/goods2.jpg" alt="">
<p>老人头时尚钱包老人头时尚钱包老人头时尚钱包</p>
<p class="price">¥59.00</p>
</div>
</div>
</div>
</body>
</html>
练习
- 定位练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位练习</title>
<style type="text/css">
.outer {
width: 300px;
height: 300px;
padding: 10px;
border: 1px solid red;
position: relative;
margin: auto;
}
.s {
width: 100px;
height: 100px;
color: white;
text-align: center;
line-height: 100px;
background-color: red;
}
.c2 {
position: absolute;
top: 10px;
right: 10px;
}
.c3 {
background-color: blue;
position: absolute;
top: 110px;
left: 110px;
}
.c4 {
position: absolute;
bottom: 10px;
}
.c5 {
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="c1 s">1</div>
<div class="c2 s">2</div>
<div class="c3 s">3</div>
<div class="c4 s">4</div>
<div class="c5 s">5</div>
</div>
</body>
</html>
box-sizing: border-box；
元素的尺寸计算会将内边距和边框的宽度包含在内，也就是说，设置的宽度和高度会同时包括内容、内边距和边框，从而让元素的盒模型更加直观和可控。
- 布局练习
鼠标移到图片上时，添加边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 1100px;
height: 900px;
background-color: gainsboro;
margin: auto;
display: flex;
/*行方向*/
flex-direction: row;
/*换行*/
flex-wrap: wrap;
justify-content: space-around;
/*另一个方向居中*/
align-items: center;
}
.prd1,.prd2,.prd3,.prd4 {
width: 500px;
height: 400px;
/* border: 1px solid red; */
/* display: flex; */
}
.prd-left {
height: 100%;
width: 40%;
/* border: 1px solid blue; */
display: inline-block;
background-color: rgb(108, 198, 162);
/* margin传递问题：
子标签设了margin后，父容器也会有margin，解决办法：
1. 父容器设置边框
2. 父容器设置 overflow: hidden
*/
overflow: hidden;
}
.prd-right {
height: 100%;
width: 60%;
/* border: 1px solid blue; */
display: inline-block;
background-color: green;
}
.prd-right:hover{
/* width: 98%;
height: 98%; */
cursor: pointer;
border: 1px solid black;
}
/* 类后加 空格 ==> 后代选择 */
.prd-right img{
width: 100%;
height: 100%;
}
.line{
width: 80%;
height: 150px;
margin: auto;
border-style: solid;
border-width: 5px 5px 1px 5px;
border-color: white transparent white transparent;
font-size: 40px;
color: white;
text-align: center;
line-height: 100px;
}
.prd-left p{
font-size: 20px;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="prd1">
<div class="prd-left">
<div class="line">
新品首发
</div>
<p>小米发新机，首发享好礼</p>
</div><!--inline-block两个标签之间有空隙，用注释把这两个标签连起来（不换行），消除空隙
--><div class="prd-right">
<img src="./img/new1.jpg">
</div>
</div>
<div class="prd2"><div class="prd-left">
<div class="line">
新品首发
</div>
<p>小米发新机，首发享好礼</p>
</div><!--inline-block两个标签之间有空隙，用注释把这两个标签连起来（不换行），消除空隙
--><div class="prd-right">
<img src="./img/new1.jpg">
</div></div>
<div class="prd3"><div class="prd-left">
<div class="line">
新品首发
</div>
<p>小米发新机，首发享好礼</p>
</div><!--inline-block两个标签之间有空隙，用注释把这两个标签连起来（不换行），消除空隙
--><div class="prd-right">
<img src="./img/new1.jpg">
</div></div>
<div class="prd4"><div class="prd-left">
<div class="line">
新品首发
</div>
<p>小米发新机，首发享好礼</p>
</div><!--inline-block两个标签之间有空隙，用注释把这两个标签连起来（不换行），消除空隙
--><div class="prd-right">
<img src="./img/new1.jpg">
</div></div>
</div>
</body>
</html>
margin传递问题：
子标签设了margin后，父容器也会有margin，解决办法：
1. 父容器设置边框
2. 父容器设置 overflow: hidden
/* 类后加 空格 ==> 后代选择 */
inline-block两个标签之间有空隙，用注释把这两个标签连起来（不换行），可以消除空隙
- 布局练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
margin: auto;
width: 1130px;
height: 400px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.left{
width: 200px;
height: 380px;
background-color: aqua;
}
.left img{
width: 100%;/*拉伸，使得图片填满div*/
height: 100%;
}
.center{
width: 650px;
height: 380px;
background-color: white;
}
.center .center-top{
width: 100%;
height: 50px;
background-color: white;
display: flex;
justify-content: space-between; /*两边对齐*/
padding: 0 10px;/*上下 左右*/
/* 标签固定高宽，如果设置了边框和边距，压缩内容区域*/
box-sizing: border-box;
border-bottom: 1px solid gray;
}
.center p{
font-size: 20px;
}
.center-bottom{
width: 100%;
height: 330px;
/* background-color: aquamarine; */
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.prd{
width: 300px;
height: 150px;
/* border: 1px solid red; */
display: flex;
}
.prd-left{
width: 120px;
height: 150px;
background-color: cornsilk;
position: relative;
}
.prd-right{
width: 200px;
height: 150px;
background-color: white;
box-sizing: border-box;
padding-left: 5px;
}
.prd-right img{
width: 100%;
height: 100%;
}
.disc{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: sandybrown;
color: white;
text-align: center;
line-height: 50px;
position: absolute;
right: 10px;
bottom: 10px;
}
.prd-right .limit{
color: red;
}
.limit span{
font-size: 20px;
}
.prd-right .btn{
width: 80px;
height: 25px;
background-color: red;
color: white;
text-align: center;
line-height: 25px;
}
.prd-right p{
margin: 2px;
}
.right{
width: 250px;
height: 380px;
background-color: white;
border-left: 2px solid antiquewhite;
}
.right .list{
width: 250px;
height: 190px;
box-sizing: border-box;
/* border: 1px solid red; */
}
.list .title{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
/* padding: 0px 10px; */
}
.title p{
padding: 0 10px 0 10px;
margin-top: 20px;
}
.list .item{
width: 100%;
height: 70px;
box-sizing: border-box;
/* border: 1px solid blue; */
display: flex;
}
.item .item-left{
width: 70px;
height: 70px;
box-sizing: border-box;
/* border: 1px solid blue; */
}
.item .item-left img{
width: 100%;
height: 100%;
}
.item .item-right{
width: 180px;
height: 70px;
box-sizing: border-box;
/* border: 1px solid blue; */
}
.item-right p{
margin: 0;
}
.item-right .price{
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.price p{
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<img src="./img/3551973afb9d667529a2b0ff1d10485b.jpg" alt="">
</div>
<div class="center">
<div class="center-top">
<p>今日特价</p>
<p>查看全部></p>
</div>
<div class="center-bottom">
<div class="prd">
<div class="prd-left">
<img src="./img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="">
<div class="disc">
8.8折
</div>
</div>
<div class="prd-right">
<p>女士精梳棉全棉T恤</p>
<p class="limit">限时价：¥<span>43.1</span></p>
<p>¥<del>49</del></p>
<div class="btn">
立即抢购
</div>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="./img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="">
<div class="disc">
8.8折
</div>
</div>
<div class="prd-right">
<p>女士精梳棉全棉T恤</p>
<p class="limit">限时价：¥<span>43.1</span></p>
<p>¥<del>49</del></p>
<div class="btn">
立即抢购
</div>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="./img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="">
<div class="disc">
8.8折
</div>
</div>
<div class="prd-right">
<p>女士精梳棉全棉T恤</p>
<p class="limit">限时价：¥<span>43.1</span></p>
<p>¥<del>49</del></p>
<div class="btn">
立即抢购
</div>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="./img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="">
<div class="disc">
8.8折
</div>
</div>
<div class="prd-right">
<p>女士精梳棉全棉T恤</p>
<p class="limit">限时价：¥<span>43.1</span></p>
<p>¥<del>49</del></p>
<div class="btn">
立即抢购
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="list">
<div class="title">
<p>量贩囤货</p>
<p>全部></p>
</div>
<div class="item">
<div class="item-left">
<img src="./img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">
</div>
<div class="item-right">
<p>3盒装 韩国制造</p> <!--p标签默认占用16的大小-->
<div class="price">
<p>¥55</p>
<img src="./img/cart.PNG" alt="">
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<img src="./img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">
</div>
<div class="item-right">
<p>3盒装 韩国制造</p> <!--p标签默认占用16的大小-->
<div class="price">
<p>¥55</p>
<img src="./img/cart.PNG" alt="">
</div>
</div>
</div>
</div>
<div class="list">
<div class="title">
<p>量贩囤货</p>
<p>全部></p>
</div>
<div class="item">
<div class="item-left">
<img src="./img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">
</div>
<div class="item-right">
<p>3盒装 韩国制造</p> <!--p标签默认占用16的大小-->
<div class="price">
<p>¥55</p>
<img src="./img/cart.PNG" alt="">
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<img src="./img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">
</div>
<div class="item-right">
<p>3盒装 韩国制造</p> <!--p标签默认占用16的大小-->
<div class="price">
<p>¥55</p>
<img src="./img/cart.PNG" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* 标签固定高宽，如果设置了边框和边距，压缩内容区域*/
p标签默认占用16的大小
扫一扫
1990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
