布局
在这里插入图片描述
已搞完，代码下面。。。
在这里插入图片描述
这里的代码的核心我之后会发
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
/*要显示出高宽才能看得见啊并且颜色啊，不然默认白的啊*/
.q{height: 500px;width: 100%;background: yellow;}
.w{height: 500px;width: 20%;background: black;color: red;margin: 0px auto;}
</style>
</head>
<body>
<div class="q">
<div class="w">居中布局</div>因为是里面的放框1里面是文字所以是放在里面的div里面的呀
</div>
</body>
</html>
-->
<!--
思路:因为是在里面所以要包括起来的,
思维:因为是在我里面的，所以要包括起来呀
核心然后怎么做？
因为是方块，所以要margin:0 auto就行了
重点他要在要移动的位置放啊
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin:0px;}
.q{width: 100%;height: 400px;background: red;text-align: center;}
.w{width: 20%;height: 400px;background: black;color: yellow;display: n}
/*如果一定要使用的话，*/
/*问题如果一定要使用text-align: center;的话，和display*
那就是行内的可以，但是缺点是不能显示高宽，如果默认block的话那不行
因为行内是移动到中心位置的，但是没有高宽所以只能选择两并用把block是可以
显示高宽的啊
/
</style>
</head>
<body>
<div class="q">
<div class="w">居中布局</div>
</div>
</body>
</html>
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.q{width: 100%;height: 300px;background: yellow;}
.w{width: 20%;height: 300px;background: black;margin: 0 auto;color: red;position: absolute;}
</style>
</head>
<body>
<div class="q">
<div class="w">居中布局</div>
</div>
</body>
</html>
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.q{width: 100%;height: 300px;background: yellow;position: relative;}
.w{width: 400px;height: 300px;background: white;position: absolute;left: 50%;transform: translateX(-50%);}
</style>
</head>
<body>
<div class="q">
<div class="w">居中布局</div>
</div>
</body>
</html>
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.q{width: 100px;height:600px;background: yellow;position: relative;}
.w{width: 100px;height: 200px;background: red;position: absolute;top: 50%;left:0px;transform: translateY(-50%);}
</style>
</head>
<body>
<div class="q">
<div class="w">垂直对齐</div>
</div>
</body>
</html>-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.q{width: 100px;height: 600px;background: yellow;display: table-cell;vertical-align: middle;}
.w{width: 100px;height:200px;background: #ccc;}
</style>
</head>
<body>
<div class="q">
<div class="w">垂直对齐</div>
</div>
</body>
</html>
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.q{width:700px;height: 500px;background: yellow;position: relative;}
.w{width: 200px;height: 200px;background: red;position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div class="q">
<div class="w">水平垂直对齐</div>
</div>
</body>
</html>
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.q{width: 1000px;height: 600px;background: #ccc;display: table-cell;vertical-align: middle;}
.w{width: 200px;height: 200px;background: yellow;margin: 0px auto;display:
block;}
</style>
</head>
<body>
<div class="q">
<div class="w">水平垂直对齐</div>
</div>
</body>
</html>
-->
<!--不能让两边重合就行了
两列布局核心:左边适应右边定宽
左边定宽右边适应
-->
<!--这里是左边定宽，右边适应-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.q{width: 200px;height: 300px;background: yellow;float: left;}
.w{height: 300px;background: red;margin-left: 200px;}
.e{clear: both;height: 300px;background: pink;}/*问题不能使用clear元素*/
/*问题它重合了所以需要margin-left:固定宽度;就可以不重合了*/
</style>
</head>
<body>
<div class="q">
</div>
<div class="w">
<div class="e"></div>
</div>
</body>
</html>就是说如果两列布局中的自适应部分里面有内容，就不能使用clear不然不行的啊
如果自适应部分有子类就不能有clear就行了呀
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.q{width: 300px;height: 400px;background: yellow;float: left;position: relative;}
.r{float: right;background:
red;height: 400px;width: 100%;margin-left:-300px;}
.e{clear: both;background: blue;height: 400px;}
</style>
</head>
<body>
<div class="q">
</div>
<div class="r">
<div class="w">
<div class="e"></div>
</div>
</div>
</body>
</html>
缺点重合了其他的clar也可以
-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.q{height: 300px;width: 200px;background: yellow;float: left;}
.w{height: 300px;background: red;overflow: hidden;}
</style>
</head>
<body>
<div class="q"></div>
<div class="w"></div>
</body>
</html>
-->
<!--这是right适应，其他的嘛固定宽度-->
<!--核心地方是一行中如果前两个固定的话，第三个是适应的宽度，有margin-left: 800px;-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left
{
height: 300px;
width: 400px;
float: left;
background: red
}
.center
{
height: 300px;
width: 400px;
float: left;
background: blue;
}
.right
{
height: 300px;
background: black;
margin-left: 800px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
-->
<!--这是中间的宽度(自适应)-->
<!--因为是中间了，所以left为浮动左，right是浮动右，中间才有位置懂吗-->
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left{
height: 300px;
background: black;
float: left;
width: 300px;
}
.center{
height: 300px;
background: yellow;
margin-left: 300px;
margin-right: 400px;
}
.right{
height: 300px;
background: blue;
float: right;
width: 400px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
核心是一行之中有两个浮动等或者大于的话，就浮动的放在一起就可以了-->本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/04/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
