Day02 CSS样式

知识回顾

一、DIV + CSS布局

1、DIV简介

DIV+CSS布局
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
DIV是HTML中的一个标签，本身没有默认样式，需要借助CSS完成页面效果。

2、CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS作用：
（1）美化页面元素
（2）页面元素的精确定位

二、CSS引入方式

1、行内样式

所谓行内样式就是直接在标签内通过style属性设置样式效果

案例：

<p style="color: red;font-size: 50px;">我是行内CSS</p>

效果：

缺点：

1、样式（CSS）和结构（HTML）代码没有分离

2、不具备可复用性

3、可维护性较差

2、内嵌样式

所谓内嵌样式就是在head标签中使用style标签编写样式

案例：

html...
		<p>我是内嵌CSS</p>
css...
		<style type="text/css">
			p{
				color: yellow;
				font-size: 50px;
			}
		</style>

效果：

缺点：

1、样式代码和结构代码没有彻底分离

2、代码复用性仍然不强，但是相对于行内标签有一定的提高

3、外部样式

所谓外部引入就是在外部创建一个.css文件，在head标签中使用link标签引入到页面中

代码：

html...
		<p>我是内嵌CSS</p>
		<p>我是<span>外部</span>引入CSS</p>

head引入...

		<link rel="stylesheet" href="css/outer.css" type="text/css" />
outer.css...

p{
	font-size: 50px;
	color:green;
}
span{
	font-size: 50px;
	color:green;
}

效果：

三种引入方式的对比

1、使用频率

外部样式>内嵌样式>行内样式

2、优先级别

行内样式>内嵌样式>外部样式

css的优先级遵循最近原则，且如果同为外部样式，那么后引入的样式会覆盖前面引入的元素

三、CSS语法规则

1、语法规则

语法规则：

选择器{
	属性1：值1;
	属性2：值2;
	...
}

选择器{ 属性1：值1;属性2：值2; ... }


案例：
p{
	color:red;
	font-size:20px;
}

CSS中的注释

外部引入和内嵌注释：/**/
行内注释：<!-- -->
//不可以注释CSS

四、CSS选择器

1、标签选择器

作用：

所谓标签选择器，就是通过标签类型选择

案例代码：

div{
    background-color: red;
    width: 100px;
    height: 100px;
}

效果：

2、类选择器

作用：

在html中，我们可以通过设置标签的class属性，为其指定类名。
当拥有类名后，标签就可以使用类名选择器。
在CSS中使用.类名{}的形式设置CSS属性，不同标签的class属性值可以相同，所以类选择器设置的样式的复用性比较好。
一个标签可以拥有多个class属性，多个属性使用空格间隔class="class1 class2"

语法：

html...
<标签 class="类名">
	我是div
</标签>

css...
.类名{
	属性：值；
	...
}

案例代码：

html...
		<div class="blue">
			我是div
		</div>
		<p class="blue">
			我是段落
		</p>

css...
			.blue{
				background-color: blue;
			}

效果：

小技巧：使用输入标签+类名按下tab键可以快速创建一个包含class属性的标签。

3、id选择器

作用：

在html中，我们还可以给标签设置id属性，为id指定唯一的名称。当标签拥有id后，即可使用id选择器。在CSS总使用#id{}的形式设置CSS属性。由于标签的id是唯一的，所以CSS代码复用性不高，因此id选择器使用的不多，id常配合JavaScript使用。

语法：

html...
		<标签 div id="id名称">
			我是一个div
		</标签>

css...
			#id名称{
				属性：值;
				...
			}

案例代码：

html...
		<div id="myDiv">
			我是一个div
		</div>

css...
			#myDiv{
				background-color: deeppink;
			}

效果：

小技巧：输入标签#id按下键盘的tab键，可以快速创建包含id的属性标签。

4、后代选择器（拓展）

作用：

所谓后代选择器即可以指定某个标签内的所有子标签的css属性（包含孙子标签）。

语法：

html...
		<标签>
			我是一个div
			<子标签>
				我是一个子标签
			</子标签>

			<子标签>
				我是一个子标签
				<子标签>
					我是一个子标签
				</子标签>
			</子标签>
		</标签>

