0
点赞
收藏
分享

微信扫一扫

02前端第二章css

unadlib 2022-02-23 阅读 87

CSS概述

CSS是Cascading Style Sheets(级联样式表)。

CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系 :

  • HTML是网页内容

  • CSS定义页面的样式

		<!-- 
		html主要讲标签,是网页的内容(骨架),不漂亮
		html早期是提供了标签对内容进行修饰的,但是用起来很麻烦,嵌套过多
		 -->
 		<b>
			<font color="darkcyan">
				<big>百度</big>
			</font>
		</b> 

基本语法

基本语法:

  • 行内样式表
  • 内嵌样式表
  • 外部样式表

行内样式表

<!-- 
css是一种样式表语言(修饰网页外观),可将页面的内容与表现形式分离,可以达到样式重复利用。
style=""是css语法   属性名:值;属性名:值
 -->
<p style="color: darkred; font-size: 20px;">
    用于为html文档控制外观,定义布局。
</p>
<p style="color: darkred; font-size: 20px;">
    用于为html文档控制外观,定义布局。
</p>

内嵌样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 
		用来写css样式的标签
		 -->
		<style type="text/css">
			p{
				color: lightblue;
				font-size: 20px;
			}
		</style> 
	</head>
	<body>
		<p>
			用于为html文档控制外观,定义布局。
		</p>
		<p style="color: darkred; font-size: 20px;">
			用于为html文档控制外观,定义布局。
		</p>
	</body>
</html>

外部样式表

