1. 块元素(如div)独占一行
1.1. 问题
当笔者最初接触div盒模型来给界面进行布局时，遇到过这样一个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test_div</title>
<style>
#father {
background-color: blue;
height: 400px;
border: 2px solid black;
}
#son1 {
background-color: yellow;
width: 300px;
height: 200px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
#son2 {
background-color: red;
width: 300px;
height: 200px;
border: 25px solid black;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">这里是盒子test1内的实际内容。盒子:300px 宽，200px 高，25px 内间距，25px 外间距，25px 绿色边框。</div>
<div id="son2">这里是盒子test2内的实际内容。盒子:300px 宽，200px 高，25px 内间距，25px 外间距，25px 黑色边框。</div>
</div>
</body>
</html>
在以上代码中，笔者原本是想让 id为son1的div 和 id为son2的div 两块区域，并排显示在它们的父元素id为father的div区域中，但是结果却是这样的：
div布局问题.png
1.2. 原因
显然，两个div子区域的宽并没有撑满整一行，那为什么会第二个div区域会换行呢？这是因为，div元素属于块元素，块级元素默认是充满整一行的。因此，两个块级元素是不能并列在同一行的。
1.3. 补充
1）HTML的元素(即标签)按布局特性，分为块元素和行内元素(也称内联元素或内嵌元素)：
块元素
块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中div是最典型的块元素。
行内元素
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中span是最典型的行内元素。
2）而对于块元素和行内元素之间，是可以用css中的display属性来转换的。display属性常用的属性值及含义如下：
- inline：此元素将显示为行内元素（行内元素默认的display属性值）。
- block：此元素将显示为块元素（块元素默认的display属性值）。
- inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
- none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
1.4. 解决
因此，对于这个问题，我们只需要对 #son1 和 #son2 的css属性进行以下修改就能解决：
#son1 {
background-color: yellow;
width: 300px;
height: 200px;
border: 25px solid green;
padding: 25px;
margin: 25px;
display: inline-block; /*让该元素变成行内块级元素*/
}
#son2 {
background-color: red;
width: 300px;
height: 200px;
border: 25px solid black;
padding: 25px;
margin: 25px;
display: inline-block; /*让该元素变成行内块级元素*/
}
修改后页面变为如下：
div布局问题解决.png
2. 文本过长时显示省略号
只需要对包含该文本的元素的css属性进行如下设置即可：
.text {
overflow: hidden; /*超过宽度的文本隐藏*/
white-space: nowrap; /*规定段落中的文本不进行换行*/
text-overflow: ellipsis; /*当元素内文本溢出时显示省略标记（...）*/
width: 300px;
}
3. 将矩形图片变为圆形
css代码如下：
.round_icon{
width: 34px;
height: 34px;
border-radius: 50%;
}
html代码如下：
<img src="../assets/userImg.jpg" class="round_icon" alt="">
若图片为长方形，则可以如下修改：
<span style="width:2.8rem;height:2.8rem;">
<img :src="user.avatarImg" style="border-radius:50%;width:100%;height:100%;">
</span>
4. 图片(img元素)自适应区域(div元素)大小
css代码如下：
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
html代码如下：
<div style="width:60px;height:60px">
<img src="../../assets/img1.jpg">
</div>
相关博客：https://www.lisa33xiaoq.net/359.html
5. div中文字太多自动换行
设置div样式为：word-break:break-all;word-wrap:break-all; 即可。
示例如下：
<div style="word-break:break-all;word-wrap:break-all;">
{{message}}
</div>
{{message}}为vue中语法，不必理会。
6. 字体大小适应屏幕
css3提供了一些与当前viewpoint相关的元素，vw，vh等。
1vw = 1% of viewport width
1vh = 1% of viewport height
兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+
使用：
<div style="font-size:4vw">hello</div>
慎用！
7. flex布局
flex，CSS3提出的新概念，可以极其方便地用于布局，易学好用。
轻松实现子元素水平、垂直居中，换行包裹等布局。
使用说明：https://www.cnblogs.com/qcloud1001/p/9848619.html
在线演示网站：https://www.html.cn/demo/flexbox-playground/
8. 电脑、手机端自适应
@media (min-width: 900px) {
.home-main {
width: 1000px;
height: 100%;
margin: 20px auto;
}
}
@media(min-width: 900px) 可以使其中作用的css样式，只适用于屏幕宽度大于900px的设备。
同理，@media (max-width: 900px) 使css样式只适用于小于900px的设备。
网友评论