css实践总结

发表于 2018-11-27 分类于开发，前端阅读次数：本文字数： 3.8k

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布局问题

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布局问题解决

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="">

若图片为长方形，则可以如下修改：

1
2
3

<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代码如下：

1
2
3

<div style="width:60px;height:60px">
  <img src="../../assets/img1.jpg">
</div>

5. div中文字太多自动换行

设置div样式为：word-break:break-all;word-wrap:break-all; 即可。

示例如下：

1
2
3

<div style="word-break:break-all;word-wrap:break-all;">
    {{message}}
</div>

为vue中语法，不必理会。

6. 字体大小适应屏幕

css3提供了一些与当前viewpoint相关的元素，vw，vh等。

1 2	1vw = 1% of viewport width 1vh = 1% of viewport height

兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+

使用：

1	<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的设备。