HTM基础(九)
div:人们常说的布局说的就是HTML+div,div一个毫无语意的块级元素,拥有会计的几个特点,自动换行。div本身并不难说,但它牵扯的都系却很广,就应为它的普适性。
div有一个横重要的概念叫做盒子模型,一个盒子:它有边界,在里面装着内容,内容和边界之间存在着padding(内边界),然后边界与其他边界之间存在着margin(外边界),一个元素在浏览器中的大小由这些元素构成:
width=border-width*2+border-left+border-right+width+marigin*2;height计算方法相等。从这个公式一目了然关于元素在文档中的排版。除此之外元素定位position,和是否隐藏影响着页面元素的呈现。
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>新闻图片链接</title> <style> *{ padding:0; margin:0; } img{ width:105px; height:90; } span{ color:#fff; background-color:rgba(0,0,0,.6); font-size:12px; width:105px; height:20px; line-height:20px; position:absolute; top:60px; left:0; } span:hover{ color:red; } i{ display:inline-block; width:27px; height:27px; position:absolute; top:33px; left:1px; } .na{ background:url("img/play.png") } </style> </head> <body> <div class="pica"> <a href="http://www.sina.com" class="ac"> <img class="texta" src="img/bc.png" /> <i class="na"></i> <span>金正恩会见王毅</span> </a> </div> </body> </html>