css3提供的网页布局

css3提供的网页布局

css3提供的网页布局_第1张图片

弹性盒子模型(flex box):

设置成弹性盒子

默认横着排放(div也是)

css3提供的网页布局_第2张图片

当子盒子给的宽度过大,总的子盒子宽度超过父级盒子,会自动适配,计算整个盒子父级的大小,均匀分配。

目前是横着排列的,横向会自动适配。但是纵向高不会

css3提供的网页布局_第3张图片css3提供的网页布局_第4张图片

css3提供的网页布局_第5张图片 css3提供的网页布局_第6张图片

方向为列时,竖向就不会被撑破

css3提供的网页布局_第7张图片css3提供的网页布局_第8张图片

元素反向排列:

css3提供的网页布局_第9张图片

子元素超出父容器是否换行

默认不换行

换行

css3提供的网页布局_第10张图片

父级对齐方式:

子元素在水平方向排列,就指的垂直居中

子元素在竖直方向排列,就指的水平居中

css3提供的网页布局_第11张图片

块在水平方向对齐margin设置成auto就可以。主要用在垂直方向上的居中

css3提供的网页布局_第12张图片

css3提供的网页布局_第13张图片

css3提供的网页布局_第14张图片css3提供的网页布局_第15张图片

有这个属性垂直居中,去掉这个属性不生效

css3提供的网页布局_第16张图片css3提供的网页布局_第17张图片

css3提供的网页布局_第18张图片 css3提供的网页布局_第19张图片

css3提供的网页布局_第20张图片

栅格布局——grid布局

css3提供的网页布局_第21张图片 css3提供的网页布局_第22张图片

四个四个为一行

百分比:

css3提供的网页布局_第23张图片 css3提供的网页布局_第24张图片

css3提供的网页布局_第25张图片

你可能感兴趣的:(css3,前端)