一、三种布局方式
1…流式布局 按照从上到下的运行方式进行布局
2.浮动布局 float left right
a.元素浮动后,会脱离文档流
b.元素在遇到另外一个元素边框时,会停止
c.文字不能被浮动元素所覆盖,而是会呈现一种包围效果
d.行内元素浮动后可被设置宽高
3.定位布局
代码实现如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
}
.box0{
background-color: black;
/*浮动*/
float:left;
}
.box01{
width: 300px;
background-color:yellow;
float:left;
}
.box02{
width:300px;
height: 300px;
background-color: blue;
/*float: right;*/
}
/*a{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}*/
</style>
</head>
<body>
<!--3个div大小一样,颜色不一样
布局方式:
1.流式布局 按照从上到下的运行方式进行布局
2.浮动布局 float left right
a.元素浮动后,会脱离文档流
b.元素在遇到另外一个元素边框时,会停止
c.文字不能被浮动元素所覆盖,而是会呈现一种包围效果
d.行内元素浮动后可被设置宽高
3.定位布局
-->
<div class="box0"></div>
<div class="box01"></div>
<div class="box02"></div>
<a href="http://www.baidu.com">行内元素</a>
</body>
</html>
内外边距
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box01{
width: 300px;
height: 300px;
background-color: black;
/*边框*/
border: 5px solid blue;
/*内边距: padding-left/top/right/bottom */
padding-left: 100px;
padding-top: 100px;
/*外边距:margin-left/top/right/bottom*/
margin-left: 100px;
}
.box02{
width: 100px;
height: 100px;
background-color: aqua;
}
.box03{
width: 300px;
height: 300px;
background-color: black;
/*边框*/
border: 5px solid blue;
/*内边距: padding-left/top/right/bottom
padding:
100px值:在四个方向添加内边距
100px 50px:上下, 左右
100px 50px 150px:上 ,左右 ,下
100px 50px 150px 100px:上,右,下,左(顺时针)
* */
padding:100px 50px 150px 100px;
/*外边距:margin-left/top/right/bottom*/
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02"></div>
</div>
<div class="box03">
<div class="box02"></div>
</div>
</body>
</html>
注意要点:
1.内边距将元素变大:
a.在对应方向上的宽高减去 内边距
b.使用 box-sizing: border-box;
元素占据页面空间=元素宽高+外边距(当内边距大于元素宽度,失去作用)
2.margin 与padding的使用方式一致
margin-top 在给子元素设置向上的外边距时,经常会出现子元素拖动父元素一起向下移动。
解决办法:
a.将margin-top–>padding-top使用
b.给父标签设置边框
3.边距相融
两边距同时向一个方向产生距离时,会产生边距相融,谁的大听谁的
4.块元素居中
水平居中
margin: auto;
垂直居中,通过计算像素
margin-top: 100px;
如果本文对你有用,欢迎点赞!