开发者怎么修改display属性

咱们继续来上课，那么这节课呢，我们来看一下咱们的 dasplay 属性，那么咱们根据 css 的规范啊，那么每个网页元素都有一个什么 dasplay 属性，也就是每个标签都有一个 dasplay 属性，干嘛呢？用于确定该元素的类型啊， 每一个元素都有一个默认的贝斯普列值，比如 div 的，他的默认贝斯普列属性，为什么呢？为布拉克叫什么块元素啊？然而此判的呢？他的贝斯普列的默认值什么呢？叫阴烂干嘛呢？行内元素 啊，那么快，元数与行的元素呢，可以转换，也就是说 desperate 的属性值可以由我们干嘛呀，任意的来改变啊。那咱们来看一下 desperate 常用的常见的属性值有什么呢？音浪不唠嗑，音浪干不唠嗑，还有 taiboxio 的一级费用。是啊，弹性格费用，那么咱们来看啊，弹 弹性盒呢，在这里边我先不讲，因为我们获悉需要用弹性盒带布局一个页面，对吧，所以我用弹性盒布局页面的时候再来讲弹性盒啊。那么我们先看这个 音浪，然后不唠嗑。和音浪不唠嗑，先看这几个属性啊，好，找到我们的代码，然后我在这里边新建一个文件，叫做嘚瑟，很累。 ok， 然后这里边我们要讲 dnsplplay， 这次不累属性啊，大家应该记得啊，我在讲浮动的时候，我们上个大上眼科，在讲浮动的时候，我就说过，任何元素一旦浮动以后，这次不累将失效，对不对？哎，那咱们来看一下啊，比如在这块我来一个 div， 然后再来一个 spa， 大家知道 div 是什么标签？矿上元素吧， 哎，叫块状元素。什么叫块状元素？具有宽高属性，并且独占一行，非常霸气，没错吧？而这个 spa 标签呢？它叫什么？行内元素？怎么叫行内元素啊？没有宽高属性，这是他的缺点，对吧？啊， 好处什么呀？不会独占一行，哎，不会独占一行对于我们布局来说是不是就比较方便了？哎，那现在咱们来看，我给他们两个进行一个互换啊，比如这里边我写上这是块状元素，然后死盼这里边 行内元素， ok， 我们先来给他做一个样式的设置 style 标签，然后 div， spa 同样宽度我先都给他设置一个二百，高度我也给他设置 一个二百，然后 div 的背景颜色给他设置一个红的，然后 spa 的背景颜色给他设置一个 粉的吧。好，那现在咱们来看啊，当前在我页面的时候，哎，刷新一下过来， 哎，好了，你看块上元素有宽高行内元素没有，对吧？那现在我给他进行改变。怎么改变呢？我将 div desperate 给他设置。为什么呀？音了啊，这是干嘛？设置为行内元素？ 设置为行内元素，那现在咱们来看刷新，哎， diy 为什么没有矿高属性，并且不会独来一行呢？哎，那同样我能指定 diy， 我是不是也能指定使他呢？我将使他给他设置什么呀？设置为块状元素，那 对是普列为 b r o c k block。 好，那这个时候我们来看一眼，是不是这样走你，哎，看行内元素是不是有宽高属性了，哎，这就是什么块状跟行内的一个 互换啊，这就是块状跟行内一个互换。那么同样啊，我们光做到这种互换呢，并没有太多的作用，没错吧？哎，那比如我们在布局页面的时候，可能又会用很多的，这个叫什么？块状元素？ 那扩张元素，你看他的特点就是拉的一排了，那有没有一种方式就是可以让他并列显示呢，对吧？在我们学了浮动以后，那大家知道用浮动布局肯定更 方便，对不对？哎，那在这里边，如果我想使用 desperate 来做布局呢？我需要怎么做呢？你看好了， 贝斯普勒，我可以给他设置。为什么呢？音浪杠不唠嗑啊，什么意思？行内块元素。什么叫行内块元素呢？就是既有宽高属性，并且不会独占银行，哎，你看是不是就拉开了， 对吧？哎，矿高属性都有，然后，而且他还不会独占一行，是不是？你看这个死盼都上来一些了吧， 哎，这就是咱们这个音浪刚不唠的，但是在布局的时候呢，使用他的较少，为什么呢？因为这里面会涉及到一些图本混排啊，所以对于他的布局用的比较少，一般我们在布局的时候，在页面布局的时候还是用 这个浮动居多啊。这块我给大家也记一下，这叫设置元素为行内块元素，对吧？具有宽高属性，并 且不会读在一行，哎，这就是 desperate， 音浪不唠。那么同样，我如果不这么做，我还可以怎么办呢？我将这个每一个 div 啊看成一个。什么呢？看成一个表格单元格， 哎，表哥，单元格这么排列的，是不是？哎？一个单元格，两个单元格，三个单元格，四个单元格是不是这么排列的，哎，所以我们最开始啊，哎，就天猫最开始的时候就是用表格来做页面布局的， 那那个时候页面就很臃肿，大家应该咱们也学着表格的，大家知道用表格去写东西的话他的这个标签也很多。对 哎，所以我在这里面可以使用 desplay 叫做 table too。 给他干嘛？给他变成单元格形式啊，那这个时候咱们来看刷新，你看是不是也都是在一排呢？ 哎，给他干嘛视为单元格来处理啊。好，咱们来看一下英兰北 log 不音浪是指定对象为内联元素 blog 呢？指定对象为块状元素英兰 blog 指定对象，为什么呀？内联呢？块元素啊，黑帮侧的指定对象作为什么表格单元格 啊？好，这几个作为一个了解就行了把前三个啊，三二三四一定要记住。六我们后期再讲啊。那咱来看最后一个，那隐藏对象对吧。那怎么隐藏对象呢？来看好了啊， 我把多余的 div 就是这样，我只留一个 div， 然后呢，我现在也不需要让他 变化了，我直接这样还原看到了吧，然后这个时候注意我可以干嘛呢？使用一个 aceplate 属性给他做一个隐藏处理。 non 哎，那咱们来看啊，走你， 你看元素是不是就没有了？哎，而且他还占据原有的物理位置吗？是不是也不占据，没错吧。哎，那好，这是一种方式，可以干嘛？隐藏元素啊，隐藏元素， 隐藏 元素。隐藏隐藏元素有一个什么好处？各位 咱们看咱们网站啊，你看鼠标放上去这个元素显示，那不放出元素是不是就隐藏了？包括这个也一样，放上去显示不放上去是不是就隐藏的？哎，那当我们学完这个属性是不是做这样的效果就出来了？哎，那好，那反过来， 对啊，哎，干嘛？那么这是一种隐藏方式，那我们还可以用另外一种隐藏方式，叫什么呢？叫做威斯贝利黑啊，等于他也可以让元素隐藏 啊，咱们来看一下啊，两种隐藏方式，哎，刷新保存一下，我们返回浏览器找到这个刷新好了，现在是默认样子还原回来了， 对吧？然后呢，我们把这次贝列腿这个，呃，威斯贝列腿这个开起来，让他再就一次隐藏，你看这个时候隐藏 diy 隐藏掉了，但是他的原有物理位置是不是还占据着呢，对吧？ 哎，行的，元素并没有什么，并没有上上去，是吧？那同样我设置完隐藏以后，我需要让他显示的话，怎么来显示呢？ 如果我是用这种方式来隐藏元素的啊，叫做 隐藏元素啊，占据原有物理位置，对吧？如果要用这种方式来隐藏的话，我就需要用什么？用 vc， 哎，我们直接做个效果得了，哎，不行，直接这么写吧， a 等于这个叫 vsb 啊， vsb 干嘛显示？ 如果啊，元素是使用 vsb 类可以设置 设置的隐藏方式，那么还只能啊用威斯， 这就等于什么呀？等于 vcbe 的方式的方式来让元素显示， 哎，那 ok， 我们来刷新，是不是又显示了，对吧？当然啊，我们一般用的时候不是这么用的，而是干嘛呀，而是给他一个效果。什么效果？比如说我鼠标移动上来的时候显示，对吧？ 把鼠标挪走的时候隐藏，就像刚才这种效果，是不是移动上来显示挪走隐藏啊，哎，那么我们学完这个东西以后是不是就能做出这样的效果了？但是呢，一样，那如果说我要是用 dc bo 来隐藏的话，我能用它来显示吗？咱们来看看啊，我把它注射掉，把 dc bo 的开起来，那你看 可不可以来刷新，注意我元素是不是依然隐藏掉了？哎，那也就是说如果我使用 dc 的来隐藏元素，我用它行吗？不行对吧？我需要用什么呢？戴一丝 困类，比如说我给它变成块状的 block 啊，再来刷新，看到了吗？哎，这就是咱们隐藏元素这两种方式啊，来，我给大家记一下啊，我就 就直接就到这里来了，叫做 v 设置元素，是否显示取之那一个 vis bill， 这个是显示对吧？然后还有一个 hidd headline， 就是隐藏啊，那么要注意的是什么呢？ vis baylet 和 dnspladasplay 冒号 noae 的区别，什么区别啊？ 这个威斯贝雷特的隐藏方式，隐藏方式是仅隐藏了内容的显示，内容的显示，对吧？其占据或者占用 的空间依旧怎么样占用吧，而这个 dasplay 呢？而 dnsplaydasplay？ 孟浩， none 啊，他的隐藏方式是什么样？彻底隐藏该元素的内容和 位置，对吧？也就是说使用这个，呃， desperate nye 这种方式是什么样的？是不是连物理位置都没有，都隐藏掉了？哎，这就是咱们隐藏严肃的两种方式啊。来，咱们看一眼 visit belateit 和这个将会隐藏元素，但是物理空间实际存在，这个是什么意思呢？这个是来设置他的透明度的啊，设置他们的透明度的，那咱们来看一下，咱们就用这 这个属性来试一下。哎，我把它注射掉，这个也注射掉啊，叫做 设置元素透明度。好了，那一样 opacity， 比如说我设置一的时候，这个时候什么都没有变，看到了吗？还是正常显示？如果我给他设置，比如零点三 走，你看是不是有透明了？哎，那同样道理，设置为零，不全透明，全透明是不是原有的物理位置肯定还占据呢？这块是还有元素，只是给他设置透明度，设置为零了吧？哎，这就是咱们 设置这个透明度的属性啊。好了，那这就是咱们 daisypro 类属性，那这个属性讲完以后， 我们在我们布局页面上是不是又增加了一些功能了？那我们还差最后一个，就可以真真正正的动手布局我们的内容。什么呀？盒子模型啊？好，那咱们本节课就上到这里，关注咱们下节课的视频盒子模型。

