css基础归纳 #2
Description
移动开发
适配方案
1. flexible
2. rem,em。
\* em是相对于父级元素的font-size计算 默认是：16px
\* rem是相对于根元素html的font-size进行计算
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
/* 设计稿基准：640
手机宽度640 font-size : 625% // 10/16 * 100 px
宽度320 font-size: 320 / 640 * 625 = 312.5%
html font-size = 手机宽度/ 设计稿 * 625
*/Positon
1.relative：相当于当前元素偏移，不回脱离dom。其他元素不会占据它原来的位置
2.fixed：相对于视窗来定位，脱离了dom。其他元素会占据它原来的位置
3.absolute：相对于祖先的position，如果祖先元素没有positioned的元素，则是基于body，
4.static: 默认值。表示不会被定位
布局
浮动原理。* 禁止滥用float，因为会打乱文档流。 推荐使用 display: inline-block布局。
inline, block, inline-block
1.inline 行内元素，不能设置宽高， span, a
2.block, 块级元素，占满一行，其他元素下一行开始.div, p
3.inline-block. 行业块级元素，能够设置宽高，能和其他元素一行
4.none, 不删除元素的情况下隐藏或显示元素
垂直居中的几种方式
<div class="positon">
<div class="content">Content goes here</div>
</div>.content {
color: white;
background: #ddd;
width: 150px;
height: 100px;
border: 1px solid #ddd;
}
.positon .content{position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
overflow:auto;
}#wrapper {
display: table;
}
#cell {
display: table-cell;
vertical-align: middle;
height: 300px;
width: 400px;
background: #5bb8ff;
}
#cell .content {
margin: 0 auto;
}<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>.positon{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<div class="positon">
<div class="content">Content goes here</div>
</div>..positon {
display:inline-block;
line-height:300px;
height:300px;
margin: 0 auto;
}5 flexbox
.parent {
display:flex;
text-aligns:center;
height:300px
justify-content:center;
}
.border {
border:1px solid #eee;
}<div class="parent border"><div class="border">垂直居中</div></div>... 继续补充