概要 很多细小的页面控制,比如nav导航,tab,菜单等等,都是使用行内元素、块状元素以及通过border,background,padding,margin的设定打一套组合拳来实现效果。这些细节对于开发者如果能数量掌握,这个页面效果就不成问题。 本文主要针对最常用display属性block, inline和inline-block的控制进行详细解释,以便于大家能有更全面的...
background-color: white; } li { display:inline; }链接列表水平显示:HTMLCSSJavaScriptXML 未加display:inline样式的结果: display:inline样式的结果: li{display:inline;width:300px;height:300px;} inline样式修饰的元素,无法设置宽高 inline元素特点: 元素都在一行上 元素的高度、宽度、...
background-color:aquamarine;display:inline-block;行内元素转换为行内块元素后，上面的width和height起作...
background-color: green; height: 50px; width: 40%; padding: 20px; margin: 20px;} span{ background-color: gray; height: 70px; padding: 40px; margin: 20px; float:left; width:200px;} strong{ background-color: blue; height: 70px; padding: 40px; margin: 20px;} <!--块级元素...
div{ display:block;/*默认*/ width:800px; height:200px; background-color:#9ff; /*display:inline;/*把块级元素设置为行内元素*/ } span{ /*display:inline;/*默认*/ /*display:block;/*把块级元素设置为块元素*/ /*行内元素设置宽高无效*...
p{ background-color: red; height: 500px; width: 30%; padding: 20px; margin: 20px; float: left;} div{ background-color: green; height: 50px; width: 40%; padding: 20px; margin: 20px;} span{ background-color: gray; height: 70px; padding: 40...
background-color: red; } .item2{ display: inline-block; background-color: pink; }item1item2 如图所示,inline-block碰到同类时,行高也会一起使用。其他的padding-top和margin-top甚至都会一起使用 3.inline和inline-block会引起间距的空格 .span1{background-color:pink...
行内元素自身并没有行高这个属性,虽然设置可以设置行高,但是最终作用的地方并不是自身,而是其自身所在的行框盒子上!如果你不知道什么是行框盒子,建议你好好读读张大佬的《css世界》,这里我简单的画一画 如上如所示,我的结论是: 内联盒子没有行高这一属性,给它设置line-height,最终是作用在行框盒子上,而行框盒...
1. sss 1. 而span元素默认display属性为inline,只占据span中所占字数的宽度。 1. 测试测试 1. 1. 测试测试 1. inline-block 1. sfffs 2. 3. sfffs 1. 2. 3. inline-block 与 inline 的区别 默认情况下 inline-
测试 p{ background-color: red; height: 500px; width: 30%; padding: 20px; margin: 20px; float: left;} div{ background-color: green; height: 50px; width: 40%; padding: 20px; margin: 20px;} span{ background-color: gray; height: 70px; padding: 40px; margin: 20px; float...