宽度与高度
2019-06-17 本文已影响0人
kzc爱吃梨
1.div高度
div单行内联元素高度
div高度与字体大小无关，只与行高
line-height有关。
知识点1：如果div里面只有一个内联元素，div的高度就是这一行内联元素的行高。如果有多行，就把每一行的行高加起来一起算。
多行
文字对齐小技巧
<style>
div{
border: 1px solid red;
font-size: 20px;
}
span{
border: 1px solid green;
display:inline-block;
width: 5em;
text-align: justify;
line-height: 20px;
overflow: hidden; /*这里行高和高度一样，超出的部分就看不见了*/
height: 20px;
}
span::after{
content:'';
display:inline-block;
width:100%;
border: 1px solid blue;
}
</style>
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
image.png
2.多行文字溢出
一行文本过长就变成省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.text{
border: 1px solid red;
white-space: nowrap; /*文字不换行，超出部分往右显示，div的宽度不是由文字决定的*/
overflow: hidden;
text-overflow: ellipsis; /*超出部分变成省略号*/
}
</style>
<body>
<div class="text">
d
a
...
5
6
</div>
</body>
</html>
单行文本溢出
http://js.jirengu.com/rojoh/2/edit
多行文本超出部分变成省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.text{
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /*超出部分变成省略号*/
}
</style>
<body>
<div class="text">
d
a
...
5
6
</div>
</body>
</html>
多行文本溢出
http://js.jirengu.com/zomiz/2/edit
3.文字垂直居中
<style>
.center{
outline: 1px solid red;
/*垂直居中。注：千万别把高度height写死*/
line-height: 24px;
padding: 8px 0;
/*水平居中*/
text-align: center;
}
</style>
<body>
<div class="center">
0123456789
</div>
</body>
好处即使多行文字也很好看
image.png
4.margin合并
如果父元素没有东西挡住margin，儿子元素的外边距就会和父元素的外边距合并起来。
<style>
.son{
border: 5px solid red;
margin: 10px;
}
.dad{
outline: 1px solid green;
margin: 5px;
}
</style>
<body>
<div class="dad">
<div class="son">
111
</div>
</div>
</body>
子元素
父元素
image.png
怎么解决合并问题
加border
image.png
父元素会不会变高取决于有没有东西挡住这个
margin，可以是border，padding，overflow：hidden
padding
overflow:hidden
总结：如果div里面还有div，它的高度由里面div高度加padding，加margin，这个margin有时候要加有时候不要紧，具体看情况。
小结
div高度是是由它内部文档流中的元素的总和决定的。（文档流中内联元素从左到右依次排开，如果空间不够将换行在从左到右排列；块级元素从上到下，每一个快都会另起一行。）http://js.jirengu.com/juyed/2/edit
脱离文档流
float:left、position:absolute、position:fixed（算高度时候别叫上我）
float:left
position:absolute、flxed
position:relative相对定位没有脱离文档流
它相对之前位置定位，但还是占据之前的位置，也就是说在文档流中的位置是不变的。http://js.jirengu.com/juyed/3/edit
position:relative
div里面的div垂直居中
1、普通
http://js.jirengu.com/temab/2/edit
image.png
2、外面高度为全屏的居中
http://js.jirengu.com/temab/3/edit
image.png
一比一的div
高度为零，宽度自适应。（要实现高度千万别写高度，用padding撑）
一比一的div
