关于居中，你会想到什么？
div{margin: auto;}
常见的居中方法
水平居中
.demo{
text-align: center;
margin: auto;
position: absolute;
left: 50%;
margin-left: -?px;
}
垂直居中
.demo{
height: 30px;
line-height: 30px;
display: table-cell;
vertical-align: middle;
position: absolute;
top: 50%;
margin-top: -?px;
}
还有其他方法吗？
CSS3
display:flex;
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<div class="flex">
<div class="flex-item">flex item</div>
</div>
</body>
</html>
.flex{
display: -webit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
border: 1px solid;
height: 200px;
}
.flex-item{
border: 1px solid blue;
height: 50px;
}
水平居中
P {alignment: center;}
垂直居中
P {child-align: middle;}
position方法
p{position:center;}
CSS理论基础
盒模型(box-sizing)
border-box/content-box/padding-box
定位体系
普通流(Normal flow)
块级格式化上下文(Block formatting contexts)
行内格式化上下文(Inline formatting contexts)
position: relative;
浮动(Floats)
绝对定位(Absolute positioning)
position: absolute;
position: fixed;
前端的本质工作是「还原设计」
而CSS是设计意图的最终实现
三层分离（内容，表现，行为）
优雅降级(Graceful Degradation),1994
渐进增强(Progressive Enhancement),2003
误区
滥用 float 布局
使用空标签闭合浮动
用 <br> 控制垂直间距
用 控制字间距(两端对齐布局等)
直接在标签上用 style 属性写样式
随意甚至使用拼音给 Class，ID 命名
多 Class 症(滥用 OOCSS)
时间： 2024-12-26 09:46:08