java中display中的属性_全⾯解析display属性
⼤家都知道display可以转换元素类型，但是⼤多⼈其实对于display的属性值，⽐较熟悉的只是block和inline以及inline-block和none，对于其他属性值，了解都⽐较⼀般，在平时开发过程中也不太⽤得到其他的属性值，但是每次⽤这个属性的时候，脑海⾥都会冒出来，其他的属性值，设置了会是怎么样、有什么样的特点，这个奇奇怪怪的想法，所以了个时间，写下这篇⽂章， 跟我有相同可爱想法的伙伴，如果感兴趣的，可以驻步瞄⼀眼哟；
⼀、css规定，元素类型有两⼤类，⼀类是块状元素，⼀类是⾏内元素，⾸先了解⼀下两种元素类型的特征：块状元素特征：
块状元素可以正确解释盒模型的属性width,height,padding,margin,border
块状元素前后带有换⾏符，所以⾃占⼀⾏，在垂直⽅向⼀个接⼀个的放置；
块状元素⼀般作为容器、盒⼦使⽤；
块状元素默认情况下，宽度与⽗元素同宽，⾼度根据内容⽽定，没有内容，⾼度为0；
⾏内(内联)元素特征：
⾏内元素不能正确解释盒模型的属性，width、height执⾏⽆效，padding、border、margin解释时，左右解释没有问题，上下解释不正确；
⾏内元素在⼀⾏内从左往右依次排列；
⾏内元素默认情况下，宽度和⾼度都根据内容⽽定；
⼆、元素类型的转换
display属性：规定元素应该⽣成的框的类型(改变元素的类型，使⽤display属性)。
ps：以下就是每个属性的详解了，啦啦啦啦啦啦啦；
属性值详解：
1、none：此元素不会被显⽰；
(1) none此单词的意思是没有⼀个、毫⽆的意思；所以当display的属性值设置为none的时候，表⽰的是没有框类型，没有框类型的元素，是⽆法在浏览器中显⽰的，就实现隐藏元素的作⽤了；
⽰例如下：
html结构：
我是p，测试div消失后，会不会占据浏览器空间
css样式：
div{
width:100px;
height:100px;
background:violet;
/*设置div的属性值为none，观察div是否会隐藏不可见*/
display: none;
}
p{
background:yellowgreen
}
以上代码效果可以看出，div设置none之后，实现了完全消失并且不占据浏览器的空间效果；
(2)有很多标签，display的属性值默认是none，⽐如 head meta style link等等；
(3)项⽬应⽤中，做⼆级导航效果或者⿏标悬停效果动态时，会经常⽤到这个属性值，下次我们写⼀个好玩的⼆级效果再来展⽰这个属性值的作⽤；
2、block：此元素将显⽰为块级元素，此元素前后会带有换⾏符。
⽰例如下：
html结构： 我原本是⾏内元素
css样式：
em{
width:100px;
height:100px;
background:tomato;
/*em本来是⾏内元素元素，现在使⽤display属性转换为块状元素 */
display: block;
}
3、inline 默认。此元素会被显⽰为内联元素，元素前后没有换⾏符。
⽰例如下：
html结构：
我原本是块状元素
⽤来测试的⾏内元素span
css样式：
div{
width:80px;
height:80px;
background:coral;
/*div标签本来是块状元素，现在使⽤display属性转换为⾏内元素；*/
display: inline;
}
span{
background:cornflowerblue
}
4、inline-block ⾏内块元素(CSS2.1 新增的值)
说明：⾏内块元素既具备⾏内元素的特性也具备块状元素的特性，具备⾏内元素前后没有换⾏符可以在⼀⾏内并列显⽰的特性，具备块状元素可以正确解释盒模型属性的特性。
⽰例如下：
div块状元素，span⾏内元素，使⽤此属性值转换为⾏内块元素；
html结构：
我原本是块状元素
我原本是⾏内元素
css样式：
div,span{
/*div块状元素，span⾏内元素，使⽤此属性值转换为⾏内块元素；*/
display: inline-block;
}
div{
width:100px;
height:100px;
background:tomato;
}
span{
width:100px;
height:100px;
background:turquoise;
}
5、list-item 此元素会作为列表显⽰。
(1) 此属性值表⽰将元素显⽰为列表项标签，li标签默认的display的属性值是list-item，display的属性值为list-item的标签也属于块状元素；
⽰例如下：
(2) li标签作为列表项标签，前⾯会有列表项标记，下⾯给div标签设置为list-item，div也会有列表项标记
html结构：
div0
li1
li2
li3
css样式：
ul{
background:tomato
}
ul li{
border:1px solid turquoise
}
div{
/*给div标签设置为list-item*/
display: list-item;
}
6、run-in 此元素会根据上下⽂作为块级元素或内联元素显⽰。
(1) ⽬前很少有浏览器⽀持run-in这个属性值，并且在开发过程中⽤不到这个属性值，不予过多的研究；
7、table 此元素会作为块级表格来显⽰(类似 )，表格前后带有换⾏符。
(1)table标签默认的元素类型是table，显⽰为块级表格，可以设置⼤⼩并且单独占据⼀⾏；(2)当table标签的元素类型是table时，并且设置宽度和⾼度之后，后代td标签的宽度和⾼度，默认是由table根据内容的多少去分配的；
(3) table属于块状元素，但是对⽐别的块状元素，有⾃⼰的特点， table会单独占据⼀⾏，但是在没有设置width的情况下，不会与⽗元素同宽，⽽是根据内容⽽定；
html结构：
1
2
3
1
2
3
1
2
css表格样式3
我是⾏内元素span
css样式：
table{
border:2px solid red;
}
table td{
border:1px solid chocolate;
background:darkcyan
}
span{
background:cornflowerblue
}
(3)其他标签设置display的属性值为table，也不会具有表格的特性；
html结构：
1
2
3
1
2
3
1
2
3
css样式：
div{
height:300px;
width:300px;
border:2px solid red;
/*将div设置为表格类型*/
display: table;
}
div td{
border:1px solid chocolate;
background:darkcyan
}
span{
background:cornflowerblue
}
8、inline-table 此元素会作为内联表格来显⽰(类似 )，表格前后没有换⾏符。
(1)将table显⽰为⾏内表格，具有⾏内块元素的特征，可以和别的⾏内元素从左往右显⽰也可以设置宽度和⾼度；html结构：
1
2
3
1
2

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。