17.居中的几种体现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中的几种体现</title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
/* 普通文本水平对齐方式,与flex无关 */
/* text-align:center;*/
/* line-height:100px;*/
/*普通文本行高属性,设置行高=盒子高度实现内容垂直居中,只适用于盒子中只有一行内容*/
display: flex;
justify-content: center;
align-items: center;
/*auto自动计算*/
/*通过计算剩余空间,然后写死左外边距为剩余空间的一半实现水平居中*/
/*margin-left: 100px;*/
/*margin: 0px auto;*/
margin-bottom: 20px;
/*使用定位+平移实现居中*/
position:relative;
/*定位后从左往右移动50%(父元素的50%)*/
left: 50%;
/*平移 translateX 水平方向平移,50%是自己的50%,正右负左*/
/*如果水平方向都要平移,就都写到一个里面*/
transform: translate(-50%,-50%);
bottom: -50%;
}
.sp{
background-color: red;
padding: 10px;
}
</style>
</head>
<body>
<!-- 1.分清什么是居中(盒子?内容?)-->
<!-- 内容居中:1.普通文本属性 test-align 和行高属性 line-height-->
<!-- 2.使用内边距padding-->
<!-- 3.使用flex容器,设置 justify-content 和align-items-->
<!-- 盒子居中:1.使用margin外边距实现(只能实现父元素中水平居中)-->
<!-- 2.使用相对定位+ position:relative + left:50% 组合 transform:translateX(50%)-->
<!-- 组合 transform:translateY(50%)-->
<!-- 同时出现 translateX 和 translateY 要写在一起-->
<!-- transform:translate(50%,50%)-->
<!-- 3.给父元素使用 flex 容器 ,设置 justify-content 和align-items-->
<div class="box1">
<div class="box2">hello<br>hello</div>
<span class="sp">hello</span>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/4845f0061db5ee91cc7479e6a4ec9f46.png)
18.实现水平排列和垂直排列的几种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现水平排列和垂直排列的几种方式</title>
<style>
/**
1.使用 float 属性实现左浮动和右浮动,但是有副作用-父元素会塌陷,需要手动清除浮动,否则会对后面的元素产生影响
2.使用 display 属性切换块级元素和内联元素
display:block 切换为块级元素,块元素特征:有宽度和高度,独占一行 (在子元素中设置)
display:inline 切换为内联元素 内联元素特征:没有宽度和高度,不独占一行 (在子元素中设置)
内元素可以与内元素在一行显示,除非显示不下了会换行,或者用<br>换行
内元素不可以与块元素在一行显示,因为块元素独占一行
块元素不可以与块元素在一行显示
display:inline-block 切换为在一行显示的块元素 (在子元素中设置)
3.display:flex 切换为 flex 容器,可以管理子元素/或者内容挂的排列 (在父元素中设置)
flex-direction 设置排列方向
flex-wrap 设置是否换行
justify-content 设置主轴排列方向
align-items 是指交叉轴排列方向
display:none 隐藏元素,切换为inline/block/inline-block/flex 元素就可以显示
*/
.box1>div{
background-color: yellow;
margin: 5px;
/*左浮动*/
/*float: left;*/
/*右浮动*/
/*float: right;*/
/*内联元素没有宽高*/
display: inline;
display: inline-block;
}
.box2>span{
background-color: green;
margin: 5px;
/*width: 50px;*/
/*display: block;*/
}
</style>
</head>
<body>
<div class="box1">
<!--div 默认 块元素-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="box2">
<!--span 默认 内联元素-->
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/f03d0cf0c0af56fbc8deb550ceaaf264.png)
练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习1</title>
<style>
.box>div{
color: white;
font-family: 楷体 ;
font-style: oblique;
font-size: xxx-large;
background-color: #ffb101;
margin: 10px;
width: 100px;
height: 100px;
/*float: left;*/
border-radius: 100px;
text-align:center;
line-height:100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div>商品</div>
<div>商品</div>
<div>商品</div>
<div>商品</div>
<div>商品</div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/d4a1c735918b81e82d26e90ed2c08d5a.png)
练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习2</title>
<style>
.box{
height: 60px;
display: flex;
text-align: center;
background-color: pink;
display: flex;
justify-content: end;
text-align:center;
align-items: center;
}
.box>span{
background-color: #ffb101;
border-radius: 10px;
margin: 10px;
height: 40px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<span>我的商品</span>
<span>我的订单</span>
<span>我的客服</span>
<span>我的购物车</span>
<span>我的地址</span>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/d03fc3ec241db40f1914656ace0aac85.png)