面试题中常见的布局类问题总结

时间 2019-12-17

标签面试题中常见的布局问题总结栏目快乐工作繁體版

原文原文链接

双飞翼布局，圣杯布局

主要是margin为负数的应用

负边距的使用；

影响文档流位置：会使它们在文档流中的位置发生偏移，相对定位是原来的位子还在，可是影子不见了；负边距则是本身的位置也被移动了；

影响文档流宽度：若是元素没有定宽，元素的宽度将会被增长；

影响浮动元素位置：好比说下面：

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
#div1 { background-color: red; width: 100%; float: left; } #div2 { background-color: blue; float: left; margin-left: -100%; } #div3 { background-color: yellow; float: left; margin-left: -60px; }

margin - left : -100% 被向左移动了父元素的宽度那么长的距离；直接移到了上一行的那个位置，

margin - left: 60px (他本身的宽度)，向左移动了本身的宽度那么长的距离，上一行从右边开始减去60px的位置；

因此双飞翼布局，圣杯布局的原理：

双飞翼布局：middle的div里又插入一个div，经过调整内部div的margin值不被盖住；

圣杯布局 ： container 是细腰，因此经过margin 复制调整到一行中后，咱们能够经过position： relative 来不让他们盖住；

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
 <style> .container{ padding-right: 40px; padding-left: 40px; background-color: gray; height: 400px ; } .main { background-color: red; width: 100%; float: left; height: 100%; } .left { background-color: blue; width: 40px; float: left; height: 100%; margin-left: -100%; position: relative; left: -40px; } .right { background-color: yellow; width: 40px; float: left; height: 100%; margin-left: -40px; position: relative; right: -40px; } </style></head><body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div></body></html>

负边距对绝对定位的影响：绝对定位的元素如何居中对齐的解决方案的原理；

margin / padding 百分比是什么的值？

padding/margin取形式为百分比的值时，不管是left/right，仍是top/bottom，都是以父元素的width为参照物的

border 百分比是什么的值？

border 的值不支持百分比；

background-color 的覆盖范围

到 border的地方，包含content 和 padding;

今日头条一面面试题：用css 画一个正方形：

1. 使用vw ,vh 的单位；

2. 使用padding-bottom 的百分比是元素的宽度，同时设置height : 0 防止元素被撑开；

3. 使用父盒子的伪元素，margin-top为100%　来撑开，可是伪元素会和父元素margin 重叠，因此在父盒子上面触发 BFC 就能够了；

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
 .test { width: 200px; background-color: red; overflow:hidden; // 触发 BFC } .test::after { margin-top: 100%; //经过儿子的margin-top 来撑开父亲的高度，利用了margin百分比是父元素宽度 content: ''; // 伪元素的content 仍是不能少 display: block; }

vertical-align在什么状况下会起做用？

只有一个元素属于 inline或是 inline-block（table-cell也能够理解为inline-block水平），其身上的vertical-align属性才会起做用，好比说：图片，按钮，单复选框，单行/多行文本框

vertical-align 和 line-height 有基友的关系，vertical的百分比就是基于 line-height的:

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
{ line-height: 30px; vertical-align: -10%;}

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ }

对于内联元素，vertical-align与line-height虽然看不见，但实际上「处处都是」

line-height 的做用：

   
   
   
   
    
    
    
    
   
   
   
   
有一个空的div，<div></div>，若是没有设置至少大于1像素高度height值时，该div的高度就是个0。若是该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为何div里面有文字后就会有高度呢？ 不是文字撑开了div的高度，而是line-height

首先，行内元素一行就会有一个行框，里面有上，下边距，加上文本高度；在文本高度里面，有顶，中，基，底四个线。而基线之间的距离就是line-height的高度。

若是一段文本的高度为16px，若是给他设置line-height的高度为200，那么至关于，文本的上下间距的高度增长了，可是文本自己的高度依然是16是不变的，而且一直默认在行框中垂直居中，而上间距和下间距平分了200px的高度而且减去文本自己的高度。因此，容器被这一行文本占满，而自己文字在本身的一行中是垂直居中的，因此看起来就像是在容器中垂直居中。

水平居中：

1. 行内元素，父元素 text-align : center
2. 块级元素有定宽，margin:0 auto;

3. 块级元素绝对定位，transform : translate（-50%，0）；

4. 块级元素绝对定位，而且知道宽度， margin-left: - 宽度的一半

5. 块级元素绝对定位，left:0; right:0; margin:0 auto

垂直居中

1. 若元素是单行文本, 则可设置 line-height 等于父元素高度，原理见上面；
2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }

3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;

4. 绝对定位的块用 transform: translate(0, -50%)

5. 绝对定位，而且有定高， margin-top : -高度的一半注意不要用 margin-bottom, 不会生效的

6. 设置父元素相对定位(position:relative), 子元素以下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }

null