CSS进阶
先导
本文将会为大家介绍CSS的布局相关内容
- 盒模型
- 何为高度塌陷
- flex弹性盒布局
盒模型
盒模型: 通常来讲就是一个类似于盒子的一个容器,容器里面装着各种各样的元素,在css中通过box-sizing来设置盒模型的类型,主要分为两种类型: content-box,border-box, 描述的方式还是以图片来进行描述,首先先给读者画出所有盒子都可能包含的内容.
从图片中可以看出,一个容器基本会包含外边距,内边距,边框,内容宽度四种.
content-box
从英文中可以明确看出,content-box其实指的就是内容区的一个盒子模型,当对content-box设置宽度时,设置的仅为内容区的宽度,并不会涵盖border,padding,margin,border.我将以代码的形式为读者展示content-box.
div {
width: 500px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
从该图很清楚的可以看出,如果当同时padding,margin,border,该div的宽度将变大,设置的宽度仅为内容区的宽度
border-box
从英文中可以明确看出,border-box其实指的就是包含padding,border,margin,content的一个盒子模型,当对border-box设置宽度时,设置的宽度会涵盖border,padding,margin,border.我将以代码的形式为读者展示border-box.
div {
width: 500px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
从该图很清楚的可以看出,如果当同时padding,margin,border,设置的宽度为padding,margin,border,content之和的宽度
特点
| 盒子类型 | 特点 |
|---|---|
| content-box | 设置宽度仅为内容区的宽度 |
| border-box | 设置宽度为border+padding+border+content的宽度 |
高度塌陷
一个盒子内会有许多的元素将该盒子撑开,具体请看下图,仅简单画出了一个元素的时候的情况
在这个盒子内仅有一个元素,整个容器由该元素撑开,若没有设置指定的高度时,若该元素发生了浮动,将脱离文档流(在之前的文章有提到过,具体可看跟我学习CSS(一)),脱离文档流后将变成以后的情况,
由于没有元素将父元素撑开,高度将会塌陷,其实有很多办法可以解决塌陷的问题,博主在这里仅给出一种最为常见好用的方法,在父元素中添加一个类,该类名通常为clearfix.
.clearfix {
content: '';
display: block;
clear: both;
}
将该类添加到高度塌陷的父元素即可解决,小伙伴们快去尝试一下吧!
flex弹性盒布局
flex主要应用于响应式布局中,那么如何开启flex布局呢?仅需将display改成:flex; 则该容器就变为flex弹性盒
以下将给出flex的一些常见用法:
flex-direction:改变主轴方向
.container {
flex-directon:column; //竖直依次分布
flex-directon:row; //水平依次分布
flex-directon:row-reverse; //从右向左反向排列
flex-directon:column-reverse; //从下向上反向排列
}
flex-wrap:若一行排不开是否换行
.container {
flex-wrap:wrap; //换行
flex-wrap:nowrap; //不换行
flex-wrap:wrap-reverse; //从下往上折行
}
justify-content:主轴的对齐方式
.container {
justify-content:flex-start; //向起点靠
justify-content:flex-end; //向末尾靠
justify-content:center; //向中间靠
justify-content:space-between; //把空间放在空隙中
justify-content:space-around; //剩余空间围绕着元素
justify-content:space-evenly; //剩余空间围绕着元素
}
align-items:次轴的对齐方式
.container {
align-items:flex-start; //向上靠
align-items:flex-end; //向下靠
align-items:center; //向中间靠
align-items:stretch; //空间延展,一样高
}
总结
本文主要介绍了盒模型以及flex的布局方式,flex现在运用到响应式布局特别常见,大家可以根据自己的需求去测试flex的效果,以满足自己的项目需求,本文仅为博主学习的经验,若有问题请大家指出,谢谢! 记得持续学习,不断跟进!加油!
