css之display

flybywind 发布于2019-08-05 15:09 / 620人阅读

摘要：块级元素元素默认是块级元素默认也是块级元素块级元素的特点元素的内容会充满整行行内元素属性为的元素被称为内连元素。行内块级元素属性为的元素被称为行内块级元素。

display

css定位属性Positioning

display: none

不再页面渲染元素

css-test

这一段落不会被显示出来

这个段落会被显示出来

当一个元素中的display属性是none时，浏览器不会渲染这个元素里的任何内容，不会占据浏览器窗口空间，但它存在与文档流当中。

display: block

块级元素

css-test

p元素默认是block块级元素

div默认也是block块级元素

块级元素的特点：元素的内容会充满整行

display: inline

行内元素





  
  
  
  css-test
  




  display属性为inline的元素被称为内连元素。
  相邻元素也是inline属性时，如果内容不够撑开整行。相邻元素的内容会显示在它傍边，当窗口整行不够显示时，内容会换行显示。

display: inline-block

行内块级元素





  
  
  
  css-test
  



  display属性为inline-block的元素被称为行内块级元素。
  行内块级元素的特性是独占一行，内容不会撑开整行

display: flex

弹性布局

css-test

class="content" 的元素会占用整行

子元素宽高由内容撑开

display: inline-flex

css-test

class="content" 的元素宽高由子元素撑开

子元素宽高由内容撑开

display: list-item

列表属性





  
  
  
  css-test
  



  display属性为list-item时元素会作为列表显示
  下班要买菜
  回家要做饭

display: inherit

继承父级元素的属性





  
  
  
  css-test
  



  
    正常的span元素效果，内容不会撑开整行
    继承父级属性的效果，父级的display属性值是block 继承后内容撑开整行

idc机房托管服务器托管 displays Display display:inline display属性

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

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

css之display

摘要：块级元素元素默认是块级元素默认也是块级元素块级元素的特点元素的内容会充满整行行内元素属性为的元素被称为内连元素。行内块级元素属性为的元素被称为行内块级元素。 display css定位属性Positioning display: none 不再页面渲染元素 css-test .content { display: none; ...

Rocture 2019-08-29 16:57 评论0 收藏0
读 Zepto 源码之样式操作

摘要：方法也在读源码之内部方法有过分析。不太明白为什么要用全局变量来接收，用局部变量不是更好点吗保存当前类的字符串，使用函数获得。这是的依然是全局变量，但是接收的是当前元素的当前样式类字符串为什么不用局部变量呢。这篇依然是跟 dom 相关的方法，侧重点是操作样式的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为...

snowell 2019-08-21 11:43 评论0 收藏0
CSS之各种居中

摘要：转自个人博客本博客讨论居中情况设定为总宽度不定内容宽度不定的情况。改变大小时，仍然居中。宽高改变时，不再是居中效果。配合优点居中元素不对其他元素产生影响。水平居中当父元素设置时，子元素为，默认为内容宽度。转自个人博客本博客讨论居中情况设定为总宽度不定,内容宽度不定的情况。（改变大小时，仍然居中）。特别说明：在元素设置position:absolute;来设置居中效果时，除去博客...

happyfish 2019-08-28 18:29 评论0 收藏0
CSS篇之水平导航

摘要：关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下，请实现水平导航。缺点，和方法一样，会出现空白间隙，解决方案如上，因为是行内元素，所以不能设置宽高，比较局限。关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题：一个最简单的html结构如下，请实现水平导航。 ...

李义 2019-08-29 11:19 评论0 收藏0
CSS 终极之战：Grid VS Flexbox

摘要：我们将使用检查器来检查列关键不同在于这种方式先定义了列即布局。这种方式迫使我们将分割成多少列。而使用则不会面临这种限制。我相信将会是时代，它会有一个突破，并成为前端开发者的必备技能。简评：近些年 CSS Flexbox在前端开发者中变得非常流行。其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSSGrid，它有许多弹性盒的能力，有时候比弹...

lindroid 2019-08-29 14:08 评论0 收藏0