css...
			标签 子标签{
				属性：值;
				...
			}

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div p{
				width: 500px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<div>
			我是一个div
			<p>我是一个p标签</p>
			<div>
				<p>我也是一个p标签</p>
			</div>
		</div>
	</body>
</html>

效果：

说明：

1、后代标签使用空格隔开

2、后代标签仅仅可以是儿子，包括孙子/重孙。。。

3、后代选择器不仅适用于标签选择器，同样适用于其他普通选择器

5、子元素选择器（拓展）

子元素选择器的用法类似于后代选择器，不过其只支持子代，不支持孙子、重孙。。。

语法：

html...
		<标签>
			我是一个div
			<子标签>
				我是一个子标签
			</子标签>

			<子标签>
				我是一个子标签
				<子标签>
					我是一个子标签
				</子标签>
			</子标签>
		</标签>

css...
			标签>子标签{
				属性：值;
				...
			}

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div > p{
				width: 500px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<div>
			我是一个div
			<p>我是一个p标签</p>
			<div>
				<p>我也是一个p标签</p>
			</div>
			<ul>
				<li><p>我是一个p标签</p></li>
				<li><p>我是一个p标签</p></li>
				<li><p>我是一个p标签</p></li>
			</ul>
		</div>
	</body>
</html>

效果：

五、CSS中的常见样式

1、字体样式

CSS中的字体样式，一般用于设置字体大小、倾斜、字体、字体粗细等属性。

常见属性：

font-size：字体大小
font-style：字体风格（斜体）
font-family：字体类型（宋体/黑体）
font-weight：字体粗细，一般用于字体加粗

案例代码：

			div{
				background-color: red;
				width: 100px;
				height: 100px;
				font-family: "microsoft yahei";
				font-weight: bold;
				font-size: 30px;
				font-style: italic;
			}

效果：

2、文本样式

CSS中的字体样式一般用于设置字体的对其方式、字体颜色、字体修饰、以及行高等。

常见属性：

color：文本颜色
text-align：对其方式
text-decoration：字体修饰（是否有下划线等）
line-height：行高，行高可以支撑起标签的高度，还可以实现垂直居中

案例代码：

			div{
				text-align: center;
				line-height: 200px;
				text-decoration: underline overline line-through;
			}

效果：

3、超链接伪类

在html中，超链接默认拥有下划线和默认前景色，并且点击后会发生颜色变化，使用css可以手动控制这些情况下的属性。

常见属性：

a:link：为访问过时的样式
a:visited：访问过后的样式
a:hover：鼠标悬停时的样式
a:avtive：正在点击时的样式

案例代码：

css...
			.myLink:link{
				text-decoration: none;
				color: gray;
			}
			.myLink:hover{
				color: orange;
			}
			.myLink:active{
				color: green;
			}
			.myLink:visited{
				color: red;
			}

html...
		<a class="myLink" href="http://blog.vantee.cn">我是一个超链接</a>

4、边框样式

CSS中可以通过border属性设置标签的边框，还可以根据需求绘制不同样式、不同颜色、不同粗细的边框。

常见属性：

border-width：边框宽度
border-color：边框颜色
border-style：边框样式
border-radius：圆角边框

案例代码：

html...
		<div id="borderBox">
			
		</div>

css...
			#borderBox{
				width: 400px;
				height: 400px;
 				border-width: 10px;
				border-color: black;
				border-style: solid;
				border-radius: 30px;
			}

效果：

4.1、简写形式：

border: 边框样式颜色边框宽度;

上述案例中的CSS代码可以简化为：

简写：
			#borderBox{
				width: 400px;
				height: 400px;				
				border-radius: 30px;
				border: 10px solid black;
			}

4.2 、单独设置某个方向的边框

CSS支持单独设置某个方向的边框，即上、右、下、左四个方向。

边框宽度：border-[ top | right | bottom | left ] -width
边框颜色：border-[ top | right | bottom | left ] -color
边框样式：border-[ top | right | bottom | left ] -style
圆角样式：border-[ top | right | bottom | left ] -radius

案例：

html...
		<div class="myBorder">
			
		</div>

css...
		<style type="text/css">
			.myBorder{
				width: 100px;
				height: 100px;
				border: red solid 10px;
				border-left-width:20px;
				border-right-color: black;
				border-bottom-style: dashed;
			}
		</style>

效果：

