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

双飞翼布局，圣杯布局
 主要是margin为负数的应用

负边距的使用；

影响文档流位置：会使它们在文档流中的位置发生偏移，相对定位是原来的位子还在，但是影子不见了；负边距则是自己的位置也被移动了；
影响文档流宽度：如果元素没有定宽，元素的宽度将会被增加；
影响浮动元素位置：比如说下面：
  1. #div1 {
  2. 			background-color: red;
  3. 			width: 100%;
  4. 			float: left;
  5. 		}
  6. 		#div2 {
  7. 			background-color: blue;
  8. 			float: left;
  9. 			margin-left: -100%;
  10. 		}
  11. 		#div3 {
  12. 			background-color: yellow;
  13. 			float: left;
  14. 			margin-left: -60px;
  15. 		}
margin - left : -100% 被向左移动了父元素的宽度那么长的距离；直接移到了上一行的那个位置，
margin - left: 60px (他自己的宽度)，向左移动了自己的宽度那么长的距离，上一行从右边开始减去60px的位置；
所以双飞翼布局，圣杯布局的原理：
双飞翼布局：middle的div里又插入一个div，通过调整内部div的margin值不被盖住；
圣杯布局： container 是细腰，所以通过margin 复制调整到一行中后，我们可以通过position： relative 来不让他们盖住；
  1. 	<style>
  2. 		.container{
  3. 			padding-right: 40px;
  4. 			padding-left: 40px;
  5. 			background-color: gray;
  6. 			height: 400px ;
  7. 		}
  8. 		.main {
  9. 			background-color: red;
  10. 			width: 100%;
  11. 			float: left;
  12. 			height: 100%;
  13. 		}
  14. 		.left {
  15. 			background-color: blue;
  16. 			width: 40px;
  17. 			float: left;
  18. 			height: 100%;
  19. 			margin-left: -100%;
  20. 			position: relative;
  21. 			left: -40px;
  22. 		}
  23. 		.right {
  24. 			background-color: yellow;
  25. 			width: 40px;
  26. 			float: left;
  27. 			height: 100%;
  28. 			margin-left: -40px;
  29. 			position: relative;
  30. 			right: -40px;
  31. 		}
  32. 	</style>
  33. </head>
  34. <body>
  35. 	<div class="container">
  36. 		<div class="main"></div>
  37. 		<div class="left"></div>
  38. 		<div class="right"></div>
  39. 	</div>
  40. </body>
  41. </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 就可以了；
  1. 		.test {
  2. 			width: 200px;
  3. 			background-color: red;
  4. 			overflow:hidden;          // 触发 BFC
  5. 		}
  6. 		.test::after {
  7. 			margin-top: 100%;    //通过儿子的margin-top 来撑开父亲的高度，利用了margin百分比是父元素宽度
  8. 			content: '';        // 伪元素的content 还是不能少
  9. 			display: block;
  10. 		}


vertical-align在什么情况下会起作用？

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

vertical-align 和 line-height 有基友的关系，vertical的百分比就是 基于 line-height的:
  1. {
  2.   line-height: 30px;
  3.   vertical-align: -10%;
  4. }
  1. {
  2.   line-height: 30px;
  3.   vertical-align: -3px;    /* = 30px * -10% */  
  4. }
对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」


line-height 的作用：

  1. 有一个空的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; } 




posted @ 2017-05-24 23:49  杜俊成  阅读(2365)  评论(0)  编辑  收藏  举报