左右布局
在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%;
}
就能实现中文的两端对齐。
网友评论