前端 盒模型布局 浮动布局
Posted bladecheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 盒模型布局 浮动布局相关的知识，希望对你有一定的参考价值。
盒模型布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
body
margin: 0;
padding: 100px 0 0 200px;
/*盒模型组成部分： */
/*margin + border + padding + content
1.每部分都有自己的独立区域
2.content是宽x高，作为内容或子标签的显示区域
3.padding是内边距，没有自身颜色，完成内容的内移(保证显示区域大小不变，可以响应减小content)
4.border是边框，有宽度、样式、颜色，自身透明(transparent)时，是可以透出背景颜色的
5.margin是外边距，控制盒子的显示位置，left、top控制自身，right、bottom影响兄弟
注：margin的偏移依据当前所在位置
*/
div
width: 100px;
height: 100px;
background-color: red;
owen
/*margin: 10px;*/
margin-top: 50px;
margin-left: 10px;
/*margin-right: 10px;*/
/*margin-bottom: 100px;*/
owen
/*border-color: black;*/
/*border-width: 3px;*/
/*none solid dashed dotted*/
/*border-style: solid;*/
border: red dashed 10px;
owen
/*padding: 上右下左，不足找对边*/
/*padding: 10px 20px 30px;*/
padding: 10px;
owen
display: block;
/*width: 100px;*/
width: 80px;
/*height: 100px;*/
height: 80px;
background-color: orange;
</style>
</head>
<body>
<!--
盒模型：
概念：广义上页面中所有的标签都称之为盒子，狭义上布局的盒子指的是display:block
-->
<owen>123</owen>
<div></div>
</body>
</html>浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
.wrap
border: 10px solid yellow;
width: 300px;
/*父级在宽度不固定时高度不能设置死*/
/*height: 300px;*/
/*清浮动：父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集*/
.wrap:after
content: '';
display: block;
clear: both;
.box
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
font: 20px/100px 'Arial';
color: blue;
text-align: center;
.box
float: left;
.b
width: 500px;
height: 100px;
background-color: red;
/*浮动布局：
1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理，否则会影响兄弟布局，采用清浮动处理
*/
</style>
<style>
h1:before
content: '123';
/*当控制的控制自身完成所有布局（包含所有子集布局），再执行该时间点*/
h1:after
content: '000';
</style>
</head>
<body>
<h1>内容</h1>
<!--.wrap>.box$*9-->
<div class="wrap">
<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>
<div class="b"></div>
</body>
</html>两种布局案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两种布局总结</title>
<style>
body, h1
margin: 0;
</style>
<style>
.header
width: 1210px;
height: 100px;
background-color: orange;
/*自动获取留白区域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
.header:after
content: '';
display: block;
clear: both;
.header a
display: block;
width: 500px;
height: 100px;
background-color: red;
float: left;
.header form
/*background-color: pink;*/
float: right;
/*父子级顶端产生距离，建议使用padding*/
padding-top: 30px;
.header input
/*margin-right: 20px;*/
width: 220px;
height: 30px;
border: none;
font-size: 17px;
vertical-align: top;
.header button
width: 32px;
height: 32px;
border: none;
background-color: red;
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
</style>
</head>
<body>
<!--盒模型:margin、padding协调操作，能用padding尽量用padding，再考虑用margin-->
<!--浮动:需要左右排列的block采用浮动布局，且父级一定要清浮动-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button type="submit">Go</button>
</form>
</div>
</body>
</html>以上是关于前端 盒模型布局 浮动布局的主要内容，如果未能解决你的问题，请参考以下文章