4.3、单独设置某个方向的边框的简写形式

border的简写形式，同样使用与某个方向的边框设置。

语法：

border-[top | right | left | bottom]：颜色 边框类型 大小;

案例：

html...
		<div class="myBorder">
			
		</div>
css...
		<style type="text/css">
			.myBorder{
				width: 100px;
				height: 100px;
				border: red solid 10px;
				border-left: yellow solid 10px;
				border-right: green dashed 20px;
			}
		</style>

效果：

4.4、同时设置四个方向边框样式的简写形式

语法：

border-width：上 [右 | 下 左];(单位：px)

border-color：上右下左。。。

案例：

html...
		<div class="myBorder">
			
		</div>
css...
		<style type="text/css">
			.myBorder{
				width: 100px;
				height: 100px;
 				border-width:10px 20px;
				border-color: black red yellow green;
				border-style: dashed solid dotted double;
			}
		</style>

效果：

4.5、利用圆角边框绘制圆形和矩形

案例代码：

html...
		<div class="circle">
			
		</div>

css...
			.circle{
				width: 100px;
				height: 100px;
				border: red solid 2px;
				border-radius: 50%;
			}

绘制矩形：将上述案例中的正方形修改为长方形即可。

5、背景样式

CSS可以设置标签的背景颜色和背景图片

背景颜色：background-color = color
背景图片：backgroupd-image = url("网络图片 | 本地图片")

案例代码：

html...
		<div class="myBox">
			
		</div>

css...
		<style type="text/css">
			.myBox{
				width: 500px;
				height: 500px;
				background-color: yellow;
				background-image: url(bg2.jpg);
			}
		</style>

效果：

5.1、背景图片的平铺

背景图片的大小如果小于标签的大小，可以通过修改背景的平铺方式增加覆盖面积。

设置背景平铺的方式如下：

background-repeat = (repeat | no-repeat | repeat-x | repeat-y)

repeat：默认，垂直和水平都平铺
repeat-x：在水平方向平铺（X轴）
repeat-y：在垂直方向平铺（Y轴）
no-repeat：在水平和垂直方向都不平铺

案例代码：

html...
		<div class="myBox">
			
		</div>

css...
		<style type="text/css">
			.myBox{
				width: 500px;
				height: 500px;
				background-color: yellow;
				background-repeat: repeat;
				background-image: url(bg2.jpg);
			}
		</style>

效果：

优势：使用小图平铺可以加快页面的加载速度

5.2、背景图片的定位

如果图片小于背景，可以通过设置background-position属性来指定图片的显示位置

语法：

background-position =  水平 垂直（方向单词 | 像素值 | 百分比）

先指定垂直方向的位置，再指定水平方向的位置
可以使用如下方式设置水平或者垂直方向的属性
- 具体方位词left right center top bottom
- 具体的像素值，接受负数
background-position只有在no-repeat时才会生效

案例代码：

html...
		<div class="myBox">
			
		</div>

css...
		<style type="text/css">
			.myBox{
				width: 500px;
				height: 500px;
				background-color: yellow;
				background-repeat: no-repeat;
				background-image: url(bg2.jpg);
				background-position: center center; 
				//background-position: top center; 
				//background-position: 100px 100px;
			}
		</style>

效果：

5.3、背景图片大小的设置

设置背景图片大小：

background-size  = 宽度 高度 （像素 名词）

先设置宽度，再设置高度
可以使用名词指定，此时不需要指定两哥方位的值
- auto：原图
- contain：拉伸

六、盒模型

CSS中的盒模型是一种比喻，在HTML中，所有标签都是盒子。

1、盒模型中的属性

内容：content，即width*height的区域。可以理解为快递盒中的物体。
内边框：padding，即content外border内的部分。可以理解为盒子中的填充物。
边框：border，即盒子本身的区域，可以理解为快递盒。
外边框：margin，即盒子和盒子之间的距离。可以理解为快递架上不同快递盒之间的距离。

2、内边距和外边距

2.1、内边距

内边距padding，用于设置content到border之间的距离。

设置方式：

padding-top: 像素;
padding-right: 像素;
padding-bottom: 像素;
padding-left: 像素;

连写：

padding：上 右 下 左

简写形式：

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样

注意点：

1、给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2、给标签设置内边距之后, 内边距也会有背景颜色

