0
点赞
收藏
分享

微信扫一扫

02前端第二章css

unadlib 2022-02-23 阅读 87
css前端html

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

htmlcss前端

第二章 前端开发基础CSS

css前端

css世界第二章

css

第二章

相对路径初始化代码编写HarmonyOS编程语言

Web阶段：第二章：CSS语言

csshtml选择器Html/CSS前端开发

TypeScript 第二章

笔记网络

第二章 资产

00Html/CSS前端开发

第二章 翻译

python开发语言游戏程序

第二章epoll

等待队列回调函数链表虚拟化云计算

第二章 IDLE

python
0 条评论