跟面试官扯了半小时的跟面试官扯了半小时的CSS的的flex弹性布局,都在这里了。【看完你会弹性布局,都在这里了。【看完你会
更加透彻】更加透彻】
目录目录1. CSS3怪异盒模型2. flex基本概念3. 弹性布局属性4. CSS3多列5. 响应式
1. CSS3怪异盒模型怪异盒模型
在说在说flex布局之前,再来回顾一下布局之前,再来回顾一下CSS3的怪异盒模型。的怪异盒模型。
(1)
标准盒模型的总大小=width/height+padding+border+margin;
怪异盒模型的总大小=width/height+margin.
(2)box-sizing属性:
可以给box-sizing属性指定的属性值为content-box属性值表示标准盒模型,指定border-box属性值表示怪异盒模型。
content-box:在宽度和高度之外绘制元素的内边距和边框。
border-box:在元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制.
怪异盒模型=IE低版本盒模型=border-box
(3)为什么要使用box-sizing属性:
使用的目的是控制元素的总宽度,如果不使用该属性,样式中默认的使用的是content-box属性值(标准盒模型),它只针对内容的宽度做了一个
指定,却没有对元素的总宽度进行指定。
有些场合下利用border-box属性值会使得页面布局更加方便。
2. flex基本概念基本概念
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex;}
行内元素也可以使用Flex布局。
.box{
display: inline-flex; /* 将对象作为内联块级弹性伸缩盒显示 */
}
弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。通过盒模型,设计师可以很轻松的创建自适应浏览器窗口的流动
布局或自适应字体的弹性布局。
flex 是2012年的语法,大部分浏览器已经实现了无前缀版本。
Webkit内核的浏览器,必须加上-webkit-前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
采用flex布局的元素,成为flex容器,他的所有子元素自动成为容器成员,称为容器项目。
评论10
最新资源