HTML基础（九）

最新推荐文章于 2023-07-28 17:44:43 发布

斯人已远，尤赖余温

最新推荐文章于 2023-07-28 17:44:43 发布

阅读量98

点赞数

分类专栏： HTML基础文章标签： HTML

本文链接：https://blog.csdn.net/qq_20901663/article/details/80201338

版权

HTML基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>

2021年1月20日12:48:31#

#修改分割线测试