关于CSS的一点点学习成果

左右布局

在HTML中，div元素的排列方式是竖向依次排列，那如果我想要两个块级元素并列，形成左右布局该怎么做呢？这种可以通过浮动元素来完成，将需要并列显示的元素变成浮动元素。具体代码如下：
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent clearfix">
  <div class="child">
    1
  </div>
  <div class="child">
    2
  </div>
</div>
</body>
</html>

CSS代码

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  float:left;
  width:50%;
}

代码实现图

代码链接点这里。
如代码所示，在需要排列的元素中加入float:left;，将其浮动化，然后在其父级元素上加入clearfix，然后在CSS中加入.clearfix::after调整样式，这样就将其并列显示了。但这样会有一个问题，子元素并没有严格的左右对半分,而是靠左排列在一起的，这种问题可以给定宽度来解决，直接给子元素width:50%;，赋予其父级元素50%的宽度，这就刚好两个子元素占一排了。也可以通过将右边元素的浮动写法改为float:right;，使右边的元素靠右排列来实现。

左中右布局

上面介绍了左右布局，如果要进行左中右布局呢，我的想法是和左右布局类似，只需要将子元素的宽度更改一下，但100%的宽度要分为3份不好分，我就直接给每个子元素30%的宽度，然后给第二个子元素左右各给5%的margin，就刚好使100%的宽度。
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent clearfix">
  <div class="child">
    1
  </div>
  <div class="child" style="margin-left:5%;margin-right:5%;">
    2
  </div>
  <div class="child">
    3
  </div>
</div>
</body>
</html>

CSS代码

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  float:left;
  width:30%;
}

代码效果图

代码链接点这里。

水平居中

这种要分情况，看子元素的宽是确定的还是不确定的。

子元素宽不确定的情况

如果子元素为块级元素的话，直接在子元素中写margin-left: n px;margin-right: n px;，n的数值根据实际情况来确定。
如果子元素为内联元素，直接在父级元素中写text-align:center;即可。
代码如下。
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
    <span>YyzclYang</span>
  </div>
</div>
</body>
</html>

CSS代码

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  margin-left:100px;
  margin-right: 100px;;
  text-align: center;
}

代码效果图

代码链接点这里。
parent的子元素为child，child的子元素为span元素。child和span都相对于他们的父级元素居中。

子元素宽度确定的情况

当子元素宽度确定时，直接加上margin-left:aotu;margin-right:aotu;即可。代码如下
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
      YyzclYang
  </div>
</div>
</body>
</html>

CSS代码

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  width:60%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

代码效果图

代码链接点这里。

垂直居中

在进行垂直居中时，可以利用padding元素来实现。如果父级元素高40px，那么可以通过设置子元素高30px，然后利用padding上下各外推5px来实现。
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
      YyzclYang
  </div>
</div>
</body>
</html>

CSS代码

.parent{
  border: 5px solid red;
}
.child{
  outline: 1px solid green;
  text-align: center;
  line-height: 30px;
  padding: 5px 0;
}

代码实现图

代码链接点这里。

其他的心得

长单词换行

在遇到长单词时，如果不能将整个单词显示完全的话，会默认将长单词换到下一行显示，但如果加入一个word-break:break-all;，就能将单词斩断，随意换行显示。
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  YyzclYang>
  YyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYangYyzclYang>
  YyzclYangYyzclYangYyzclYangYyzclYangYyzclYang>
</div>
</body>
</html>

CSS代码

div{
  border:1px solid red;
  word-break:break-all;
}

实现效果图

文字省略溢出

上一节中文字过多，如果只需要显示一行，多余用...代替的话，那么CSS中可以这么写。
CSS代码

div{
  border:1px solid red;
  word-break:break-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

效果图

但如果需要显示多行，最后一行多余的省略呢，那么就这么写。
CSS代码

div{
  border:1px solid red;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

效果图

代码-webkit-line-clamp:3;中的数字3就是需要显示的行数，可自行根据需求更改。

添加多个空格

在html中，两个元素之间的空格，换行等书写方式，到最后只会显示一个空格，如果要显示多个空格，就应该写 ，需要多少个空格就写多少个。

文字两端对齐

例如我们需要实现下面这个样式。

效果图

可以这么写。
html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <span>姓名</span>
  <br>
  <span>联系方式</span>
</div>
</body>
</html>

CSS代码

div{
  border:1px solid red;
  width:100px;
}
span{
  display:inline-block;
  width:100%;
  text-align:justify;
  line-height:20px;
  overflow:hidden;
  height:20px;
}
span::after{
  content:'';
  display:inline-block;
  width:100%;
}

就能实现中文的两端对齐。