2.2、外边距

外边距margin，是对border之外区域的拓展。用于设置和其他盒子和盒子之间的间距。

设置方式：

margin-top: 像素;
margin-right: 像素;
margin-bottom: 像素;
margin-left: 像素;

连写：

margin: 上 右 下 左;

简写形式：

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样

注意点：外边距的那一部分是没有背景颜色的

3、盒模型中的宽度和高度

在盒模型中，内容的宽度和高度就是通过width / height设置的。但是盒模型中，我们通常如下定义盒子的宽度和高度。

3.1、盒模型的宽度

左侧外边距 + 左侧边框 + 左侧内边距 + width + 右侧内边距 + 右侧边框 + 右侧外边距

3.2、盒子的高度

盒子的上边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距

4、外边距合并现象

当两个盒子纵向相邻时，如果两个盒子都拥有margin，属性。盒子的间距会选择两个盒子margin最大者作为间距。（即会发生合并）
两个盒子横向相邻时，会取两个盒子相邻的margin之和作为间距。（即不会发生合并）

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 50px;
				height: 50px;
				border: solid black 1px;
				margin: 10px;
				//float: left;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</body>
</html>

纵向排列效果：

横向排列效果：

1604469531153

5、清空默认边距

1、为什么要清空默认边距？

部分标签拥有默认的内边距或外边距，例如body等。在企业开发中，为了更好的控制盒子的宽度。会清空所有标签的默认边距，在需要边距时手动设置。

2、如何清空默认边距？

*{
    margin: 0;
    padding: 0;
}

6、通过外边距实现盒子的水平居中

当margin的值设置为margin: 0 auto时，可以实现盒子的水平居中。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

效果：

七、布局样式

1、什么是网页布局

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。

2、标准流

2.1、网页元素的分类

在CSS中，将网页元素分为三大类，分别是行内元素、块级元素、行内块级元素。

2.1.1、块级元素

特点：

纵向（垂直）排列
独占一行
可以手动指定宽高
margin和padding的上下左右都会生效

常见的块级元素：

2.1.2、行内元素

特点：

横向（水平）排列
不独占一行
不能拥有宽高
其宽度和高度由内容决定
margin和padding的top和bottom不会生效

常见行内元素：

span
a

2.1.3、行内块级元素

特点：

横向排列
不独占一行
可以拥有宽高。
可以设置所有的margin和padding

常见的行内块级元素：

button
textarea
img

2.2、标准流的排版

标准流就是按照行内元素、行内块级元素以及块级元素的默认排序规则进行水平和垂直排序。

3、浮动流

3.1、什么是浮动流

浮动流是一种“半脱离标准流”的排版方式，浮动流中只有一种排版方式，就是水平排版。他只能设置某个元素左对齐或者右对齐。

3.2、浮动流的特点

浮动流中只能设置元素的左对齐或者右对齐，因此浮动流中不可以使用margin:0 auto;
浮动流中不区分行内元素、块级元素、行内块级元素。无论是哪种元素都遵循水平排版
浮动流中无论行内元素、块级元素、行内块级元素，都可以设置宽高
综上所述，浮动中的元素和行内块级元素的特性很像

3.3、如何设置浮动

浮动是通过CSS属性float实现，其拥有三种取值：

none：默认，不浮动
left：左浮动
right：右浮动

当元素设置了左浮动，就会在其父容器的最左侧浮动，如果最左侧已经有其他浮动元素，则向右依次排列。

