CSS中display:block是什么意思?

html-css014

CSS中display:block是什么意思?,第1张

CSS中display:block意思如下:

如果用<div>+<a>做一个按钮,这个能理解吧,就是想通过link来实现跳转,但是看起来是个按钮,且不需要触发事件。而且css也比button的好用。

这中情况下,如果不是“块”block,那么只要点到文字上时才会触发,点到按钮<div>但是没点到字是不行的,但是用了block后,整个按钮都可以承载a的link操作了

css中的display是设置元素显示的方式,block是一块状元素的方式显示,

inline是以内联元素的方式显示,none是不不显示;

块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行那里去,inline则不会这样。

Display:block是我们常用的,block也是Display默认的值。

解释:该对象随后的内容自动换行。

Display:inline,我们常常在li中使用它。功能是让li排成一排(称:删除行)。

接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。

Css代码

ul.divcss5 li{display:inline}

解释:ul.divcss5对应li css样式属性为display:inline

Html对应代码:

结果图:

说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式。

拓展:

CSS颜色值的写法

CSS[1]在描述颜色的时候,除了使用英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000}

为了节约字节,我们可以使用 CSS 的缩写形式: p { color: #f00}。

我们还可以通过两种方法使用 RGB 值:p { color: rgb(255,0,0)} p { color: rgb(100%,0%,0%)}。