em会继承父级元素的字体大小。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
清除浮动的方法，为什么使用清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题； 只要把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其他元素。 //1、设置父布局的css属性（不推荐） 设置父标签为浮动，但是这样会使其整体浮动，影响布局。 设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。 //2.、通过css属性clear 在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。 这种情况下，父布局不能设置高度。 <style> .clear{ clear: both; } </style> <div class="parent"> <div class="child">float div</div> <div class="clear"></div> </div> //3、Overflow 清除浮动 这种情况下，父布局不能设置高度。 父级标签的样式里面加: overflow:hidden;为了照顾ie6，我们再加上 zoom:1; style> .parent { width: 200px; /* height: 50px; */ padding: 10px 20px 20px 10px; background: red; margin: 0 auto; overflow: hidden; zoom:1; } .child { width: 100px; height: 100px; line-height: 100px; text-align: center; background: green; float: left; } </style> <div class="parent"> <div class="child">float div</div> <!-- <div class="clear"></div> --> </div> //4、After伪类清除浮动（推荐） 为父标签添加伪类After,设置空的内容，并且使用clear:both; 这种情况下，父布局不能设置高度。 <style> .parent::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style>
水平垂直居中的方法
//水平对齐+行高 【思路一】text-align + line-height实现单行文本水平垂直居中 <style> .f10 .test{ text-align: center; line-height: 100px; } </style> //“margin:auto”结合”position:absolute” //css代码： .box1{ width:200px; height:200px; border:solid 1px red; position: relative; } .box1 img{ margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; } //html代码： <div class="box1"> <img src="pic.jpg" width=100 height=100/> </div> //方法2：transform结合position //css代码： .box2{ width:200px; height:200px; border:solid 1px red; position: relative; } .box2 img{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } //html代码： <div class="box2"> <img src="pic.jpg" width=100 height=100/> </div> //方法3：flex方法 //css代码： .box3{ width:200px; height:200px; border:solid 1px red; display:flex; align-items: center; justify-content: center; } //html代码： <div class="box3"> <img src="pic.jpg" width=100 height=100/> </div> //方法4：table-cell //css代码： .box4{ width:200px; height:200px; border:solid 1px red; text-align: center; vertical-align: middle; display: table-cell; } //html代码： <div class="box4"> <img src="pic.jpg" width=100 height=100/> </div>
BFC块级盒子上下文是什么？怎么用？
//BFC 就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 //创建 BFC 的方式有： 1.html的根元素 2.float浮动 3.绝对定位 4.overflow不为 visible 5.display为表格布局或弹性布局 6.contain值为layout 7.content或 strict的元素等。 //BFC的作用： 1.清除浮动 2.解决margin塌陷问题 //BFC的特点： 1.内部box会一个一个的垂直放置 2.形成了BFC的区域不会与float box重叠，BFC在页面是个独立的容器，里外元素互不影响 3.BFC在计算高度时会把浮动元素计算进去 4.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
左右登高布局
section { width:100%; display: table; } article { display: table-cell; } .left { height: 100px; background: red; } .right { background: black; }
实现一个最大的正方形
section { width:100%; padding-bottom: 100%; background: #333; }
实现一个三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
实现一个扇形
<style> .sector { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: #f00 transparent transparent; border-radius: 50px; } </style>
实现一个同心圆
.box{ width: 100px; height: 100px; border-radius: 50%; background:red; border: 50px solid green; } .circle1{ width: 200px; height: 200px; background: red; border-radius: 50%; } .circle2{ background: green; width: 100px; height: 100px; border-radius: 50%; /*外圆的半径+内圆的半径负值*/ margin-top: -150px; /*外圆的半径-内圆的半径*/ margin-left: 50px; }
实现一个椭圆
{ width: 200px; height: 100px; background: red; border-radius: 100px / 50px; /* 表示以水平半径100px 垂直半径50px的椭圆切割 */ }
实现一个梯形
{ border-bottom: 100px solid red; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 100px; }
实现一个三角箭头
.arrow_left{ width: 0; height: 0; border: 50px solid; border-color: transparent red transparent transparent; position: relative; } .arrow_left::after{ content: ‘‘; position: absolute; right: -55px; bottom: -50px; border: 50px solid; border-color: transparent white transparent transparent; }
三栏布局
/* 浮动布局 */ .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; }
/* 绝对定位布局 */ .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left:0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ right:0; width: 300px; background: blue; }
/* flex布局 */ .layout.flexbox{ margin-top: 110px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex:1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; }
三栏布局-圣杯布局（先写中间的部分）
.container { padding-left: 220px;//为左右栏腾出空间 padding-right: 220px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; position: relative; left: -220px; } .center { float: left; width: 100%; height: 500px; background: yellow; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; position: relative; right: -220px; }
外边距重叠，如何解决
//什么是外边距重叠 外边距重叠指的是，当两个垂直外边距相遇时，他们将合并形成一个外边距。 垂直相领的两个盒子外边距合并的规则 如果两个外边界值都为正，则两个盒子垂直方向的距离是两个外边距值中的最大的值。 如果一正一负，则是正边界值减去负边距值中的绝对值。 如果都是负数，则用零减去绝对值最大的负边距（只有外边距才可以为负值，内边距不允许为负值）。 //嵌套盒子（父子盒子）的外边距合并 一个元素包含在一个元素中时(假设没有内边距或边框把外边距分隔开)，他们的上、下外边距也会发生合并 //上下外边距重叠 浏览器在渲染相邻两个box时，如果垂直方向且相邻的box直接各设置了上和外边距，则浏览器只会取最大的那个外边距设置值。
而从浏览器的调试工具中可以看到，实际较小的那个外边距也有设置上，只是两边的外边距发生了重叠。 //防止外边距重叠的方法 元素绝对定位，一般用在内层元素 内层元素加float:left或者display:inline-block 外层元素用padding加边距 外层元素设置overflow:hidden 内层元素透明边框 border: 1px solid transparent
原文：https://www.cnblogs.com/huahongcui/p/11503609.html