<!-- css文件中 -->
p{
		color: brown;
		font-size: 20px;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
		<link href="css/out.css" rel="stylesheet"/>
	</head>
	<body>
		<p>
			用于为html文档控制外观,定义布局。
		</p>
		<p>
			用于为html文档控制外观,定义布局。
		</p>
	</body>
</html>

选择器

要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器。

常用的选择器

标签选择器:通过标签选择器可以选择页面中的所有指定标签

语法:标签名 {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器   css注释*/
			p{
				color: #aa557f;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>用于为html文档控制外观,定义布局。</p>
		<p>用于为html文档控制外观,定义布局。</p>
        <p>用于为html文档控制外观,定义布局。</p>
		<p>用于为html文档控制外观,定义布局。</p>
		<h3>三级标题标签</h3>
	</body>
</html>

类选择器:通过标签的class属性值选中一组标签

语法:

.class属性值{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 类选择器  万能选择器 使用最多*/
			.p1{
				color: cadetblue;
			}
			.p2{
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<p class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<p class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<h3>三级标题标签</h3>
	</body>
</html>

id 选择器:通过标签的id属性值选中唯一的一个标签

语法:

#id属性值 {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">		
			/* id选择器 */
			#pID{
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<p id="pID">用于为html文档控制外观,定义布局。</p>
	</body>
</html>

通配选择器:可以用来选中页面中的所有的标签

语法:*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器   css注释*/
			p{
				color: black;
				font-size: 20px;
			}
			
			/* 类选择器  万能选择器 使用最多*/
			.p1{
				color: cadetblue;
			}
			.p2{
				color: skyblue;
			}
			
			/* id选择器 */
			#pID{
				color: yellowgreen;
			}
			
			/* 通配选择器 */
			*{
				color: gray;
			}
			
			/*
			 选择器优先级问题:由高到低
			 id>类选择器>标签选择器>通配选择器
			 */
		</style>
	</head>
	<body>
		<p id="pID" class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<p class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<p>用于为html文档控制外观,定义布局。</p>
		<p>用于为html文档控制外观,定义布局。</p>
		<b>被通配选择器选中</b>
	</body>
</html>

选择器组合:通过选择器分组可以同时选中多个选择器对应的标签

语法:选择器1,选择器2,选择器N{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择器组合  共有属性写在一起*/
			#pID,.p1,.p2,h3,b{
				font-size: 30px;  /* px是像素单位 css中的尺寸必须加单位*/
			}
		</style>
	</head>
	<body>
		<p id="pID" class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<p class="p1">用于为html文档控制外观,定义布局。</p>
		<p class="p2">用于为html文档控制外观,定义布局。</p>
		<h3>三级标题</h3>
		<b>被通配选择器选中</b>
	</body>
</html>

选择器优先级: id>类选择器>标签选择器>通配选择器

文本

● color:字体颜色

● font-size:字体大小

● font-family:字体

● text-align:文本对齐

● text-decoration:line-through:定义穿过文本下的一条线

● text-decoration:underline:定义文本下的一条线

● text-decoration:none:定义标准的文本

● font-style: italic;斜体文本

● font-weight:字体粗细

● line-height:设置行高

● letter-spacing可以指定字符间距

● text-indent用来设置首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				color: #5F9EA0;
				font-size: 20px;
				/* text-align: center;  文本水平对齐的一种方式*/
				font-family: 楷体;  /* 字体类型 */
				/* text-decoration: line-through;   文本删除线 
				text-decoration: underline;   下划线  */
				/* font-weight: 700;   字体加粗 */
				/* font-style: italic; 斜体文字*/
				/* line-height: 30px;   行高 */
				/* letter-spacing: 30px; 字符间距 */
				/*text-indent: 40px; 首行缩进 */
				text-indent: 2em; /* em 指当前一个字符的大小 */
			}
			
			a{
				text-decoration: none; /* 标准文本,没有任何修饰 */
			}
		</style>
	</head>
	<body>
		<p class="p1">
			<!-- html中的标签 -->
			<!-- 删除线 -->
			<!-- <del>用于为html文档控制外观,定义布局。</del> -->
			<!-- <s>用于为html文档控制外观,定义布局。</s> -->
			<!-- 下划线 -->
			<!-- <u>用于为html文档控制外观,定义布局。</u> -->
			<!-- 斜体 -->
			<!-- <i>用于为html文档控制外观,定义布局。</i> -->
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
		</p>
		<p class="p1">
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
			用于为html文档控制外观,定义布局。
		</p>
		<a>用于为html文档控制外观,定义布局。</a>
	</body>
</html>

背景

● background-color背景颜色

● background-image背景图片

● background-repeat背景重复

● background-size背景尺寸

● background- position 背景位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				background-color: aliceblue;  /* 背景颜色 */
				width: 800px;
				height: 600px;
				background-image: url(img/bg.jpg); /* 插入背景图片,若图片不够大,默认重复 */
				/* background-repeat: repeat-x; */
				background-repeat: no-repeat; /* 图片不重复 */
				/*background-position: right top; 控制位置  background-position: 水平位置 垂直位置; */
				background-position: center; /* 图片居中 */
			}
		</style>
	</head>
	<body>
		<p>这是段落</p>
		aaa
	</body>
</html>

CSS列表

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

● list-style-image 将图象设置为列表项标志。

● list-style-position 设置列表中列表项标志的位置。

● list-style-type 设置列表项标志的类型。

● list-style 简写属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				/*list-style-type: disc; 列表默认图标 */
				/*list-style-type: none; 无图标 */
				list-style-image: url(img/img.jpg);
				/* 设置图标位置 在列表的里面还是外面
				list-style-position: inside;
				list-style-position: outside; */
				/* 简写方式 不区分先后顺序 */
				list-style: url(img/bg.jpg) none inside; 
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>
	</body>
</html>

CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。

伪类的语法:

:hover伪类表示鼠标移入的状态。

:active表示的是被点击的状态。

:focus向拥有键盘输入焦点的标签添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    /* 选择器 */
			a{
				color: black;
				text-decoration: none; /* 去下划线 */
			}
			/* 鼠标移入的伪类,当鼠标移入到前面选择器对应的标签时,自动切换到此样式表 */
			a:hover{
				color: #5F9EA0;
			}
			/* 被点击的状态 */
			a:active{
				color: #A52A2A;
			}
			p:hover{
				color: #5F9EA0;
			}
			p:active{
				color: #A52A2A;
			}
			.btn:hover{
				background-color: #5F9EA0;
				color: plum;
			}
			.btn:active{
				background-color: #87CEEB;
				color: pink;
			}
			/* 向拥有键盘输入焦点的标签添加样式 */
			.text:focus{
				background-color: aliceblue;
				color: #FFC0CB;
			}
			/* 
			:hover 鼠标移入到标签上切换
			:active 鼠标点击标签时切换
			:focus 可以输入的标签,获得鼠标焦点时触发
			 */
		</style>
	</head>
	<body>
		<!-- 
		标签可以有不同的状态 (例如鼠标移入到标签上,点击标签)
		可以通过伪类为鼠标移入时、点击时设置一个样式
		-->
		<a href="">百度</a>
		<a href="">百度</a>
		<p>段落</p>
		<input type="button" value="按钮" class="btn"/>
		<br>
		<input type="text" class="text" /><br>
		<input type="text" class="text" /><br>
		<input type="text" class="text" />
	</body>
</html>

透明

定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别值为1。

规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				/* 设置标签的透明度  0:完全透明 1:完全不透明
				   设置完全透明后,标签在网页上的空间仍占用*/
				/* opacity: 0; */
				opacity: 0.1;
			}
			img:hover{
				opacity: 0.5;
			}
			img:active{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<img src="img/bg.jpg" >
	</body>
</html>

块级标签、行级标签、行级块标签

● 什么是块级标签?

块级标签:无论内容多少 都会独自占据一行的。

例如


    1. 等。

● 什么是行级标签?

行级标签:只占自身大小的标签,不会占一行。

例如、、等。

● 什么是行级块标签?

例如 等

注意: 一般情况下使用块级标签包含行级标签,不使用行级标签包含块标签。

a可以包含任何标签,除去a本身;

p标签不可以包含任何的块标签。

<body>
    <!-- 
    标签分类:
        块级标签:无论内容有多少都占一行
                h1,h2,p……
                这种标签可以设置宽和高
                默认的宽和父级标签一致
                默认的高由内容决定
                这种标签主要用来布局网页
        行级标签:只占自身内容大小,不会占一行。
                不能设置宽高,即使设置了也是无效的。
                a,……
        行级块标签:可以设置大小,不占一行
                input、img……
        注意:一般情况使用块级标签,包含行级标签。
            例外,a标签可以包含任何标签,p标签不能包含其他块标签
     -->
    <!-- 块级标签 -->
    <h1 style="width: 200px;background: #FFC0CB;">占一行</h1> <!-- 设置宽度后依旧占一行 -->
    <h1 style="width: 200px;background: #FFC0CB;">
        <p>aaaaaaaaaa</p>
    </h1>
    aaa
    <!-- 行级标签 -->
    <a href="" style="width: 200px;">百度</a> <!-- 设置高度宽度无效-->
    <a href="">百度</a>
    <a href="">百度</a>
    <a href="">百度</a>
    <b>新浪</b>
    <!-- 行级块标签 -->
    <input type="text" style="width: 500px; height: 30px;"/>百度一下
    <img src="img/img.jpg" width="100px" height="100px">
</body>

Display

通过display样式可以修改标签的类型。

可选值:

block :设置标签为块标签

inline :设置标签为行级标签

inline-block :设置标签为行级块标签

none :隐藏标签(标签将在页面中完全消失)

<body>
		<!-- 
		可以通过display属性来改变标签的类型(块级、行级、行级块)
		 -->
		<h1 style="display: inline;">块级标签改为行级标签</h1> aaa
		<br>
		<a href="" style="display: block;">百度</a>bbb <!-- 设置为块标签 -->
		<!-- 
		display: inline; 设置标签为行级标签
		display: block; 设置标签为块级标签
		display: inline-block; 设置标签为行级块标签
		display:none; 设置标签隐藏。将标签从网页中彻底不显示,也不占空间
		 -->
		<h1 style="display: none;">块级标签</h1> ccc
</body>

div和span标签

div标签

div是块级标签,可以放置任何标签。

div没有任何附加功能,给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

span标签

span是行级标签

span 没有任何附加功能,给了什么属性就能变成什么样。

span标签被用来选中文档中的文字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		h1有默认样式的,加粗文字,变大
		 -->
		<!-- 
		div是块级标签,可以包含任何标签,没有任何附加功能,主要用来布局网页
		 --> 
		<div style="background-color: #FFC0CB; width: 300px; height: 200px;">
			div是一个纯净版的块级标签
		</div> 
		<!-- 
		span是一个纯净版的行级标签,主要用来选中文本内容,为其修饰样式
		-->
		<span style="color: #5F9EA0;">百度</span>
		<!-- 
		超链接、图片、表格、表单、内联框架 无法代替
		段落、标题 可以使用css+div实现
		-->
	</body>
</html>

盒子模型

CSS处理网页时,它认为每个标签都包含在一 个不可见的盒子里。

如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。

我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

一个盒子我们会分成几个部分:

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

内容区

● 内容区指的是盒子中放置内容的区域,也就是标签 中的文本内容,子标签都是存在于内容区中的。

● 如果没有为标签设置内边距和边框,则内容区大小 默认和盒子大小是一致的。

● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

● width和height属性只适用于块标签(包含行级块)。

内边距

● 顾名思义,内边距指的就是标签内容区与边框以内的空间。

● 内边距会影响整个盒子的大小。

● 使用padding属性来设置标签的内边距。

例如:

padding-left:10px;

padding-right:10px;

padding:10px 20px 30px 40px

这样会设置标签的上、右、下、左四个方向的内边距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				background-color: #F0F8FF;
				width: 180px;
				height: 180px;  /* 设置标签的大内容区小为200*200*/
				
				/* padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 10px; */
				padding: 10px;   /* 上下左右均为10px */
				/*padding: 5px 10px 15px 20px; /* 上 右 下 左*/
				/* paddint: 10px 10px;  上下  左右  */
			}
			
			.box2{
				width: 160px;
				height: 60px;
				background-color: #FFC0CB;
				padding: 60px 20px;
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型:认为每个标签都像一个盒子
		每个标签由4个区域构成:
		    内容区:
			    标签中的内容都是放在内容区的
			    如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
				标签的大小是由3部分构成的
				标签的大小 = 内容区+内边框+边框
				通过width和height可以设置内容区的大小
			内边距:
			    内容区与边框之间的距离,不能放标签
				内边距会影响标签的大小
			边框
			外边距:不影响标签大小
		-->
		<div class="box1">
			<span>box</span>
		</div>
		<br>
		<!-- 练习最终需要一个200*200的div标签
		    需要图片在标签中水平,垂直居中
		 -->
		<div class="box2">
			<img src="img/div练习.png" >
		</div>
	</body>
</html>

边框

● 可以在标签周围创建边框,边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框:

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

● 边框可以设置样式:

dotted (点线) dashed (虚线) solid (实线) double (双线) groove(槽线)

border-radius:设置四个角为圆角边框

border-top-left-radius:设置左上为圆角边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				background-color: #F0F8FF;
				width: 180px;
				height: 180px;  /* 设置标签的大内容区小为200*200*/
				padding: 10px;   
				
				/* 边框 设置以下三个属性才可以,默认为2px边框*/
				border-top-color: #DB7093; /* 上边框颜色*/
				border-top-width: 2px; /* 上边框宽度*/
				border-style: solid; /* 设置边框样式 solid实线*/
				/* border-top: #87CEEB solid 3px; 简写*/
				border: #DB7093 2px solid;
				/* 设置圆角边框 */
				border-radius: 20px;
				/* border-top-left-radius: 10px; 只设置左上角为圆角 */
			}
			.search{
				width: 600px;
				height: 30px;
				border: #A9A9A9 1px solid;
				border-radius: 10px;
				outline: none; /* 去除浏览器默认点击时的边框 */
			}
			.search:hover{
				border: gainsboro 1px solid;
				
			}
			.search:focus{
				border: #4A77D4 1px solid;
				
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型:认为每个标签都像一个盒子
		每个标签由4个区域构成:
		    内容区:
			    标签中的内容都是放在内容区的
			    如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
				标签的大小是由3部分构成的
				标签的大小 = 内容区+内边框+边框
				通过width和height可以设置内容区的大小
			内边距:
			    内容区与边框之间的距离,不能放标签
				内边距会影响标签的大小
			边框:
			    就是标签的最外层,影响标签大小
			外边距:不影响标签大小	
		-->
		<div class="box1">
			<span>box</span>
		</div>
		<br>
		<input type="text" name="" class="search" value="" />
	</body>
</html>

外边距

● 外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置 外边距。用法和padding类似,同样也提供了四个方向的 。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等。

垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto。

● 外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				background-color: #F0F8FF;
				width: 200px;
				height: 200px;  /* 设置标签的大内容区小为200*200*/
				/* 外边距 */
				/* margin-top: 100px;
				margin-left: 100px; */
				/* 值如果是auto,那么外边距的值会最大化
				 当左边与右边外边距都设置为最大化时,就水平居中*/
				margin-left: auto;
				margin-right: auto;
				/* margin:auto  水平居中 */
				/*上下外边距设置为auto时,无法居中,值为0,需要设置具体的值,只有左右可以设置为自动*/
				margin-top: auto;
				margin-bottom: auto;
				margin: 100px auto; /* 上下100px 左右居中 */
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型:认为每个标签都像一个盒子
		每个标签由4个区域构成:
		    内容区:
			    标签中的内容都是放在内容区的
			    如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
				标签的大小是由3部分构成的
				标签的大小 = 内容区+内边框+边框
				通过width和height可以设置内容区的大小
			内边距:
			    内容区与边框之间的距离,不能放标签
				内边距会影响标签的大小
			边框:
			    就是标签的最外层,影响标签大小
			外边距:不影响标签大小,会影响标签的位置,是一个标签与另一个标签之间的距离
		-->
		<div class="box1">
			<span>box</span>
		</div>
	</body>
</html>

清除浏览器默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

<style type="text/css">
    /* 统配选择器 去掉浏览器默认样式 */
    *{
        margin: 0px;
        padding: 0px;
        outline: none;
    }
</style>

文档流

文档流:指的是标签在网页中的排放顺序,标签默认是从左至右一个接一个排放。

文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签,即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继 续从左至右摆放。

这样一来每一个块标签都会另起一行,那么我们如果想在文档流中进行布局就会变得比较麻烦。

浮动

所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来。默认标签都是不浮动的。

浮动使用float属性:

  • 可选值:
    • none :不浮动
    • left :向左浮动
    • right :向右浮动

块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们 都会为其指定一个宽度。

当一个标签浮动以后,其下方的标签会上移。

浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				background-color: #5F9EA0;
				/* 
				标签浮动后,宽度只是内容的大小,需要设置宽高
				标签浮动后,上升了一层,是立体的,就不会占用原来一楼的空间
				*/
				float: left; /* 向左浮动 */
			}
			.box2{
				background-color: #A52A2A;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
	</body>
</html>

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值:

left : 忽略左侧浮动

right :忽略右侧浮动

both :忽略全部浮动

<!DOCTYPE html><!-- 横向导航条 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.menu{
				background-color: #DDA0DD;
				float: left;
				padding: 10px 30px;
				color: white;
				/* margin: auto;  无效*/
			}
			.menu-box{
				/* 设置宽度后方可居中,因为原先会沾满一行 */
				width: 992px;
				margin: auto;
			}
			.main-box{
				width: 992px;
				background-color: #DB7093;
				margin: 10px auto;
			}
			.main-box-left,.main-box-right,.main-box-center{
				float: left;
				height: 200px;
			}
			.main-box-left{
				width: 300px;
				background-color: #87CEEB;
			}
			.main-box-center{
				width: 392px;
				background-color: #FFC0CB;
			}
			.main-box-right{
				width: 300px;
				background-color: #F0F8FF;
			}
			.main-box-bottom{
				height: 200px;
				background-color: peachpuff;
			}
		</style>
	</head>
	<body>
		<!-- 
		网页的内容,长什么样子由css实现 
		menu-box 没有浮动,还是在原来的文档流中
		
		浮动后的标签是不占用原始文档流空间的,这个现象称为高度塌陷
		高度塌陷会影响到其他后面标签的布局
		解决:清除浮动影响,把父标签自动撑开,撑为与浮动标签高度相同
		-->
		<div class="menu-box">
			<div class="menu">国际新闻</div>
			<div class="menu">国际新闻</div>
			<div class="menu">娱乐快报</div>
			<div class="menu">体育世界</div>
			<div class="menu">国际新闻</div>
			<div class="menu">国际新闻</div>
			<div class="menu">体育世界</div>
			<div class="menu">国际新闻</div>
			<div style="clear: left;"></div>
		</div>
		<div class="main-box">
			<div class="main-box-left"></div>
			<div class="main-box-center"></div>
			<div class="main-box-right"></div>
			<div style="clear: left;"></div>
			<div class="main-box-bottom">底部</div>
		</div>
	</body>
</html>

定位

定位的基本思想很简单,它允许你定义的标签相对于其正常位置,或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

相对定位

相对定位是一个非常容易掌握的概念. 相对于它 的起点进行移动,移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位, left right top bottom四个属性来设置标签的偏移量。

相对定位的特点 :

  • 当标签的position属性设置为relative时,则开启了标签的相对定位
  • 当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
  • 相对定位是相对于标签在文档流中原来的位置进行定位
  • 相对定位的标签不会脱离文档流
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*相对定位:
		    相对定位的参照物是他本身,移动后原来的空间还是被占用的,不会脱离文档流
			
		*/
			.box1{
				width: 100px;
				height: 100px;
				background-color: #4A77D4;
				position: relative; /* 开启相对定位 */
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: darkgreen;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</body>
</html>

绝对定位

绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他的标签重叠。可以通过position: absolute; 开启绝对定位,left right top bottom四个属性来设置标签的偏移量 。

绝对定位的特点 :

  • 开启绝对定位,会使标签脱离文档流。
  • 开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化。
  • 绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位)如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位。
  • 绝对定位会使标签提升一个层级。
  • 绝对定位会改变标签的性质,行级标签变成块标签。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*绝对定位:
		    开启绝对定位的标签,会脱离文档流。
			绝对定位标签的参照物会变:
			    以离他最近的、开启了定位的祖先标签进行定位,
				如果祖先标签都没有开启定位,那么就以浏览器边框为参照物
				(一般情况下,开启了子标签的绝对定位,就会开启父标签的相对定位)
		*/
			.box1{
				width: 100px;
				height: 100px;
				background-color: #4A77D4;
				position: absolute; /* 开启绝对定位。开启后box2在box1正下方*/
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: darkgreen;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: #FFDAB9;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="box3">
			box3
			<div class="box1">box1</div>
		</div>
		<div class="box2">box2</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.login_box{
				width: 300px;
				height: 300px;
				background-color: #808080;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -150px; /* height的一半 */
				margin-left: -150px;
			}
		</style>
	</head>
	<body>
		<div class="login_box"></div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a name="top"></a> <!-- 定义一个顶部的锚点 -->
		<a href="#p1">商品1</a>
		<a href="#p2">商品2</a>
		<a href="#p3">商品3</a>
		<a href="#p4">商品4</a>
		<a href="#p5">商品5</a>
		<h3><a name="p1">商品1</a></h3>
		<img src="img/1.png" />
		<h3><a name="p2">商品2</a></h3>
		<img src="img/2.png" />
		<h3><a name="p3">商品3</a></h3>
		<img src="img/3.png" />
		<h3><a name="p4">商品4</a></h3>
		<img src="img/4.png" />
		<h3><a name="p5">商品5</a></h3>
		<img src="img/5.png" />
		<br />
		<!-- 制作锚点,使返回顶部一直存在 -->
		<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
	</body>
</html>
举报

相关推荐

02_第二章 HTML&CSS

第二章 前端开发基础CSS

css世界第二章

TypeScript 第二章

第二章 翻译

第二章 资产

第二章 IDLE

0 条评论