让图片自适应容器（div）大小
img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。
让小 div 元素在大 div 中居中：
大小div分别设置宽高；
大div{position:relative}；
小div{position:absolute;top:50%;margin-top:-小div高度的一半px}；
注意上面有个负号别丢了；
左边div固定宽度，右边div自适应撑满剩下的宽度
利用bfc：
.left{
width:200px;
float:left;
}
.right{
overflow:hidden;
}
右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。
-
BFC元素简介与基本表现
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。 -
什么时候会触发BFC呢？常见的如下：
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
理解 BFC
https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html
table 的边框
对 table 和 td 设置不同背景颜色，以反衬出边框线，这样就完美实现表格边框：
table {
border-spacing: 1px;
background-color: black;
}
table th {
background-color: white;
}
table td {
background-color: white;
}
使用 rem 布局，让整个页面能适应设备屏幕尺寸：
<head>
<meta charset="UTF-8" name="viewport"
content="width=device-width,initial-scale=1,user-scalable=0"/>
<script src="../../flexible-lite.js"></script>
<script type="text/javascript">
flex(540);
</script>
</head>
文件 flexible-lite.js 是我从网上找到一段 JS 代码，它利用 REM 布局灵活适应屏幕尺寸。
flex(540)， 是调用方法进行初始化， 540 是 UI 设计图的宽度，
比如： UI 图宽度为 500， 就调用 flex(500)。
然后按 UI 图中给出的 px 尺寸值除以 10，就是你在 CSS 中的 rem 尺寸，
比如： UI图中一段文字 font-size: 18px, 在你的CSS中就是： font-size: 1.8rem
所有的尺寸全部用 rem 单位。
网友评论