行高（line-height)、margin、float

最新推荐文章于 2023-06-04 19:44:16 发布

吃不胖的吃货

最新推荐文章于 2023-06-04 19:44:16 发布

阅读量1.2k

点赞数

文章标签： html float 继承

本文链接：https://blog.csdn.net/hzq0413/article/details/64485572

版权

一.行高（line-height）

将行高设置等于容器的高度可以让文本垂直居中

1.行高是可以继承的

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>

<style>

.father{

width:100px;

height:30px;

background:red;

line-height:30px;

}

.son{

}

</style>

</head>

<body>

<div class="son">abcef</div>

</div>

</body>

</html>

二.margin 两种特殊的现象

1.外边距的合并现象：

如果两个div上下排序，给上面的那个div设置margin-bottom，给下面的那个设置margin-top，那么两个margin会发生合并现象，合并以后的值取最大的那个。

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.one {
height:100px;
background: red;
margin-bottom:50px;
}
.two {
height:200px;
background: blue;
margin-top:100px;
}
</style>
</head>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
</body>
</html>

2.margin塌陷现象

如果一个大盒子中包含一个小盒子，给小盒子设置margin-top大盒子会一起向下平移。、

解决方案：1.给大盒子加一个边框边框，颜色为透明（transparent）,多出来的像素两种解决方法，
（1）手动做减法，在宽高属性上减去边框的所占像素
（2）固定死宽高，属性（box-sizing:border-box;）

2.在父标签里面设置一个overflow:hidden;属性

3.浮动也可以

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

.father {
width:400px;
height:300px;
background: red;
overflow: hidden;
}
.son {
margin-top:1px;
width:200px;
height:150px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

三.浮动（float）

作用：1.解决一行中显示多个盒子的问题 2.转换行级标签成块级标签，使其可以设置宽高

浮动有左浮动 float：left 和右浮动 float：right

浮动的特点：1.浮动的元素会脱离文档流：如果一个元素按照正常的标准流来显示，会在 html 中所属的位置占位，后面的元素会紧跟着它。但是浮动脱离文档流，将来在看到浮动的元素之后，不能以正常的文档流来进行判断。（在文档流中不占位置了，它是在文档流之上）

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>
<style>
div{
width:200px;
height:200px;
}
.one {
background: red;
float: left;

}
.two {
background: blue;
}

.three {
background: pink;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

2.浮动以后的元素会覆盖在文档流的元素之上。

3. 浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>
<style>
div{
width:200px;
height:200px;
}
.one {
background: red;
float: left;

}
.two {
background: blue;
}

.three {
background: pink;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

4.浮动显示的位置与原本不浮动之前的位置是对应的

5.浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素

6.浮动的元素会改变显示方式，不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。浮动以后的元素可以设置宽高。

清除浮动解决方案

（1）浮上去的元素，给它设置float:left;让它也浮动起来，但是它的结构便不是自然的结构了，不推荐
（2）在用完浮动的地方的后面建立一个空标签，给空标签设置一个属性，clear:both；弊端：会造成标签冗余，不推荐
（3）在父级盒子里设置超出隐藏，overflow:hidden;弊端：可能会对文档结构产生影响，如后期的特效，不推荐
（4）通过在用完浮动的盒子处建立伪类选择器清除浮动，格式.box:after{content:"";display:block;clear:both;}推荐使用

浮动的案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}

/*确定版心的距离980*/

.nav {
width:980px;
height:50px;
background: red;
margin:0 auto;
}
.logo {
width: 980px;
height:100px;
background: purple;
margin:0 auto;
}
.message {
width:980px;
height:150px;
background: pink;
margin: 0 auto;
}
.content {
width:980px;
height:500px;
background: blue;
margin:0 auto;
}
.foot {
width:980px;
height:50px;
background: yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="nav">导航</div>
<div class="logo">商标</div>
<div class="message">页面信息</div>
<div class="content">内容区域</div>
<div class="foot">底部</div>
</body>
</html>