本章节主要讲解box em rem 媒体和表格
display：box
大家可能见到很多display：box； display：flex； display：flex-box；
其实可以这么理解，display：box是旧版的伸缩布局，display：flex-box是过渡板的，display：flex是最新版本。因为一些兼容性问题，所以我们还是有必要去学习一下display：box的用法，其实大致用法和flex差不多，就是属性名变了。
box-orient
box-orient：表示的是伸缩盒子的子元素的排列顺序。
- horizontal 表示水平排列
- vertical 表示竖直排列
- inline-axis 表示沿行轴排列，就是说按照行内元素的特性排列
- block-axis 表示沿块轴排列，就是说按照块级元素的特性排列
box-direction
表示的是伸缩布局内子元素的排列顺序，是正常的顺序还是倒叙
- normal 表示正常的顺序
- reverse 表示倒叙
我们可以将box-direction和box-orient相结合就表示了flex-direction
- 可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；
- 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；
- 可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；
- 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；
box-lines
表示伸缩布局内的子元素只显示一行，还是超出父亲的空间之后换行
- single 只显示在一行内
- multiple 表示超出父亲的空间之后换行
box-lines其实就可以等价于flex-wrap
box-flex
表示伸缩布局的孩子，在剩余空间内的权重
box-flex等价于flex
box-ordinal-group
表示伸缩布局的孩子的排列先后顺序
box-ordinal-group等价于order
box-pack/box-align
其实说白了 box-pack=justify-content box-align=align-items，要不然怎么说box是旧版的flex呢？
因为一些浏览器兼容性的问题，所以需要根据需求去动态的添加 -webkit- -o- -moz- -ms-
表格性质
咱们想来看看一个常规的表格
table,tr,td {
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 100%;
}
<table>
<tr>
<td><img src="timg.jpg" alt=""></td>
<td><img src="timg.jpg" alt=""></td>
<td><img src="timg.jpg" alt=""></td>
<td>1234</td>
</tr>
</table>然后去缩放浏览器，我们可以看到两个特点
- 图片会自适应的变化
- 多行/单行文字始终是居中显示
那么我们就可以利用表格的特性，去非表格元素变成伪表格。怎么理解就是让非表格元素拥有表格元素的一些特性。
图片自适应效果
section {
width: 100%;
display: table;
}
section div {
border: 1px solid #000;
display: table-cell;
}
<section>
<div><img src="timg.jpg" alt=""></div>
<div><img src="timg.jpg" alt=""></div>
</section>代码也很直白，给section设置了display：table，div设置了display：table-cell，就好比section是table，div是tr/td，这不就是一个表格？这不就实现了表格的一个特性。并且图片还能自适应随着父元素的变化而变化。
多行/单行文字居中
.box {
height: 450px;
font-size: 14px;
border: 1px solid green;
display: table-cell;
vertical-align: middle;
}
<div class="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div> 同样的利用display：table-cell+vertical-align
em的使用
em表示父元素字号的倍数。怎么理解？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.box1 {
width: 30em;
height: 10em;
background-color: pink;
font-size: 20px;
}
.box2 {
width: 3em;
height: 3em;
background-color: gold;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>box1的width：600px height：200px box2的width：60px height：60px
为什么box1的width不是30*16px height不是10*16px？不是说em表示父亲的字体的倍数？
因为box1自己也填写了font-size，自然会去替换父亲的字体，所以box1此时的em表示的是20的倍数
那么因为box2没有去覆盖父亲的字体，所以em是父亲的字体的倍数也就是20的倍数
媒体查询
什么是媒体查询？就是根据不同的媒体设备去显示不同的样式，媒体也可以理解为手机，不同的手机不同的css像素，我们可以利用不同的css像素去适配不同手机。也就是所谓的响应式。
语法 @media + 媒体类型 +媒体功能 或者 在link引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body{
background-color: black;
}
@media screen and (min-height: 500px) and (max-height: 800px){
body{
background-color:yellow;
}
}
@media screen and (max-height: 500px){
body{
background-color: skyblue;
}
}
</style>
}
</head>
<body>
</body>
</html>screen表示屏幕的分辨率，我们需要用and来连接媒体功能，上面的意思表示当屏幕的分辨率大于500px小于800px，背景显示黄色，当屏幕的分辨率小于500px，背景显示天空蓝。我们再来看看link的写法如下
<link href="1.css" rel="stylesheet"/>
<link href="2.css" media="screen and(min-width:720px) and (max-width:1200px)" rel="stylesheet"/>
<link href="3.css" media="screen and (max-width:720px)" rel="stylesheet"/>表达的意思就是默认使用1.css样式，当屏幕的分辨率大于720小于1200，那么现实2.css，当屏幕的分辨率小于720px则显示3.css
rem
rem同样也是字体的倍数，不过是表示根目录的字体的倍数，r=root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
font-size: 40px;
}
.box1,.box2,.box3 {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="box1">
box1
<div class="box2">
box2
<div class="box3">
box3
</div>
</div>
</div>
</body>
</html>可以看到div的宽高都是一样的，与父亲的字体无关，至于根目录有关。其实我们可以利用rem去实现适配，根据不同的浏览器去显示不同的宽高等。
那么去结合媒体查询，去觉得的写一下响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
@media(min-width:320px) {
html{
font-size: 16px;
}
}
@media(min-width:380px) {
html {
font-size: 18px;
}
}
@media(min-width:440px) {
html {
font-size: 20px;
}
}
header {
height: 2.5rem;
position: relative;
display: flex;
}
header .logo {
position: absolute;
top: 0;
left: 0;
width: 3.5rem;
height: 2.5rem;
background-color: blue;
}
header nav {
flex: 1;
width: 100%;
height: 2.5rem;
box-sizing: border-box;
padding: 0 3.5rem;
background-color: pink;
overflow: hidden;
}
header .btn {
position: absolute;
top: 0;
right: 0;
width: 3.5rem;
height: 2.5rem;
background-color: red;
}
header ul {
width: 100%;
list-style: none;
display: flex;
}
header li {
flex: 1;
float: left;
font-size: 1rem;
text-align: center;
line-height: 2.5rem;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<nav>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
<li><a href="">菜单4</a></li>
<li><a href="">菜单5</a></li>
<li><a href="">菜单6</a></li>
<li><a href="">菜单7</a></li>
<li><a href="">菜单8</a></li>
</ul>
</nav>
<div class="btn"></div>
</header>
</body>
</html>我们写了一个简单的导航栏，将rem和媒体查询相结合，根据不同的分辨率去改变对应的rem，通过响应式从而达到适配的目的。
单行多行文字实现省略号
单行省略号
div {
/* 强制不换行*/
white-space: nowrap;
/* 多余内容隐藏*/
overflow: hidden;
/* 文本溢出 以省略号显示 */
text-overflow: ellipsis;
}以上就是单行省略号的关键代码
多行省略号
section {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 行数*/
-webkit-line-clamp:2;
/*垂直排列*/
-webkit-box-orient: vertical;
}以上就是多行省略号的关键代码
本章节目标以完成，接下来会讲解其他的css3的触摸事件，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
