CSS深入浅出-布局套路

布局流程图

布局流程图

原则

• 不到万不得已，不要写死 width 和 height
• 尽量用高级语法，如 calc、flex
• 如果是 IE，就全部写死
  把页面做出来就行

Float布局

• 口诀

1. 给子元素全加style="float:left(right)"
2. 给父元素全加class="clearfix"
3. 在css里写

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}

• 兼容IE6

.clearfix{
    zoom:1;
}

Flex布局

• 口诀

1. 给父元素加上display:flex;
2. 给父子元素分别加上对应属性
   布局介绍

• 移动端布局注意点(响应式)

1. 做两个导航条，一个给pc，一个给mobile
2. 默认手机端导航条不可见(display:none)
3. 用媒体查询切换，在屏幕宽度为移动端页面(0~420px)时，就看见手机端导航条，自动隐藏PC的
4. 写一个js，当用户点击菜单栏按钮时，显示菜单
5. 自适应宽度"width:auto;"

• 图片变形怎么办

1. 不要用<img>标签

background:transparent url(地址) no-repent center;
background-size:cover;//尽量保证全的显示图片

3. 搜索"固定比例 div 技巧"

例子

• 百分比布局

元素名:nth-child(数值){
    width:30%;
    background-color:red;
}
元素名:nth-child(数值){
    width:70%;
    background-color:red;
}

• 宽度不写死

选择器名{
    width:calc(25% - 8px);
//每行四个元素，每个元素间隔8像素
}