好，同志们，说完了，这个块状与行内还有什么字画元素？说完这个之后呢，那现在我们应该有一个好奇呀，那么这个 div 他为什么是一个块状元素呢？这个 spana 标签为啥又是行内元素呢？对不对？ 怎么搞的呢？这样，那我们知道我们这个 htm 里边所有的元素啊，所有的元素是不是都是由我们的这个什么那个，那个属性是不是一些相对应的属性控制的呀？例如宽度，高度，可以控制他占地面积，颜色，那就控制颜色嘛。好，那么这里 块状元素行的元素呢，他们也是有一个属性来控制的，这个属性呢，叫做 display 啊，这个属性叫做 dissplay 啊，同志们，大家看一下，那么针对于这个 dissplay 属性来说的话啊，我们要了解一下了啊， 好，这里边啊，我们把这个这个 c 杯复制一份啊，复制一份。好，这边先给他关掉。嗯，这个重新名一下，第一次 play， 不信，好 好看啊。针对于这个 display 属性，在这里边，我们先把刚才写这个巴特干掉，不要了啊，上面这堆也干掉。好，不要了，这一块也干掉。好，这个 span 呢，我们给他抽出来啊，从外边来， 好，小一点来，这就完了啊。嗯，好，写完这个之后来，现在我们先看下这个样式， 现在注意啊，现在注意。哎，这里边啊，劈叉啊，没写像素好，这一块啊，来刷新 一下，现在发现啊，上面这个是 div， 后面这个是 spa， 对吧？ div 是按照块状模式显示的，那么大家注意啊，我说了，块状元素独占银行，你记好啊，你宽高射程三百，问你现在后边能放东西吗？ 能不能，不能啊，现在后面还是一样不能放东西的啊，但是我们后期会学到一些布局样式，可以让他变得能放东西啊，能放东西好，这一点，那么接着往下说啊，接着往下说， 在这里边大家看一下， div 和 spa 两个，一个是块状元素，一个是行内元素。好，这里边他为什么是块状？行内由谁决定的？就由我们这个 desplay 属性 好， disco 的属性，它的含义什么呢？就是显示，展示的意思啊，显示，展示，那么它这里边呢，有几个词？ 对啊，我们只说几个常用的，一个 block 好，一个叫音烂，一个叫音烂，音杠 blog， 还有一个难，还有个难好，这个不唠嗑叫什么呢？元素 以啊，元素以块状显示。好，音浪音，就是元素以行内显示，音浪不唠嗑，这个是元素以行内 块状显示啊，行内块状好，这个问题啊，你发现这个问题跟我们的什么呀？置换元素很类似啊。好，接着难，难就是啥好元素不显示啊，不显示就是难。所以这里边啊，我们常用的有这么几个值，但是 dispr 的属性不仅有这么几个啊， 在我们官方文档里边，他还有好多个值啊，还有别的，还有，应该还有。呃，十几个属性差不多很多啊，但那些一般基本上不用啊，基本上不用。这里呢，我们就把这些常见的给大家说一下，好像第一个不唠嗑，以块状显色，我跟大家说啊，为什么 div， 或者说 h 标签，或者说 p 标签，或者说表格，他们能够称之为块状元素呢？其实很明显就是因为他们 里边有一个默认的 display 属性啊，就是说现在啊，实际上在这个呃， div 里边已经有一个这个 display block 属性了，不过呢，这个属性他不是我们写的，而是什么呀，而是这个底层自动添加的啊， 自动添加的一个，所以这点大家希望理解啊，所以说就是我们讲过的这些很多标签，基本上啊，这些一套元素吧， 一些属性，每一个标签都有这么一堆属性，那每一个呢，都是一些默认值啊，都是一些默认值，那么现在呢，我们如果想调的话，可以把这个低图类打卡变成一赖， 好，只需要调整一个这个，然后你就发现啊，看这里啊，刷新，哎，你发现这个 div， 你看跟这个，他们就可以在一行之内显示了啊，就可以在一行之内显示了，好，那么同理啊，你把这个 spa 里边给我加一个，谁呢啊？第一次 play 好啊， block 不唠嗑，那么你就把这个死判死败元素变成了什么呀？块状元素，哎，大家发现这个 spa 现在就是以这个块状就显示了啊，所以这个地方主要就是什么呢？行内块状以及我们这个 dis play 属性啊， ds pro 这两个，这两个啊，用来切换行内块状的，那么接着这个一按，不唠 blog 银兰 block 叫什么？叫叫行内块装啊？行内块装，大家看都加一个，这边呢，我们写一个音量以杠 b l o c k 好， b b l o c k 这边呢，我们也加一个，一栏一杠布拉克啊，一栏一杠布拉克好，加完之后整体来看啊，你看刷新页面， 哎，大家发现啊，此时这两个元素是不是都可以设置宽高了呀，并且呢，也能在一行排列了，好，那么这边这个伊兰布拉克实际上就是啥呀？就是我们的置换元素好，所以看好了，伊兰布拉克 就是可以在一行内排列好，又可以设置框高啊，这就一辆布拉克，可以在一行内排列，又可以设置框高啊，又可以设置框高，好，一辆布拉克，那么同理，难撒难，就是 元素不显示，那这个呢？你就随便一测就行了，你看这个 spa 啊，我来一个 nv， 好，来来，刷新页面没了，等你打开这个 f 十二啊，看控制台，在这个里边，大家发现啊，这边这个 spa， 那你看 代码里面有，但是呢，他不显示啊，他不显示，你如果说是在这个火壶里边打开的话，嗯，不是这个好，如果你在火壶里面打开 看这个元素里面，你发现这个 spa 是一个灰色的啊，是一个灰色的 div， 这个地方是有颜色的， spa 是灰色的，就是不显示啊，不显示。那么同理啊，你把它变成什么样，你把它变成那个 block， 他就又会显示了啊，又会显示了啊，好， 所以这些是我们给大家说的这个 display 属性啊， display 属性可以用来帮助我们调整这个元素的这个状态啊，到底是行内还是靠装啊？

屁屁。