广西城乡和住房建设厅网站,网站推广最有效的方法,国外网站建设软件有哪些,不是用于制作网页的软件CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
display: 隐藏某个元素时#xff0c;不会占用任何空间。换句话讲#xff0c;不会影响布局。visibility: 隐藏某个元素时#xff0c;仍需占用与未隐藏之前一样的空间。换句话讲#xff0c;…CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
display: 隐藏某个元素时不会占用任何空间。换句话讲不会影响布局。visibility: 隐藏某个元素时仍需占用与未隐藏之前一样的空间。换句话讲会影响布局。
display 属性
属性值描述none此元素不会被显示。
当将一个元素的 CSS 属性 display 设置为 none 时该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。
在 HTML 页面中定义两个 div 标签并设置 CSS 样式具体代码如下:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}/style/headbodydiv idd1/divdiv idd2/div/body
/html当为第一个 div 标签设置 display 属性值为 none 时该 div 标签会被隐藏。
属性值描述block此元素将显示为块级元素。
该值主要作用于内联元素。如果将内联元素的 CSS 属性 display 设置为 block 时该内联元素将在浏览器中显示成块级元素效果。
在 HTML 页面中定义两个 div 标签并设置 CSS 样式具体代码如下:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#s1 {width: 300px;height: 300px;background-color: lightskyblue;}#s2 {width: 300px;height: 300px;background-color: green;}/style/headbodyspan ids1这是一个span/spanspan ids2这是一个span/span/body
/html当为第一个 span 标签设置 display 属性值为 block 时该 span 标签会呈现块级元素效果。
属性值描述inline默认值此元素会被显示为内联元素。
该值主要作用于块级元素。如果将内联元素的 CSS 属性 display 设置为 inline 时该内联元素将在浏览器中显示成内联元素效果。
在 HTML 页面中定义两个 div 标签并设置 CSS 样式具体代码如下:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}/style/headbodydiv idd1这是一个div/divdiv idd2这是一个div/div/body
/html当为第一个 div 标签设置 display 属性值为 inline 时该 div 标签会呈现内联元素样式。
属性值描述inline-block行内块元素。
当将 CSS 属性 display 设置为 inline-block 时该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果元素之间呈现内联元素效果。
在 HTML 页面中定义两个 div 标签并设置 CSS 样式具体代码如下:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}/style/headbodydiv idd1这是一个div/divdiv idd2这是一个div/div/body
/html分别为两个 div 标签设置 display 属性值为 inline-block 时这两个 div 会显示在一行中。
visibility 属性
visibility 属性指定一个元素是否是可见的。 值得注意的是: visibility 属性设置元素不可见的元素但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。 属性值描述visible默认值元素是可见的。hidden元素是不可见的。
在 HTML 页面中定义两个 div 标签并设置 CSS 样式具体代码如下:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}/style/headbodydiv idd1这是一个div/divdiv idd2这是一个div/div/body
/html当为第一个 div 标签设置 visibility 属性值为 hidden 时该 div 会被隐藏。
