html -- 块元素、内联元素、内联块元素 练习
html标签(也叫元素)大概可以统分为三大类,块元素、内联元素、内联块元素。
块元素
1,常用的块元素:ul、li、div、p、dl、dt、dd、h1~h6。
2,块元素支持所有的样式。
3,盒子独占据一行,即使设置了宽度。
4,如果没有设置宽度,默认宽度为父元素的100%。
内联元素
1,常用的内联元素:span、a、em、i、b、strong。
2,只支持部分样式,比如说,不支持宽、高、margin上下、padding上下。
3,盒子并在一行。
4,宽高由内容挣开。
5,如果代码换行,盒子之间会产生间距。
6,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。
解决第 4 点问题
1,取消代码间的换行,太麻烦了,不可取。
2,将这个内联元素的父元素的font-size值设为0,内联元素自身再设置font-size。
内敛块元素
1,支持所有的样式。
2,盒子并在一行。
3,代码换行,盒子会产生间距。
4,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。
从某种程度上可以说内联块元素结合了块元素和内联元素的优点,虽然现有元素没有归于此类别的,但是可以通过display属性来实现块元素、内联元素、内敛块元素的相互转化。
display属性
1,none 隐藏元素,且不占位置。
2,block 作为块元素显示。
3,inline 作为行内元素显示。
4,inline-block 作为行内块元素显示。
在实际开发中,块元素使用的较多,所以经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。还是要视情况而定。
实际练习中遇到的问题:
1,内联元素设置宽、高、margin、padding无效。
2,通过设置内联元素或者内联块元素的父元素的font-size为0,内联元素或内联块元素的font-size为字体大小,来解决代码换行带来的间距问题。
3,通过设置盒子的行高line-height和盒子高度height为一样的值,使得盒子内文字垂直居中。
4,ul、li、a等标签都有自己的属性,要根据需要调整。
练习代码:
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css练习一</title> <style> .con_page{ height: 40px; width: 600px; border: 1px solid rgb(128, 128, 125); text-align: center; list-style: none; padding: 0px; margin: 0px auto; font-size: 0px; } .con_page li{ margin: 7px 5px; display: inline-block; font-size: 12px; /* height: 26px; */ /* background-color: gold; */ } .con_page li a{ display: inline-block; height: 26px; padding: 0px 10px; line-height: 26px; background-color: gold; text-decoration: none; color: black; font-size: 12px; font-family: "microsoft yahei"; } .con_page a:hover{ background-color: red; color: white; } .menu{ list-style: none; margin: 50px auto 0px; height: 40px; width: 958px; border: 1px solid #666; padding: 0px; text-align: center; font-size: 0px; } .menu li{ display: inline-block; font-size: 14px; line-height: 40px; } .menu li a{ display: inline-block; height: 40px; line-height: 40px; font:normal 14px/40px 'microsoft yahei'; text-decoration: none; color: #000; } .menu li span{ display: inline-block; height: 40px; font:normal 14px/40px 'microsoft yahei'; margin: 0px 20px; } .menu li a:hover{ color: tomato; } .menu2{ list-style: none; margin: 50px auto 0px; height: 40px; width: 960px; border: 1px solid #666; padding: 0px; background-color: #55a8ea; position: relative; } .menu2 li{ width: 100px; height: 40px; /* text-align: center; */ float: left; } .menu2 li a{ display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; font-family: 'microsoft yahei'; text-decoration: none; color: #fff; } .menu2 li a:hover{ background-color: #00619f; } .menu2 .new{ width: 33px; height: 20px; background: url(./images/new.png) no-repeat; position: absolute; left: 334px; top: -8px; } </style> </head> <body> <ul class="con_page"> <li><a href="">上一页</a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li ><span>...</span></li> <li><a href="">17</a></li> <li><a href="">18</a></li> <li><a href="">19</a></li> <li><a href="">20</a></li> <li><a href="">下一页</a></li> </ul> <ul class="menu"> <li><a href="">首页</a></li> <li><span>|</span></li> <li><a href="">网站建设</a></li> <li><span>|</span></li> <li><a href="">程序开发</a></li> <li><span>|</span></li> <li><a href="">企业vi</a></li> <li><span>|</span></li> <li><a href="">案例展示</a></li> <li><span>|</span></li> <li><a href="">联系我们</a></li> <li><span>|</span></li> <li><a href="">网络营销</a></li> </ul> <ul class="menu2"> <li><a href="">首页</a></li> <li><a href="">网站建设</a></li> <li><a href="">程序开发</a></li> <li><a href="">企业vi</a></li> <li><a href="">案例展示</a></li> <li><a href="">联系我们</a></li> <li><a href="">网络营销</a></li> <li class="new"></li> </ul> </body> </html>
上一篇: channel的关闭的经典场景
下一篇: 设计模式--概述