当元素设置了右浮动，就会在其父容器的最右侧浮动，如果最右侧已经有其他浮动元素，则向左依次排列。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: red;
				border: solid 1px black;
				font-size: 50px;
				color: white;
				line-height: 100px;
				text-align: center;
			}
			.boxl{
				float: left;
			}
			.boxr{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box boxl">1</div>
		<div class="box boxl">2</div>
		<div class="box boxl">3</div>
		<div class="box boxr">4</div>
		<div class="box boxr">5</div>
		<div class="box boxr">6</div>
	</body>
</html>

效果：

3.4、脱标现象演示

脱标，就是元素脱离标准流的意思，当元素脱离了标准流，其在标准流中的位置就会被释放。其他元素就可以顶上去因此。因此浮动元素会对其相邻非浮动元素的位置产生影响。

脱标现象演示：

html...
    <div class="box1"></div>
    <div class="box2"></div>

css...
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>

效果：

3.5、浮动元素的贴靠现象

如果父元素的宽度能够容纳所显示的所有浮动元素，那么浮动元素会并排显示
如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始考前贴靠
如果贴靠了前面所有浮动元素之后都不能显示，最终会贴考到父元素的左边或者右边（会根据左浮动还是右浮动）

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				text-align: center;
				color: white;
				font-size: 20px;
			}
			.father{
				width: 400px;
				height: 400px;
				border: 1px solid black;
			}
			.box1{
				width: 50px;
				height: 300px;
				float: left;
				background-color: red;
				line-height: 300px;
			}
			.box2{
				width: 50px;
				height: 100px;
				background-color: green;
				float: left;
				line-height: 100px;
			}
			.box3{
				width: 250px;
				height: 100px;
				background-color: blue;
				float: left;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
		</div>
	</body>
</html>

效果：

1604473502595

使用开发者工具动态修改father的宽度，观察变化。

3.6、浮动元素的字围现象

浮动元素不会覆盖在没有浮动的文字上，并且没有浮动的文字会让开浮动元素的位置，这种现象我们称之为浮动元素的字围现象。

效果图：

代码：

	<body>
		<div id="content" style="margin: 0 auto; width: 800px;">
			<img src="offcn.png" width="300px" alt="" style="float: right;">
			<p>
				公司创始人团队于1999年开始创业，2000年进入公务员考试培训行业，每年培训学员超过140万人。 [5]  公司总部位于北京，是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。
				经过十余年潜心发展，中公教育在国内31个省份、300余个地市，拥有300余家直营分校和旗舰学习中心、3000余名专职授课教师、2000余种教辅图书出版物、7000余名员工，成为集合面授教学培训、网校远程教育、图书教材及音像制品的出版发行于一体的大型知识产业实体。
				截至2017年12月31日，公司在全国319个地市建立了582家直营分部和学习中心； [5]  截至2018年4月30日，公司共有员工22620人，其中专职研发人员达1344人。 [6] 
				中公教育秉承着“实用、有效、专业、深度”的办学宗旨，依靠顶级的师资阵容和完整的自主研发实力，培训业务涵盖公务员考试、事业单位考试、军转干考试、招警考试、选调生/三支一扶/大学生村官考试、政法干警考试、公开选拔领导干部考试、教师招聘考试等，拥有国内首家公职考试研究院，面向全国培训学员超过1000余万人次，为众多考生实现公职梦想提供了强大的智力支持与服务保障。
				作为职业教育服务业的综合性企业，中公教育针对公众“终身学习”和“素质教育”的需求，在国家专业硕士（MBA/MPA等）招生考试、建筑工程行业执业资格考试、执业医师资格考试、银行/农信社等金融系统入职资格考试、会计从业资格考试等领域，提供全方位的考前培训，并在职业规划、求职就业培训等领域为广大青年人提供深度辅导实现了培训产品的规模化、多元化和差异化，在中国职业教育领域独树一帜。
			</p>
		</div>
	</body>

3.7、浮动元素的高度问题

在标准流中，子元素的高度会称起父元素的高度，浮动元素脱离标准流之后，不会撑起父元素的高度。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.outer{
				border: solid yellow 1px;
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

效果：

作业：删除float，再观察父元素的边框

3.8、浮动练习

使用浮动完成下述效果：

3.9、浮动练习PLUS

使用浮动完成下述布局：

3.10、清除浮动

clear属性可以清除标签的浮动

none：默认值，不清除浮动
left：不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：不要找前面的左浮动元素或者右浮动元素

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			p{
				width: 100px;
				height: 100px;
				background-color: red;
				border: solid black 1px;
				float: left;//修改为right观察
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<p>我是段落3</p>
		<p>我是段落4</p>
		<p style="clear: both;">我是段落5</p>
		<!-- 修改为left 、 right观察 -->
		<p>我是段落6</p>
		<p>我是段落7</p>
		<p>我是段落8</p>
		<p>我是段落9</p>
		<p>我是段落10</p>
	</body>
</html>

效果：

八、定位技术

1、什么是定位技术

前面我们介绍了，HTML页面中的布局分为标准流和浮动流。无论是标准流还是浮动流，元素都是按照水平或者垂直的形式进行布局的。如果要修改其在布局中的位置，就需要用到定位技术。

2、四种定位方式

HTML中的定位是通过设置CSS属性position实现的，其取值有以下四种：

static：默认，使用默认的布局方式
relative：相对定位
absolute：绝对定位
fixed：固定定位

3、相对定位

相对定位不会脱离标准流，会保留元素在标准流中的位置
相对定位的元素原来的位置会留下空白，相邻元素不会补位，所以不影响相邻元素的位置。
相对定位可以使用left | right | top | bottom四种属性设置偏移像素值

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: yellow solid 5px;
				color: white;
				font-size: 70px;
				line-height: 200px;
				text-align: center;
			}
			.box1{
				background-color: blue;
			}
			.box2{
				position: relative;
				background-color: red;
				left: 100px;
				top: 100px;
			}
			.box3{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="box box1">box1</div>
		<div class="box box2">box2</div>
		<div class="box box3">box3</div>
	</body>
</html>

标准流效果：

浮动流效果：

4、绝对定位

绝对定位的元素会脱离标准流
脱离标准流之后，其后的元素会顶替其原来的位置进行补位，因此会影响相邻的元素
绝对定位也可以使用left | right | top | bottom四种属性设置偏移像素值
绝对定位的偏移参考其最近的拥有定位属性的父元素。如果没有则以body作为参考。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				margin: 100px;
				position: relative;/*删除此行代码观察结果*/
			}
			.box{
				width: 200px;
				height: 200px;
				border: yellow solid 5px;
				color: white;
				font-size: 70px;
				line-height: 200px;
				text-align: center;
				/*float: left;*/
			}
			.box1{
				background-color: blue;
			}
			.box2{
				position: absolute;
				background-color: red;
				left: 100px;
				top: 100px;
			}
			.box3{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box box1">box1</div>
			<div class="box box2">box2</div>
			<div class="box box3">box3</div>
		</div>
	</body>
</html>

效果：

5、固定定位

固定定位会脱离标准流
绝对定位也可以使用left | right | top | bottom四种属性设置偏移像素值
固定定位的位置不受父容器影响
固定定位的元素不回随着页面的翻动而改变

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				position: relative;/*删除此行代码观察结果*/
				margin: 100px;
			}
			.box{
				width: 200px;
				height: 200px;
				border: yellow solid 5px;
				color: white;
				font-size: 70px;
				line-height: 200px;
				text-align: center;
				/*float: left;*/
			}
			.box1{
				background-color: blue;
			}
			.box2{
				position: fixed;
				background-color: red;
				left: 100px;
				top: 100px;
			}
			.box3{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box box1">box1</div>
			<div class="box box2">box2</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
			<div class="box box3">box3</div>
		</div>
	</body>
</html>

效果：

九、样式转换

1、如何实现样式转换

前面我们提到了CSS中的三种常见分类

行内标签：inline
块级标签：block
行内块级标签：inline-block

在实际开发中，我们可能会涉及到这三种类型的转换问题，通过设置display属性可以实现分类的转换。

display: none; /*隐藏元素*/
display: inline; /*将元素转换为行内元素*/
display: block; /*将元素转换为块级元素*/
display: inline-block; /*将元素转换为行内块级元素*/

2、`display:none;`实现隐藏元素

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				background-color: red;
				border: solid yellow 5px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

效果：

3、行内元素转换为块级元素

行内元素和块级元素区别：

行内元素横向排列，块级元素纵向排列
行内元素不能设置宽高，块级元素可以设置宽高
行内元素不会独占一行，块级元素会独占一行

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mySpan{
				display: block; /* 加上此行代码即可 */
				width: 300px;
				height: 300px;
				background-color: red;
				border: solid yellow 5px;
			}
		</style>
	</head>
	<body>
		<span class="mySpan">我是一个span</span>
		<a href="">我是一个超链接</a>
	</body>
</html>

效果：

转换后，span也可以拥有高度，并且独占一行。

4、块级元素转换为行内块级元素

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 300px;
				height: 300px;
				background-color: red;
				border: solid 5px yellow;
				display: inline;/*将display设置为inline即可*/
			}
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
		<p>我是一个段落</p>
	</body>
</html>

效果：

5、块级元素转换为行内块级元素

行内块级和块级元素最大的区别：

行内块级元素横向排列，块级元素纵向排列
行内块级元素不会独占一行，块级元素会独占一行。

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 300px;
				height: 300px;
				background-color: red;
				border: solid 5px yellow;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
		<p>我是一个段落</p>
	</body>
</html>

效果：

6、通过ul li完成下述导航栏效果

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>横向导航菜单</title>
		<style type="text/css">
			.navbar{
				width: 100%;
				height: 80px;
				background-color: skyblue;
			}
			ul li{
				float: left;/*将列表横向显示*/
				list-style-type: none;/*将列表项前面的项目符号去掉*/
				width: 100px;
				height: 40px;
				margin: 20px 0 0 20px;
				background: orange;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
			}
			
			li a{
				text-decoration: none;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="navbar">
			<ul>
				<li><a href="">Java</a></li>
				<li><a href="">Web</a></li>
				<li><a href="">Python</a></li>
				<li><a href="">UI</a></li>
				<li><a href="">软件测试</a></li>
				<li><a href="">新媒体运营</a></li>
				<li><a href="">软件测试</a></li>
				<li><a href="">大数据</a></li>
				<li><a href="">云计算</a></li>
			</ul>
		</div>
	</body>
</html>

7、浮动和样式转换

浮动和设置display都可以实现块级元素的水平排列，那它们有什么异同呢？

相同点：

都可以将元素横排显示

不同点：

float后的元素之间没有默认外边距，inline-block会有2px的默认外边距。（解决办法：在两个标签之间不要加空格）
float后的属性会脱离标准流，因此对相邻的元素会有影响。inline-block不会脱标，因此不影响其相邻元素。
如果只是想让页面以横排显示，使用display:inline-block即可。但如果要实现左对齐和右对齐，就必须使用浮动。

posted @ 2020-08-02 16:57 张瑞丰阅读(123) 评论(0) 编辑收藏举报

刷新页面返回顶部

Day02 CSS样式

Day02 CSS样式

知识回顾

一、DIV + CSS布局

1、DIV简介

2、CSS简介

二、CSS引入方式

1、行内样式

2、内嵌样式

3、外部样式

三种引入方式的对比

1、使用频率

2、优先级别

三、CSS语法规则

1、语法规则

CSS中的注释

四、CSS选择器

1、标签选择器

2、类选择器

3、id选择器

4、后代选择器（拓展）

5、子元素选择器（拓展）

五、CSS中的常见样式

1、字体样式

2、文本样式

3、超链接伪类

4、边框样式

4.1、简写形式：

4.2 、单独设置某个方向的边框

4.3、单独设置某个方向的边框的简写形式

4.4、同时设置四个方向边框样式的简写形式

4.5、利用圆角边框绘制圆形和矩形

5、背景样式

5.1、背景图片的平铺

5.2、背景图片的定位

5.3、背景图片大小的设置

六、盒模型

1、盒模型中的属性

2、内边距和外边距

2.1、内边距

2.2、外边距

3、盒模型中的宽度和高度

3.1、盒模型的宽度

3.2、盒子的高度

4、外边距合并现象

5、清空默认边距

1、为什么要清空默认边距？

2、如何清空默认边距？

6、通过外边距实现盒子的水平居中

七、布局样式

1、什么是网页布局

2、标准流

2.1、网页元素的分类

2.1.1、块级元素

2.1.2、行内元素

2.1.3、行内块级元素

2.2、标准流的排版

3、浮动流

3.1、什么是浮动流

3.2、浮动流的特点

3.3、如何设置浮动

3.4、脱标现象演示

3.5、浮动元素的贴靠现象

3.6、浮动元素的字围现象

3.7、浮动元素的高度问题

3.8、浮动练习

3.9、浮动练习PLUS

3.10、清除浮动

八、定位技术

1、什么是定位技术

2、四种定位方式

3、相对定位

4、绝对定位

5、固定定位

九、样式转换

1、如何实现样式转换

2、display:none;实现隐藏元素

3、行内元素转换为块级元素

4、块级元素转换为行内块级元素

5、块级元素转换为行内块级元素

2、`display:none;`实现隐藏元素