深入理解和应用display属性(二)

四、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: 1; 
            }
            .mid{
                flex: 2; 
                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: 1;
                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属性,算法还不明确。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

分析Silverlight Button控件布局

分析Silverlight Button控件布局 答:关于按钮自适应 Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid...

39050
来自专栏搞前端的李蚊子

使用canvas实现一个圆球的触壁反弹

HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

30250
来自专栏前端杂货铺

绝对定位下的盒模型

元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中,我们提到了...

25740
来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

26760
来自专栏java小白

CSS三大特性

17140
来自专栏菜鸟计划

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

35040
来自专栏前端杂货铺

CSS3实现圆形进度条

介绍   闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。 现在在此讲述...

75580
来自专栏烙馅饼喽的技术分享

Silverlight像素着色器文字描边效果-改

        上次的描边着色器有两个问题,导致效果不太理想。现在我们来设法改进这两点。 问题一: 当TextBlock的呈现宽度和高度没有正确赋值时,将无法...

32950
来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

1K100
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会...

8720

扫码关注云+社区

领取腾讯云代金券