HTML-6-盒子模型，伪类选择器，定位

最新推荐文章于 2024-11-14 20:10:00 发布

只爱故事不爱酒的秃头少女

最新推荐文章于 2024-11-14 20:10:00 发布

阅读量141

点赞数

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/Liuhxhhhhh/article/details/106694014

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<html lang="en,zh"> 
<head>
	<meta charset="utf-8">
	<title>test6</title>
	<link rel="stylesheet" type="text/css" href="test6.css">
</head>
<body>
	<!-- body自身就带有margin 8px -->
	<div>新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。</div>
	<br><br>

	<del>原价50元</del>
	<span>原价50元</span><br>


	<a href="www.baidu.com">www.baidu.com</a><br>
	<span class="spanclass">www.baidu.com</span><br><br><br>

	<p>www.taobao.com</p><br><br>

	<h3>www.baidu.com</h3>
	<h3>www.taobao.com</h3>
	<h3>www.jd.com</h3>
	<img src="wjk.jpg"><img src="wjk.jpg"><img src="wjk.jpg"><img src="wjk.jpg">


<!-- 
	1.行级元素,内联  inline
	   feature：内容决定元素所占位置
	            不可以通过css改变宽高
       span strong em a del

	2.块级元素  block
	   feature：可以独占一行
	   可以通过css改变宽高
	   div p ul li ol form address

	3.行级块元素  inline-block
	   feature：内容决定大小
	            可以改变宽高
	    image

	 这几种元素可以通过设置display来改变他们的属性
	 带有inline 的元素都有文字特性
 -->

 <!-- 
 	先定义功能，再写html 	
  	可以自定义标签，改变标签的属性（初始化标签）
  	通配符标签：可以初始化所有的标签
   -->

   <!-- 
       盒子模型：
       1.margin
       2.border
       3.padding
       4.content = width + height


       盒子的三大部分：
       1.盒子壁  border
       2.内边距  padding
       3.盒子内容  width + height
    -->
    <br><br><br>
    <div class="wrap">
    	<div class="content"></div>
    </div>
<br><br><br>
    <div class="text1"></div>

    <div class="absolute"></div>
    <div class="absolute1"></div>

    <div class="relative">  	
    </div>
    <br><br>

    <div class="first">
    	<div class="second">
    		<div class="third"></div>
    	</div>
    </div>
   
</body>
</html>

div{
	border:1px solid black;

	text-align:left; /*设置文本的对齐方式,默认left，举重center，右对齐right*/
	height: 100px;
	line-height: 20px; /*单行文本所占高度，相当于word中的单倍行距，多倍行距*/
    /*设置单行文本垂直居中，就设置文本所占高度等于容器高度*/
    text-indent:5em;/*首行缩进,单位是em*/

    /*
    单位：
    px 像素，相对单位
    1em = 1 font-size 
    */
    
    }
span{
	text-decoration: none;/*文本装饰*/
	/*line-through中划线，效果与标签<del>一样*/
}
.spanclass{
	text-decoration: underline; /*下划线*/
	color:blue;
	cursor:copy; /*光标定位值*/
}



p{
	color: blue;
	text-decoration: underline;
}

/*伪类选择器之一*/
p:hover{
	background-color: orange;
	/*当鼠标移动到上面时有颜色*/
}

h3{
	color: blue;
	text-decoration: underline;
}
h3:hover{
	text-decoration: none;
	background-color: f40;
	color: #fff;
	font-size: 16px;
	font-weight: : solid;
	font-family: arial;
	border-radius: 16px;

}

img{
	width: 200px;

}
.wrap{
	height: 100px;
	width:100px;
	border:10px solid green;
	
	padding: 100px 100px 50px 50px;  /*上 右 下 左*/
	/*三个值时代表 上 左右 下*/
	/*两个值时代表 上下 左右*/
	padding-left: 200px;
	background-color: red;
}
.content{
	height: 50px;
	width: 50px;
	background-color: black;
}
.text1{
	height: 100px;
	width: 100px;
	background-color: red;
	border: 20px solid black;
	padding: 10px 20px 30px;
	margin: 10px 20px;

}

/*
realwidth: 180px ;
realheight: 180px ;
盒子真实的宽高，值计算border，padding，width和height，不计算margin
*/

.absolute{
	/*绝对定位：absolute
	   一般与left和top搭配使用，还有right和bottom，但是一般比用bottom
	   1.脱离原来位置进行定位
	     每一个absolute元素都是一个新的层

	     相对于最近的有定位的父级定位，如果没有父级定位，则相对于文档定位
	*/
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: green;
}
.absolute1{
	width: 150px;
	height: 150px;
	background-color: red;
}

.relative{
	/*

	relative：相对定位，用法与绝对定位类似
	2.保留原来位置进行定位

	相对于自己原来的位置进行定位
	*/

	/*
	   以relative为基架，absolute为技术实现功能
	*/
}

/*
  fixed，广告定位，不管页面如何变动，这个框的内容都不会动
*/

.third{	
	position: relative;
	right: 50px;
	width: 50px;
	height: 50px;
	background-color: yellow;
	

}
.second{  
	
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: blue;

}


.first{
position: relative;
	margin-left: 50px;
	width: 200px;
	height: 200px;
	background-color: orange;

}