1. 文字两端对齐套路，实现两行文字首尾对齐text-align: justify;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字两端对齐套路</title>
<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>
</head>
<body>
<div>
<span>姓名</span> <br>
<span>联系方式</span>
</div>
</body>
</html>
套路：
-
<span>包裹需要对齐的文字，方便操作。 - 利用伪元素
span::after(inline-block)在后面添加一个空的内容，并把width设为100%，将内容撑大，然后hidden它
text-align：规定行内内容如何相对它的块父元素对齐。而且它并不控制块元素自己的对齐，只控制它的行内内容的对齐。要控制文本两端对齐直接写text-align：justify就可以 了，但是对于多行文本，text-align不会对文本的最后一行起作用，最后一行依旧左对齐.因此对于单行文本的段落不会实现效果，单行文本既是第一行，也是最后一行。
参考文章：
text-align: justify 的使用方法
2.将ul中的li 横向排列float布局（制作导航栏的常用方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
ul{
margin:0;padding:0;list-style: none;
border: 1px solid green;
}
ul>li{
float:left;
border: 1px solid red;
}
.clearfix::after{
content:'';
display: block;
clear: both;
}
</style>
<body>
<ul class='clearfix'>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ul>
</body>
</html>
实现结果
- 去除浮动，添加clearfix类的代码记住
.clearfix::after{
content:'';
display: block;
clear: both;
- float布局套路：
1.浮动元素加float:left;
2.浮动元素的父级元素加class = "clearfix"来去除浮动。
3. 文字溢出省略
- 单行文本溢出省略
http://js.jirengu.com/gayuw/2/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单行省略文本</title>
</head>
<style>
div{
border: 1px solid red;
/*******实现代码******/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/******************/
}
</style>
<body>
<div>
1212223546516515131321154648489789448946164898989898989
</div>
</body>
</html>
套路：搜索关键字 css multi line text ellipsis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多行省略</title>
</head>
<style>
div{
border: 1px solid red;
/********************/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/***********************/
}
</style>
<body>
<div>
4561235646546464654644989898989898989898
5664656565656565656565656448484848484848
4747474747777474774774744484848484848484
1213132123123132223232131484848484848422
</div>
</body>
</html>
4. 块级元素内的文字居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字居中</title>
</head>
<style>
div{
border: 1px solid red;
line-height: 24px;
padding: 8px 0;
text-align: center;
</style>
<body>
<div>
121222354651651513132115464848978944
89461648989898989894848484848484848844
</div>
</body>
</html>
套路：
http://js.jirengu.com/pucen/1/edit
1.垂直居中：一般情况不要指定div的height，（定死了多行文字容易溢出，div的高度由内部文档流的高度总合决定），应该指定文字的line-height，然后用padding撑出来高度。
2.水平居中：text-align: center;
5. margin合并
div里嵌套div，外层div的高度会不会被内层div的margin撑高，取决于外层div有没有padding或者border阻挡。
6.div内的div垂直和水平居中
div内嵌套一个div，外部div定高，内部div高度自适应。
使用flex布局实现
http://js.jirengu.com/zugoc/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.dad{
border: 1px solid red;
height: 300px;
display: flex;
justify-content:center;
align-items:center;
}
.son{
border: 1px solid green;
width: 100px;
}
</style>
<body>
<div class="dad">
<div class="son">
8484848484
84ffdfdfdf
dfdfgrrgr
</div>
</div>
</body>
</html>
网友评论