四、inline-block

此类元素是inline + block的合体

1) margin和padding都有效;width和height都有效;

.inline{
display: inline-block;
width: 200px;
background: red;
margin: 10px;
padding: 10px;
}
<div class="inline"><a>inline01</a></div>
<div class="inline"><a>inline02</a></div>
<div class="inline"><a>inline03</a></div>
<div class="inline"><a>inline04</a></div>

1) 还是存在8像素的间隔

2) Block/inline-block元素包裹的inline-block元素,默认超width会换行,hieght撑开,可以通过white-space:nowrap强制不换行,但不能实现文本省略显示。

a{
background: red;
font-size: 14px;
display: inline-block;
}
.overWidth{
white-space: nowrap;
width: 100px;
border: 1px solid gray;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="overWidth" >
<a>a01dd</a>
<a>a000000002</a>
</div>

五、Inherit

继承父元素的display属性。

六、flex

实现盒子布局,主要分为容器和子元素相种。在容器元素上用display:flex指定为flex盒子,在子元素上用flex指定元素所占用的格子数。

Flex容器重要属性

1) Flex-direction:表示项目排列方向,可以有四个,左到右,右到左,上到下,下到上

2) Flex-wrap:表示是否允许换行,默认不允许(nowrap)

Flex-flow:是flex-direction和flex-wrap的组合写法

.wrap02{
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
flex-flow: column wrap
}
.grid02{
flex-basis: 60px;
background: gray;
}
<div class="wrap02">
<div class="grid02">01</div>
<div class="grid02">02</div>
<div class="grid02">03</div>
<div class="grid02 grid04 ">04</div>
<div class="grid02">05</div>
</div>

4) Justify-content:设置项目的间隔对齐方式(X轴),注意space-between(两端对齐,项目之间间隔一样,顶边);space-around(每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍)

.wrap02{
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
}
.grid02{
flex-basis: 60px;
background: gray;
}
<div class="wrap02">
<div class="grid02">01</div>
<div class="grid02">02</div>
<div class="grid02">03</div>
<div class="grid02 grid04 ">04</div>
<div class="grid02">05</div>
</div>

5) Align-items:属性定义在交叉轴上的对齐方式(Y轴,垂直对齐),stretch可以拉申(默认值)

.wrap02{
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.grid02{
flex-basis: 200px;
background: gray;
}
<div class="wrap02">
<div class="grid02">01</div>
<div class="grid02">02</div>
<div class="grid02">03</div>
<div class="grid02 grid04 ">04</div>
<div class="grid02">05</div>
</div>

Flex项目的重要属性

1) Align-self:项目自身的对齐方式,可以覆盖容器的align-items属性的值

2) Flex:他是flow-grow\flow-shrink\flex-basis简写,设置元素占用的格子数,如下例子格子是均分的

.wrap{
width: 400px;
height: 200px;
border: 1px solid red;
display: -webkit-flex;
display: flex;
}
.grid{
background: gray;
flex:;
}
.mid{
flex:;
background: red;
}
<div class="wrap" >
<div class="grid">01</div>
<div class="mid">01</div>
<div class="grid">01</div>
</div>

3) Flex-grow:所有子元素之和小于容器宽度时,如果处理剩余宽度,flex-grow默认为0,如果设置为正数,则表示索取剩余宽度值,公式如下:
子元素自身宽度 + 剩余宽度*(子元素自身glex-frow)/(所有子元素的flex-grow之后和)

.wrap{
width: 400px;
height: 200px;
border: 1px solid red;
display: -webkit-flex;
display: flex;
}
.grid{
background: gray;
flex-grow:;
flex-basis: 50px;
}
.mid{
flex-basis: 60px;
background: red;
}
<div class="wrap" >
<div class="grid">01</div>
<div class="mid">01</div>
<div class="grid">01</div>
</div>

Grid1和grid3计算:50 + 240 * 1/2 = 170

