1. 首页
  2. IT资讯

「早读课」如何理解Display:None,Block,Inline,Inline-Block

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Ffb88c91bcbb24c31b5bc213b59ee7a49″ img_width=”900″ img_height=”600″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天的早读课,笔者将介绍Display的相关属性,主要涉及的内容包含:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Edisplay: none vs. visibility: hiddenu003Cu002Fliu003Eu003Cliu003Edisplay: blocku003Cu002Fliu003Eu003Cliu003Edisplay: inlineu003Cu002Fliu003Eu003Cliu003Edisplay: inline-blocku003Cu002Fliu003Eu003Cu002Fulu003Eu003Ch1u003Eu003Cstrongu003EDisplay: None vs. Visibility: Hiddenu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E如下段代码所示,我们有三个红、蓝、绿的方块,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003E#box-1 {u003Cbru003E width: 100px;u003Cbru003E height: 100px;u003Cbru003E background: red;u003Cbru003E}u003Cbru003E#box-2 {u003Cbru003E width: 100px;u003Cbru003E height: 100px;u003Cbru003E background: blue;u003Cbru003E}u003Cbru003E#box-3 {u003Cbru003E width: 100px;u003Cbru003E height: 100px;u003Cbru003E background: green;u003Cbru003E}u003Cbru003Ediv {u003Cbru003E display: inline-block;u003Cbru003E}u003Cbru003Ebody {u003Cbru003E background: #efefef;u003Cbru003E}u003Cbru003E<div id=”box-1″><u002Fdiv>u003Cbru003E<div id=”box-2″><u002Fdiv>u003Cbru003E<div id=”box-3″><u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F4d1edce3ddb44ca19f85f139871ee53a” img_width=”646″ img_height=”228″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E首先我们先使用 u003Cstrongu003Edisplay: noneu003Cu002Fstrongu003E 属性隐藏蓝色的方块,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003E#box-2 {u003Cbru003E display: none;u003Cbru003E width: 100px;u003Cbru003E height: 100px;u003Cbru003E background: blue;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F0396371a28d14c43b6daf8a350c9d99c” img_width=”220″ img_height=”111″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如上图所示,使用u003Cstrongu003EDisplay: Noneu003Cu002Fstrongu003E,我们可以看出蓝色方块从中“u003Cstrongu003E删除”u003Cu002Fstrongu003E,中间的空位也被绿色的方块补位。u003Cu002Fpu003Eu003Cpu003E接着我们使用 u003Cstrongu003Evisibility: hiddenu003Cu002Fstrongu003E 属性隐藏蓝色方块,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003E#box-2 {u003Cbru003E width: 100px;u003Cbru003E height: 100px;u003Cbru003E background: blue;u003Cbru003E visibility: hidden;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fda8950044fcc4e268e49d732600fc017″ img_width=”324″ img_height=”115″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上图我们看出,使用u003Cstrongu003EVisibility: Hiddenu003Cu002Fstrongu003E,我们实现了蓝色方块的“u003Cstrongu003E隐藏”u003Cu002Fstrongu003E,中间的位置空缺保留。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EBlock vs. Inlineu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003EBlock块级元素u003Cu002Fstrongu003E默认填满父级元素内容区域,旁边不能有其他元素,最常见的块级元素就是<div>,<p>,<ul> 等。u003Cu002Fpu003Eu003Cpu003EIu003Cstrongu003Enline行内元素u003Cu002Fstrongu003E在一行文本内生成元素框,不打断所在的行。最常见的行内元素比如:<span>,<img>,<a>。首先我们下段没有CSS的Html代码:u003Cu002Fpu003Eu003Cpreu003E<body>u003Cbru003E <p>I’m a paragraph<u002Fp>u003Cbru003E <p>I’m a paragraph too<u002Fp>u003Cbru003E <span>I’m a word<u002Fspan>u003Cbru003E <span>I’m a word too.<u002Fspan>u003Cbru003E<u002Fbody>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F42ee55710ecf47d482c7a4356423b814″ img_width=”590″ img_height=”150″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上图我们看出:u003Cu002Fpu003Eu003Cpu003E两个<p>元素占了两行,两个<span>元素占了一行,由此可见每个Html元素都有个默认的display属性:block或inline。u003Cu002Fpu003Eu003Cpu003E以下是关于 Block 和 Inline 差异的总结:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EBlocku003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Culu003Eu003Cliu003E默认100%占满父元素区域u003Cu002Fliu003Eu003Cliu003E每个元素占一行u003Cu002Fliu003Eu003Cliu003E可以设置width和height属性u003Cu002Fliu003Eu003Cliu003E可以包含其他块级元素或行内元素。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E如下代码示意:u003Cu002Fpu003Eu003Cpreu003Ep {u003Cbru003E height: 100px;u003Cbru003E width: 100px;u003Cbru003E background: red;u003Cbru003E color: white;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E从中我们可以看出设置了元素的宽和高,每个红色方块会独占一行,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3be3fb5b5ab24221b0bb582d4843087c” img_width=”300″ img_height=”362″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Einlineu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Culu003Eu003Cliu003E按需占用空间u003Cu002Fliu003Eu003Cliu003E不断行,并排显示u003Cu002Fliu003Eu003Cliu003Ewidth,height,top-bottom margin 等属性不起作用u003Cu002Fliu003Eu003Cliu003E可以是其他行内元素的父级。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E如下段代码所示,我们更改<p>标签display的默认属性,让其成为行内元素:u003Cu002Fpu003Eu003Cpreu003Ep {u003Cbru003E height: 100px;u003Cbru003E width: 100px;u003Cbru003E background: red;u003Cbru003E color: white;u003Cbru003E display: inline;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc258f79fb720474b8c2194c3b0c0aacb” img_width=”392″ img_height=”31″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上图所示,我们看出,<p>元素变成了行内元素,我们设置的宽和高并不起效,三个<P>元素排成一行。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EDisplay: Inline-blocku003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E某些情况下,行内元素和块级元素并不能满足我们的设计需求,因此有了Inline-block这个属性,从属性的名字,我们就可以分析出其综合了两者的一些特征。u003Cu002Fpu003Eu003Cpu003E我们可以这样理解,这个属性是个行内属性,可以设置width和height或者我们可以理解成一个块级元素,不用换行。u003Cu002Fpu003Eu003Cpu003E为了理解这个属性,我们还是从一段代码开始,如下所示:u003Cu002Fpu003Eu003Cpreu003Ep {u003Cbru003E display: inline-block;u003Cbru003E height: 100px;u003Cbru003E width: 100px;u003Cbru003E background: red;u003Cbru003E color: white;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F65055392649341019598c5bc17b92e97″ img_width=”732″ img_height=”122″ alt=”「早读课」如何理解Display:None,Block,Inline,Inline-Block” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上面的效果图,我们可以看出,使用此属性后,我们让行内元素具备了宽高属性。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的早读课就到这里,希望通过本篇文章,你明白了display的这些属性。u003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注“u003Cstrongu003E前端达人u003Cu002Fstrongu003E”公众号!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「早读课」如何理解Display:None,Block,Inline,Inline-Block

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10798.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code