几种常用的布局技巧

来源：互联网发布：大学生网络安全隐患编辑：程序博客网时间：2024/06/05 16:42

随着互联网的发展，网页的形式也越来越多种多样，而实现网页的布局也越来越复杂多变

HTML5 和 CSS3 新技术的出现，以及移动设备的飞速发展，互联网发生了翻天覆地的变化，对于如今来说，布局已不必再拘泥于固定格式，网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度，页面的布局结构会直接影响页面的用户体验，虽然现在的布局样式多种多样，但是也有一些常用的布局方式以及技巧，下面为大家带来几种常用的布局

一、各种居中

居中技巧已经在布局中比较成熟，最常见的是针对已定义宽的块元素设置水平居中，可以将这个块元素设置上下“margin”为“0”，左右“magin”为“auto”就可以实现块元素在父级容器中水平居中，设置方法为: “margin:0 auto”;如何元素没有设置宽度，可以把元素转化为内联块元素，方法为：“display:inline-block”，然后通过设置元素父级“text-align:center”来让元素水平居中;我们同样可以用设置元素“text-align:center”来让元素中的文字水平居中;元素中的文字垂直居中，可以使用padding将文字挤下来居中，不过高度要减去padding值，比较麻烦，我们可以设置元素“line-height”，将它的值设置为元素的“height”值，从而让文字在元素中垂直居中。

二、单行文字超过宽度显示省略号

要让单行文字在文字过宽时自动截去多的字，然后显示省略号，首先需要设置文字容器的宽度，然后强制让文字不换行，最后设置元素的文字溢出属性，特征设置代码如下：

.overtext{

width: 165px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap

}

它的效果如下：

三、已知宽高的元素相对浏览器水平居中

已知宽高的元素相对浏览器水平垂直居中，这种一般是用来做弹出框的，可以将此元素设置固定定位，定位的偏移值使用百分比50%，让元素的左上角对齐浏览器视口的中心，然后用margin的负值，将偏移距离分别设置为宽高的一半，从而将元素的中心对齐浏览器的中心，从而达到水平和垂直居中。

特征设置代码如下：

.pop{

width: 400px;

height:300px;

position:fixed;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-150px;

}

四、清除浮动

当父元素没有设置高度，如果它子元素浮动，子元素就无法撑开父级，父级就需要清除浮动，父级清除浮动有一个最简便的方法就是加上“overflow:hidden”属性，这样做可以达到目的，不过如果子元素里面有相对或者绝对定位的元素，定位超过父级范围的部分会被裁切掉，其实有更成熟的方法，就是使用after伪元素的方法，可以很好地解决这个问题

特征代码如下：

.clearfix:after,.clearfix:before{ content: "";display: table;}

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

将clearfix这个类给父级就可以了。

五、多元素水平居中

多元素水平居中，其实可以用内联块元素的特性，将多个元素转化为内联块，方法为：“display:inline-block”，然后在它们的父级上设置“text-align:center”来让这些内联块水平居中，这些内联块之间会有不必要的小空白，可以通过让这些内联块的代码不换行来解决，然后再用margin设置自定义的间距。

六、多元素右浮动顺序颠倒

多个元素在父级内右浮动，它们浮动后，左右的顺序是颠倒的，我们的解决方法是在多个元素和父级之间再包一层div，让这个div右浮动，多个元素左浮动，从而让它们看上去是右浮动，但是左右顺序是对的，如图：

<html>
<style>
.basic{
width: 50px;
height: 50px;
background-color: black;
color: white;
font-weight: bold;
font-size: large;
/*行高如果height与line-height设置为一样了，文字就会垂直居中*/
line-height: 50px;
}
.wrap{
text-align: center;
}
.inner{
display: inline-block;
/*IE hack 保证在ie下不换行*/
*display:inline;
/*IE hack 触发layout*/
*zoom: 1;
}

</style>

<div class="wrap">
<div class="inner basic">1</div>
<div class="inner basic">2</div>
<div class="inner basic">3</div>
<div class="inner basic">4</div>
</div>
<html>

七、边线合并

边线合并指的是如果元素都设置了四周的边框，那么元素之间如果不设置margin间距的话，它们之间的间隔就是两个边框的距离，如果想达到让它们之间的距离是一个边框的宽度效果应该怎么设置呢?其实用margin的负值就可以了，如图：

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item {
float: left;
border: 1px solid red;
margin-right: -1px;
margin-bottom: -1px;
width: 158px;
height: 180px;;
}

.wrapper {
width: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">

</div>
<div class="item">

</div>
<div class="item">

</div>
</div>
</body>
</html>

八、流体布局与border-box

这里所说的流体布局，是指的用百分比来做宽度的布局，这种布局一般用在移动端，PC端一般使用固定宽度的布局，移动端的设备屏幕种类非常多，为了应对不同的宽度，可以用百分比来动态适应，这就是流体布局，既然用百分比来做单位，如果盒子增加border或者padding，那么盒子还得减去设置的border和padding，才能保持它的宽高不变，但是减去这些border和padding是非常麻烦的，这里有一个CSS属性就是“box-sizing”，把这个属性设置为“border-box”，那么盒子的真实尺寸的计算就从盒子边界开始，这样就可以解决刚刚说的问题，如图：

以上是设置了宽度为25%的四个元素组合排列在一个页面里

<html>
<style>
div {
box-sizing: border-box;
width:25%;
padding: 20px;
border: 1px solid #DDD;
float:left;
}

</style>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

</html>

未完待续

阅读全文

0 0