来自前端菜鸟对css display属性的理解

SHERlocked93 发布于2019-08-01 17:14 / 1303人阅读

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。

对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。

1.display:none

display：none; 此属性是说不让元素显示。先上图

2.display:block

display:block是对于行内元素来说的，例如span,a,i.em等。

块级元素和行内元素的区别：

1）块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

2）块级元素可以设置 width, height属性，行内元素设置width, height无效（focus:块级元素即使设置了宽度，仍然是独占一行的）

3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

3.display:inline.

此属性值是针对块级元素的，使用该属性值，块级元素就不会一家为大，不再独占一行，如果其后的元素是行内元素，就会跟在这个块级元素后面显示。

4.display:flex

display:flex是弹性布局，我个人对display:flex深爱有加（哈哈哈），它让我们省去了很多事情，赶紧来看看他到底有什么魔法吧。

先来看看代码吧

html：

</>复制代码 
     
 
         
            
 
             
                title
 
                desctiption

css样式：

</>复制代码 
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.flex-cont{
display: -webkit-flex;
display: -webkit-box;
display:flex;
align-items:center;
/*负责垂直纵轴对齐方式*/
}
.flex-item{
flex:1;
background-color:red;
/*手机宽度有限，给最主要的元素，加比例 子元素要设置宽高，剩下的所有归设置了flex:1的元素*/
}
.s-tit{
/*高度等于行高，文字就垂直居中*/
/*line-height: 36px;
height: 36px;
color: green;*/
font-size:20px;
font-weight:bold;
}
.s-tit,
.s-desc{
line-height:1.2;
/*字体大小的1.2倍*/
}
.s-img{
/*占该占的*/
width:50px;
height:50px;
background:#31BBEE;
margin-right:5px;
}
.f-icon{
display:block;
width:20px;
height:20px;
background-color:#31BBEE;
}

实现效果

看到效果想到了什么？老铁们，是不是感觉很熟悉。这不就是QQ，微信，里面我们看到的聊天的那个界面吗，是不是超级容易就实现了。加入不使用display:flex来实现，你想到的是什么。反正我会是想到float属性，但是后果呢？很让人头疼，使用了float浮动，你就要替他擦屁股。所以，使用display:flex岂不是很爽歪歪？

详解：

使用display:flex属性的时候，假设你左边放图片，中间放文本，右面再放其他的东西的话，把这三个放到一个盒子里，给包含着三个元素的父元素设置display:flex，给左右两边设置宽度，给主元素设置flex:1(我这里把文本当做主元素),这样就轻松实现了三个元素在一行显示。是不是很nice！

小白一枚，有不当的地方恳请大佬们指正，抱拳啦。如果对您有一点帮助，给个赞呗，么么哒

云服务器 GPU云服务器 display属性对python的理解谈谈对php的理解对人工智能的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51037.html

来自前端菜鸟对css display属性的理解

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。 1.display:none display：none; 此属性是说不让元素...

TZLLOG 2019-08-29 13:00 评论0 收藏0
前端菜鸟笔记 Day-1 HTML&HTML 5

摘要：行内元素特征设置宽高属性无效设置仅左右水平方向有效，上下垂直无效设置上下左右都有效内容不会自动进行换行行内块元素行内块元素综合了两者的特征，各有取舍，可以对任意元素进行属性设置。文章大纲来源：【Day 1】HTML & HTML 5 标记语言 XHTML/HTML/HTML 5异同了解doctype HTML HTML 5 标记语言标记语言(ML)即 Markup Langu...

kevin 2019-08-02 14:13 评论0 收藏0
前端菜鸟笔记 Day-4 CSS布局

摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型宽度和高度内边距外边距 CSS定位浮动 CSS框模型内容引用：CSS 框模型概述 CSS 框模...

go4it 2019-08-30 15:55 评论0 收藏0
前端菜鸟笔记 Day-4 CSS布局

摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型宽度和高度内边距外边距 CSS定位浮动 CSS框模型内容引用：CSS 框模型概述 CSS 框模...

Honwhy 2019-08-02 14:12 评论0 收藏0