Grid2计算:没有设置flex-grow属性,所以为固定值

4) Flex-shrink:所有子元素之和大于容器宽度时,如果处理超出宽度,flex-shrink默认为1,值越大减小的越厉害,值为0,表示不减少,公式如下:
子元素自身宽度 – 超出宽度 * ( 子元素自身宽度 * 子元素自身的flex-shrink/ ( 所有子元素宽度 * 子元素的flex-shrink之和) )

.wrap{
width: 400px;
height: 200px;
border: 1px solid red;
display: -webkit-flex;
display: flex;
}
.grid{
background: gray;
flex-basis: 200px;
}
.mid{
flex-basis: 100px;
background: red;
}
<div class="wrap" >
<div class="grid">01</div>
<div class="mid">01</div>
<div class="grid">01</div>
</div>

Grid1和grid3计算:200 – 100 * 200 / 500 = 160

Grid2计算:100 – 100 * 100 /500 = 80

注意事项:

1) Flex-grow和flex-shrink不好和flex直接混合应用,此两个值是在固定宽度的情况下进行均分的算法,如果嵌入flex属性,算法还不明确。

深入理解和应用display属性(二)的更多相关文章

  1. 深入理解和应用display属性(一)

    Display在官方定义:规定元素应该生成的框的类型.本文只重点分析常用的6个值:none.block.inline.inline-block.inherit.flex.其他table.list-it ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. 深入理解display属性

    display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...

  4. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  5. 面向对象的程序设计(二)理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty

    //理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...

  6. 深入理解display属性——前端布局常用重要属性

    小注:display属性在网页布局中非常常见,但经常用到的仅仅是block.inline-block.inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面 定义 di ...

  7. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  8. CSS学习笔记:display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  9. Code笔记之:CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

随机推荐

  1. Android-webview和js互相调用

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的 ...

  2. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  3. WCF学习之旅—WCF第二个示例(六)

    第五步,创建数据服务 在“解决方案资源管理器”中,使用鼠标左键选中“SCF.WcfService”项目,然后在菜单栏上,依次选择“项目”.“添加新项”. 在“添加新项”对话框中,选择“Web”节点,然 ...

  4. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  5. setValue:forUndefinedKey this class is not key value coding-compliant for the key

    下午开发过程中遇到一个错误,结果被的真惨,从上午 11 点查错一直查到下午 2 点才找到错误的原因,真的郁闷的不行. 关于查错这么久,主要的原因是:   1. 自己对 IOS 开发还不熟悉2. 不知道 ...

  6. Sql Server系列:Microsoft SQL Server Management Studio模板资源管理器

    模板资源管理器是Microsoft SQL Server Management Studio的一个组件,可以用来SQL代码模板,使用模板提供的代码,省去每次都要输入基本代码的工作. 使用模板资源管理器 ...

  7. 【转】C#调用Windows图片和传真查看器打开图片

    //建立新的系统进程 System.Diagnostics.Process process = new System.Diagnostics.Process(); //设置文件名,此处为图片的真实路径 ...

  8. Util应用程序框架公共操作类(二):数据类型转换公共操作类(源码篇)

    上一篇介绍了数据类型转换的一些情况,可以看出,如果不进行封装,有可能导致比较混乱的代码.本文通过TDD方式把数据类型转换公共操作类开发出来,并提供源码下载. 我们在 应用程序框架实战十一:创建VS解决 ...

  9. 简单测试nginx1.90做TCP协议负载均衡的功能

    最近工作中需要做TCP层面的负载均衡,以前网站用的反向代理nginx只支持应用层的负载均衡,对于TCP协议是无能为力的,需要使用LVS(linux虚拟服务器). LVS的特点是高性能和极复杂的配置.对 ...

  10. Easyui datagrid 显示隐藏列

    html:         <div style="float: left; width: 1450px; height:auto;  ">             & ...