css怎样运用负margin技术性完成均值合理布局

日期:2020-12-12 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

大家平时会运用float合理布局来处理IE访问器CSS的适配性难题,例如淘宝,便是用float合理布局来完成的。 大家会在淘宝网页页面会看到下图这样1种合理布局。

这类照片匀称遍布的合理布局大家叫均值合理布局,那这类合理布局又是如何完成的呢? 有的同学将会感觉,这还不简易,能够立即设定父元素div宽度和子元素宽度总和相同便可以了。 真的有这么非常容易吗,大家来试1下。

检测

倘若大家令每一个子元素宽度为100px,1共3个子元素,给每一个子元素1个margin-right,设为50px,那父元素宽度应为100x3+50x2=400px。大家设定1些款式。html和css编码以下。

//HTML
<div class="father clearfix">
   <div class="son"></div>
   <div class="son"></div>
   <div class="son"></div>
</div>
//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  border: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}

此时效性果以下

大家发现最终1个子元素被挤下来了,这是为何呢。不必问为何,由于这便是CSS。 那大家该如何处理呢,有的同理论,是受父元素的1px的border危害,大家把换为outline试1下。

大家发现還是沒有起功效,这个情况下如何办呢。接下来给大伙儿详细介绍1种“负margin”的方式。 大家给父元素和子元素间加1个正中间层,令这个div的margin-right为⑸0px,大家再来试1下。

//HTML
<div class="father clearfix">
  <div class="middle clearfix">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</div>
//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  outline: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}

.middle {
  margin-right: ⑸0px;
}

这个情况下大家发现,正中间的div根据“拓宽”右外边距把带3个子元素“包进去”了,从而完成了 均值合理布局

 

结果

根据大家的检测,大家寻找掌握决均值合理布局的计划方案,期待能对大伙儿有协助。更多有关css均值合理布局的材料请关心脚本制作之家其它有关文章内容!