css怪异盒子模型,CSS3弹性盒---怪异盒
怪异盒模型
box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下border
box-sizing:border-box 怪异盒模型(IE盒模型) 总宽/高度=width(包含padding和border)
弹性盒
特点:
1、在弹性盒里,所有子元素按照“主轴”排列
2、在弹性盒里,所有子元素都能设置宽高
3、在弹性盒里,一个元素如果在里面水平垂直居中,只需设置margin:auto;
display:flex; 使当前元素成为弹性盒,进而控制子元素
flex-direction 改变主轴
row 默认x轴为主轴,横向排列
row-reverse 反转横向排列,右对齐,从后往前排,最后一项排在最前面。x轴底部显示(右)
column y轴为主轴,纵向排列
column-reverse 反转纵向排列,从下往上排,最后一项排在最上面 。y轴底部显示(下)
justify-content 元素在主轴上的对齐方式
flex-start 默认,顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐,中间自动分配
space-around 自动分配距离
align-items 元素在侧轴上的对齐方式
flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。顶部显示
flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。底部显示
center 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 当子元素被padding撑开时,不与flex-start等效。
stretch 默认值,拉伸,子元素无高时,将高拉伸为父元素高。
flex-wrap 是否换行
nowrap 默认值,flex容器为单行。该情况下flex子项可能会溢出容器
wrapflex 容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse 反转 wrap 排列。
注:当父元素有高度时,换行自带行间距
align-content 行与行之间的对齐方式
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐,中间自动分配
space-around 自动分配距离
注:只针对多行
align-self 写在子元素上面,控制某一个子元素在侧轴的对齐方式
auto 默认值。
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
order 排列顺序 --- 排序优先级,数字越大越往后排,默认为0,支持负数。
flex 复合属性
flex-grow 拉伸,默认值为0,子元素宽高加起来小于父元素宽高,要有剩余空间,才会有效果,拉伸是宽是高跟主轴有关
flex-shrink 元素宽高超出父元素宽高才有效。为0时,无变化
flex-basis 项目长度
flex:1 将弹性盒主轴上剩余的空间全部分配给当前元素
复合式写法 flex:0 1 auto; 参数分别代表flex-grow、flex-shrink、flex-basis
标签:CSS3,flex,主轴,元素,弹性,start,对齐,怪异
来源: https://www.cnblogs.com/yznotes/p/12826357.html
css怪异盒子模型,CSS3弹性盒---怪异盒相关推荐
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
- 自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select {box-sizing: border-box; /* 怪异盒子模型 */box- ...
- 【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图 标准盒子模型 和IE盒子模型 什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
- 标准盒子模型和怪异盒子模型(详解)
一.盒子模型定义 盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
- css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- 前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
盒子模型 什么是盒子模型 网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
- 盒子模型和怪异盒子模型
content的width 元素宽度 height 元素高度 可设置像素或者百分比或者其他单位 盒子模型的总宽度和总高度: 外总宽度 = width + padding + border + ma ...
- css中 盒模型的属性包括(),css的盒子模型属性有哪些?css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
最新文章
- shell编程:定义简单标准命令集
- [USACO15JAN]草鉴定Grass Cownoisseur
- Thymeleaf表达式
- OpenCV在G-API上移植各向异性图像分割
- IOC和DI是什么?
- java中怎么跨盘搜索_求解:在盘符中搜索文件(listFiles())出现NullPointerException
- python的pow(-2,3,5)=?
- 什么是补码-网上找到的,非原创
- 几个常用的JavaScript字符串处理函数
- (十一)【数电】(组合逻辑电路)数据分配器和数据选择器
- R 语言数据处理入门-2(缺失值处理)
- Word文档如何压缩
- SQL学习笔记(06)_SELECT INTO
- TSL2561 GY2561 模块 MSP430 单片机 程序 STM32 程序 光强传感器 MSP430F5529
- BeagleBone Black 移植U-Boot (2 MLO、U-Boot)
- 微信突发闪退 BUG,罪魁祸首竟是一张神奇的二维码图片
- 计算机三级知识点总结
- 知识图谱技术入门指引
- ECCV 2018论文解读及资源集锦(8月20日更新)
- NoSQL概述-从Mongo和Cassandra谈谈NoSQL