CSS总结-DX的笔记

最新推荐文章于 2024-11-14 10:16:35 发布

钊兵

最新推荐文章于 2024-11-14 10:16:35 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/qq_43528471/article/details/125410290

版权

Java Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

认识CSS

css的任务就是控制页面元素的显示效果

1.使用css之前必然需要将页面写好
2.如果样式写好了,需要使用选择器将样式与元素关联起来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p {
			color: red;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<!-- 
		需求:将p标签中的文字颜色设置为红色,文字大小设置为30像素
		实现:
			1.css代码写在style的标签中,该标签定义在head中
			2.在style标签中使用选择器定义样式

		css语法: 选择器 {样式属性1: 属性值;样式属性2: 属性值;}

		案例中使用的是标签选择器:
			标签选择器的特征就是使用标签名称作为选择器的名称,页面中所有符合这个选择器的标签都会被作用到
	 -->
	 <p>这是我们的第一个css案例</p>
	 <p>这是我们的第一个css案例</p>
	 <div>这是我们的第一个css案例</div>
</body>
</html>

文字相关的样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		h2 {
			font-size: 50px;
			font-family: "楷体","宋体";
		}
		div {
			/*font-size: 14px;
			font-weight: 700;
			font-style: oblique;*/
			font: oblique 700 30px "宋体";
		}
	</style>
</head>
<body>
<!-- 
文字相关的样式都有:
1.文字大小
	font-size: 设置文字显示的大小
		值: 正整数 单位
		单位:
			绝对单位: 开发中一般不使用绝对单位
				cm 厘米  m米  英寸
			相对单位: 开发中一般使用相对单位
				px像素  em当前容器内一个文字的大小
	注意:
		1.如果没有设置文字大小,一般默认是16px
		2.如果没有要求的情况下,网站整体风格字体大小一般为14或者16
		3.设置字体大小的时候,一般使用偶数.
2.文字字体
	font-family: 设置文字的字体
		注意:
			1.我们设置的字体必须是运行网页的电脑的操作系统支持的才可以
			2.还得符合响应的语言
			3.如果没有设置字体,默认使用微软雅黑
			4.字体如果设置有误,默认使用微软雅黑显示
			5.字体允许设置多个,多个字体之间使用英文的","进行分割,如果前面的字体不支持,后面字体将会生效,如果都不支持,默认使用微软雅黑
			6.如果字体名称中由多个英文单词组成或者字体名称是中文的,需要在字体名称前后加上""
3.文字是否是粗体
	font-weight:字体的粗细
		值:
			1.使用正整数
				100~900之间 100的倍数 一共9个值
				100~300字体变细  400~500字体默认值  600~900字体加粗
			2.使用英文单词
				normal 默认值、bold、bolder 字体加粗、lighter 字体变细
		注意:正常使用中,设置字体为粗体的时候一般设置为700
4.文字是否是斜体
	font-style:设置文字使用倾斜
		normal：默认值，浏览器会显示标准的字体样式。
		italic：浏览器会显示斜体的字体样式。
		oblique：浏览器会显示倾斜的字体样式。
5.文字样式的连写:
	font:可以一次设置4个文字样式
	语法: 选择器{font: font-style  font-weight  font-size/line-height  font-family;}
	注意:
		1.如果省略属性值,必须存在font-size和font-family
 -->
	 <h2>这是一个标题</h2>
	 <div>font-size如果没有设置,原始大小是多少?</div>
</body>
</html>

基础选择器

<style type="text/css">
    * {
		color: blue;
	}
	/*p {
		color: red;
	}*/
	.p1,.span1 {
		font-size: 30px;
	}
	.p2 {
		font-weight: 700;
	}
	#p3 {
		font-style: oblique;
	}
	/*.span1 {
		font-size: 30px;
	}*/
</style>
<!-- 
基础选择器:
	1.标签选择器
		语法:使用标签名称作为选择器的名称
		优点:页面中所有的相同的标签都会被作用到
		缺点:对于相同的标签无法进行差异化的设置
	2.类名选择器
		语法: .类名 {属性: 值;}
		优点:差异化设置非常方便
		注意:
			1.元素的class属性可以指定多个类名,类名之间使用空格区分
			2.如果两个类选择器中样式一致,我们可以在声明选择器的时候,统一设置,多类名之间使用英文','分割
	3.id选择器
		语法:#id值 {属性:值;}
		注意:
			1.在使用效果上,id选择器与类名选择器基本类似
			2.类名可以重复设置,但是id值在同一个页面中不能重复,无法实现较好的代码复用性,使用的次数较少
	4.通配符选择器
		语法: * {属性: 值;}
		作用:页面中所有元素都会被作用到
		注意:
			1.使用的时候,一般页面中共性的样式才会使用这个选择器
			2.这个选择器优先级太低,样式容易被覆盖
-->
<p id="p3">标签选择器1</p>
<p class="p1">标签选择器2</p>
<div class="p1 p2">类名选择器</div>
<span class="span1">多类名选择器</span>

文本颜色

<style type="text/css">
	p {
		color: rgb(255,0,255);
		/*color: #ff00ff;*/
	}
</style>
<!-- 
color:设置文本的颜色
值:
	1.英文单词
		red,blue,black,gray,green.....
	2.16进制数值
		语法:#ffffff  #后紧跟6个16进制数值
		颜色:
			是由3个原色组合而成rgb  red green blue
			所以每个原色在描述的时候使用数值描述,范围是0-255

		注意:
			1.#ff00ff	-> #f0f  可以简写
			2.16进制值不区分大小写 #FF00FF 和 #ff00ff一样效果
	3.10进制数值
		语法: rgb(255,255,255)

上面描述了值的3种写法,开发中一般使用16进制写法
-->

<p>文本的颜色</p>

常用属性

<style type="text/css">
	div {
		width: 500px;
		/*line-height: 50px;*/
		border: 1px solid black;
		font-size: 30px;
		text-indent: 2em;
	}
	p {
		width: 500px;
		height: 500px;
		border: 1px solid black;
		line-height: 500px;
		text-align: center;
	}
</style>
<!-- 
	line-height:行高
	注意:
		1.文字我们一般设置大小为14或者16像素,行高一般比文字大7~8个像素
		2.行高我们可以实现文字在一个容器中垂直居中的效果,将文字的行高设置为容器的高度一致

	text-aglin:文本的水平方向的对齐方式
		值:
			left 默认值
			center
			right
	text-indent: 文本开始时缩进,值一般是有em,表示段落开始缩进几个文字
 -->

 <div>line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。</div>

 <p>这是一段文字</p>

 <div>
 	属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高
 </div>

复合选择器

<style type="text/css">
	/*div span {
		color: red;
	}*/

	/*#div1 span {
		color: red;
	}*/

	#div1 > span {
		color: green;
	}
</style>

<!-- 
	什么是复合选择器:基本选择器进行组合实现特殊功能的选择器
	
	后代选择器:
		语法: 父元素选择器 后代元素选择器 {属性: 值;}
		注意:
			1.无论是父元素还是子元素选择器只要是基础类型选择器就可以
			2.后代元素包含儿子元素和孙子元素

	子类选择器:
		语法: 父元素选择器 子元素选择器 {属性: 值;}
		注意:
			1.无论是父元素还是子元素选择器只要是基础类型选择器就可以
			2.只能选中儿子元素

	复合选择器能否写多层?可以写多级选择器.
 -->
 <div id="div1">
 	<p>
 		<span>这是一段文字1</span>
 	</p>
 	<span>这是一段文字2</span>
 </div>
 <span>这是一段文字3</span>

总结练习

在不修改以上代码的前提下，完成以下任务：
1.链接登录的颜色为红色。
2.主导航栏里面的文字颜色为绿色。
3.主导航栏和侧导航栏里面文字都是20像素并且是宋体。
4.收藏本站要求字体加粗。

<style type="text/css">
	.sitenav .site-r a {
		color: red;
	}
	.nav {
		color: green;
	}
	.nav,.sitenav {
		font-size: 20px;
		font-family: "宋体";
	}
	.nav > div {
		font-weight: 700;
	}
</style>

<div class="nav">    <!-- 主导航栏 -->
    <ul>
        <li>公司首页</li>
        <li>公司简介</li>
        <li>公司产品</li>
        <li>联系我们</li>
    </ul>
    <div> 收藏本站 </div>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-r"><a href="#">登录</a></div>
</div>

标签显示模式

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	div {
		width: 200px;
		height: 200px;
		line-height: 200px;
	}
</style>
<!-- 
	html中的标签根据显示模式划分,为3类:块元素,行内元素,行内块元素

	块元素:
		每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
		常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
		块级元素的特点：
		（1）总是从新行开始
		（2）高度，行高、外边距以及内边距都可以控制。
		（3）宽度默认是容器的100%
		（4）可以容纳内联元素和其他块元素。

	行内元素:
		行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
		常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
		行内元素的特点：
		（1）和相邻行内元素在一行上。
		（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
		（3）默认宽度就是它本身内容的宽度。
		（4）行内元素只能容纳文本或者其他行内元素。（a特殊）

	注意：
		1.只有文字才能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
		2.链接里面不能再放链接。
	行内块元素:
		在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
		行内块元素的特点：
		（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
		（2）默认宽度就是它本身内容的宽度。
		（3）高度，行高、外边距以及内边距都可以控制。


	块元素,行内元素和行内块元素的区别:
	1.块元素独占一行,可以设置宽度和高度,一般用于布局
	2.行内元素不会独占一行,但是不能设置宽度和高度,一般用于修饰文本内容
	3.行内块元素不会独占一行,但是可以设置宽度和高度
 -->

 <div>这是一个块元素</div>
 <div>这是一个块元素</div>

行内元素

<style type="text/css">
	span {
		width: 200px;
		height: 200px;
	}
</style>

<span>span1</span><span>span2</span>

行内块元素

<style type="text/css">
	input {
		width: 200px;
		height: 100px;
	}
	div {
		width: 200px;
		height: 200px;
		background-color: green;
	}
</style>

<input type="text"><input type="text"><input type="text"><span>行内元素</span><br>
<img src="images/1.png" alt=""><span>行内元素</span>

<div></div>

显示效果的转换

<style type="text/css">
	div {
		width: 200px;
		height: 200px;
		display: inline-block;
	}
	.div1 {
		background-color: red;
	}
	.div2 {
		background-color: blue;
	}
	.div3 {
		background-color: green;
	}

	span {
		width: 200px;
		height: 200px;
		display: inline-block;
		/*display: block;*/
	}
	.span1 {
		background-color: red;
	}
	.span2 {
		background-color: blue;
	}
	.span3{
		background-color: green;
	}
</style>

<!-- 
	标签的显示效果可以进行转换:
	display:
		none:不显示 隐藏
		block: 按照块元素的特征显示
		inline:按照行内元素的特征显示
		inline-block: 按照行内块元素的特征显示
	1.块元素转换为行内元素
		display: inline;
	2.块元素转换为行内块元素
		display: inline-block;
	3.行内元素转换为块元素
		display: block;
	4.行内元素转换为行内块元素
		display: inline-block;
 -->
 
<div class="div1">1</div><div class="div2">2</div><div class="div3">3</div>
<span class="span1">1</span><span class="span2">2</span><span class="span3">3</span>

腾讯导航

<style type="text/css">
	/*清除页面中所有元素的内外边距*/
	* {
		margin: 0;
		padding: 0;
	}

	.nav-outer {
		height: 50px;
	}
	.nav-inner {
		width: 1400px;
		height: 50px;
		margin: 0 auto;/*将里面的div水平居中*/
		background-color: #1479d7;
		padding-left: 20px;
	}
	.nav-outer ul {
		list-style: none; /*去除ul中的自带样式*/
	}
	.nav-outer ul li {
		display: inline-block;
		width: 79px;
		height: 50px;
		text-align: center;
		line-height: 50px;
	}
	.nav-outer ul li a {
		color: white;
		text-decoration: none;/*去除超链接下划线*/
		padding: 5px;
		font-size: 20px;
	}
	.nav-outer ul li a:hover {
		color: #1479d7;
		background-color: lightgray;
	}
</style>

<!-- 导航栏 -->
<div class="nav-outer">
	<div class="nav-inner">
		<ul>
			<li><a href="#">新闻</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">新闻</a></li>
		</ul>
	</div>
</div>

伪类选择器

<style type="text/css">
	div {
		width: 200px;
		height: 200px;
		background-color: red;
	}
	div:hover {
		background-color: green;
	}
	a:link {
		color: black;
	}
	a:visited {
		color: orange;
	}
	a:hover {
		color: green;
	}
	a:active {
		color: pink;
	}
</style>

<!-- 
	伪类选择器:伪类可以用于文档状态的改变、动态的事件等，例如用户的鼠标点击某个元素、未被访问的链接。
	:link	伪类将应用于未被访问过的链接
	:hover	伪类将应用于有鼠标指针悬停于其上的元素。
	:active	伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
	:visited	伪类将应用于已经被访问过的链接
	:focus	伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）

	链接伪类，他们规定执行有顺序的，不能随便更改位置：
	要按照 :link -> :visited -> :hover -> :active 的顺序。
 -->

<div></div><a href="#">点我百度一下</a>

文本修饰

<style type="text/css">
	span {
		text-decoration: overline;
	}
	a {
		text-decoration: none;
	}
</style>

<!-- 
	文本修饰:text-decoration
	none : 　无装饰
	underline : 　下划线
	line-through : 　删除线
	overline : 　上划线 
 -->
<span>文本修饰</span><a href="#">去除下划线</a>

CSS书写位置

<!-- 内嵌式 -->
<style type="text/css">
	p {
		color: blue;
	}
</style>

<!-- 外链式 -->
<link rel="stylesheet" type="text/css" href="css/myCss.css">

<!-- 
	css代码的书写位置其实有3种:
		1.行内样式
			在html标签的style属性中写css代码
			优点:这个标签专用,意味着这个样式的优先级最高,等效于id选择器定义的样式
			缺点:在同一个页面内无法实现css代码的复用
		2.内嵌样式
			在head标签中,使用style标签定义的样式
			优点:实现了在一个页面内样式的复用
			缺点:
				1.样式优先级不高
				2.无法实现在整个网站的所有页面中实现样式的复用
		3.外链样式
			将css代码定义在外部的css文件中,在需要使用样式的页面中使用link标签引入即可使用
			优点:实现整个网站所有页面的css代码复用

	工作中我们使用哪种?
	1.所有网页都使用的相同样式使用外链样式较好
	2.这个网页独有的样式使用内嵌式比较方便
 -->

 <p style="color: red;font-size: 30px;">行内样式</p>
 <p>内嵌样式</p>

CSS优先级

<style type="text/css">
	p {
		color: blue!important;
	}
	.div2 {
		color: green;
	}
	.div1 {
		color: red;
	}
</style>

<!-- 
	css优先级就是使用不同选择器定义的样式,如果出现冲突哪个优先级高哪个生效
	1.使用了 !important声明的规则。
	2.内嵌在 HTML 元素的 style属性里面的声明。
	3.使用了 ID 选择器的规则。
	4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
	5.使用了元素选择器的规则。
	6.只包含一个通用选择器的规则。

	当优先级相同,但是样式有冲突的情况下,谁后定义,谁生效
 -->

 <p style="color: red;font-size: 30px;">行内样式</p>
 <div class="div1 div2">相同优先级样式冲突</div>

背景

<style type="text/css">
	div {
		/*width: 200px;*/
		height: 1800px;
		/*background-color: red;
		background-image: url(images/1.png);
		background-repeat: no-repeat;
		background-position: right top;*/  /*前面值是x轴后面值是y轴*/
		/*background-attachment: scroll;*/
		background: green url(images/1.png) no-repeat scroll center top;
	}
</style>

<!-- 
	background-color		背景颜色
	background-image		背景图片地址
	background-repeat		是否平铺
	background-position		背景位置
	background-attachment	背景固定还是滚动


	background-color: 设置背景色,值写法与文本颜色的写法一致

	background-image		背景图片地址
	注意:默认情况下,图片会将容器填充满

	background-repeat		是否平铺
		no-repeat:   不平铺
		repeat-x:    将x轴铺满
		repeat-y:    将y轴铺满

	background-position		背景位置
		值:
			1.方位名词      left center right top center bottom
			2.百分数        10%  50&
			3.数值+像素     100px 200px

	background-attachment	背景固定还是滚动
		scroll: 背景随着容器的滚动而滚动
		fixed:  背景固定在屏幕的指定位置,不会随着容器的滚动而滚动


	background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
 -->

 <!-- <div><a href="#">超链接</a></div> -->

 <div>背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜色背景颜背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动背景固定还是滚动</div>

盒子模型

<style>
	p {
		height: 300px;
		width: 300px;
		background-color: green;
	}
</style>

<!-- 
	盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
	每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

	内边距:设置内容与容器边框之间的距离,通过调整内边距可以将内容固定在容器的某个位置
	边框:容器的边,可以指定宽度和样式以及颜色
	外边距:设置相邻的元素之间分开的距离
 -->

 <p>这是一个盒子</p>

边框

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*border-top: 5px double red;
		border-bottom: 5px double red;*/
		border: 5px solid red;
	}
</style>

<!-- 
	边框的设置:
		border-left:
		border-right:
		border-top:
		border-bottom:

		值的设置: 宽度 样式 颜色
		宽度: 数值+像素
		样式:
			none：没有边框即忽略所有边框的宽度（默认值）
			solid：边框为单实线(最为常用的)
			dashed：边框为虚线
			dotted：边框为点线
			double：边框为双实线
		颜色: 边框的颜色,与 文本颜色的设置基本一致
 -->

<div></div>

内边距

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
		border: 1px solid black;
	}

	li {
		height: 50px;
		/*line-height: 30px;*/
		border: 1px solid black;
		/*padding-left: 50px;
		padding-top: 50px;*/
		/*padding: 10px 20px 30px 40px;*//*上右下左*/
		/*padding: 10px 20px 30px;*//*上 左右 下*/
		/*padding: 10px 20px;*//*上下 左右 */
		padding: 10px;/*上下左右*/
	}
</style>

<!-- 
	内边距:边框与内容之间的距离
		padding-left:左内边距
		padding-right:右内边距
		padding-top:上内边距
		padd-bottom:下内边距

		padding: 上下左右内边距统一设置

 -->

<ul>
	<li>张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三</li>
	<li>李四</li>
</ul>

外边距

<style type="text/css">
	div {
		width: 200px;
		height: 200px;
		display: inline-block;
	}
	.one {
		background-color: red;
		/*margin-bottom: 50px;*/
		margin-right: 50px;
	}
	.two {
		background-color: blue;
	}
</style>

<div class="one"></div><div class="two"></div>

外边距实现盒子的垂直水平居中

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.outer {
		width: 400px;
		height: 400px;
		background-color: red;
		border: 1px solid red;
	}

	.inner {
		width: 200px;
		height: 200px;
		background-color: green;
		/*margin-top: 100px;
		margin-bottom: 100px;
		margin-left: 100px;
		margin-right: 100px;*/
		/*margin: 100px;*/
		margin: 100px auto;

		/*
			注意:如果使用auto实现水平居中前提是父元素的盒子必须有宽度,子元素盒子有宽度;
			(父宽度 - 子宽度)/2
		*/
	}
</style>

<div class="outer">
	<div class="inner"></div>
</div>

相邻块元素垂直外边框的合并

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 200px;
		height: 200px;
	}
	.one {
		background-color: red;
		margin-bottom: 30px;
	}
	.two {
		background-color: blue;
		margin-top: 70px;
	}
</style>

<!-- 
	当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
	解决办法:解决不了,避免这种情况出现
 -->
<div class="one"></div>
<div class="two"></div>

嵌套块元素垂直外边框的合并

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.one {
		width: 400px;
		height: 400px;
		background-color: red;
		margin-top: 30px;
		/*border: 1px solid black;*/
		overflow: hidden;
	}
	.two {
		width: 100px;
		height: 100px;
		background-color: blue;
		margin-top: 70px;
	}

	.three {
		width: 100px;
		height: 100px;
		border: 1px solid red;
		overflow: scroll;
		padding: 20px;
	}
</style>

<!-- 
	对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
	解决办法:
		1.给父元素添加边框
		2.给父元素添加overflow: hidden;
 -->
<div class="one">
	<div class="two"></div>
</div>

<div class="three">对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素对于两个嵌套关系的块元素</div>

盒子模型案例

在这里插入图片描述

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	div {
		width: 220px;
		height: 306px;
		margin: 0 auto;
		border: 1px solid #2c7a1c;
		background-image: url(images/bg.gif);
		padding: 10px;
	}
	h2 {
		color: white;
		font-size: 20px;
		font-family: "黑体";
		border-left: 4px solid #c6e34d;
		padding-left: 5px;
		margin-bottom: 5px;
	}
	ul {
		background-color: white;
		padding: 0 10px;
		list-style: none;
	}

	li {
		border-bottom: 1px dashed black; 
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		background-image: url(images/tb.gif);
		background-repeat: no-repeat;
		background-position: 0 center;
		padding-left: 17px;
	}

	a {
		text-decoration: none;
		color: #335897;
	}
</style>

<div>
	<h2>爱宠知识</h2>
	<ul>
		<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>
		<li><a href="#">为什么每次大小便后,会用脚踢土?</a></li>
		<li><a href="#">为什么每次大小便后,会用脚踢土?</a></li>
		<li><a href="#">为什么每次大小便后,会用脚踢土?</a></li>
		<li><a href="#">为什么每次大小便后,会用脚踢土?</a></li>
	</ul>
</div>

<img src="images/2.jpg" alt="图片样例">

鼠标变小手

<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		cursor: pointer;
	}
</style>

<!-- 
	cursor其他取值    
		auto                    ：标准光标    
		default                 ：标准箭头    
		pointer, hand            ：手形光标    
		wait                     ：等待光标    
		text                      ：I形光标    
		vertical-text          ：水平I形光标    
		no-drop                ：不可拖动光标    
		not-allowed           ：无效光标    
		help                     ：帮助光标    
		all-scroll         ：三角方向标    
		move                     ：移动标    
		crosshair           ：十字标
 -->
<div></div>

浮动

<style type="text/css">
	img {
		float: left;
	}
</style>

<!-- 
		现阶段,浮动一般用于布局
		浮动真正出现的原因是为了实现文字环绕图片的效果

	 -->


	 <p>
	 	<img src="images/1.jpg" alt="">浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果浮动真正出现的原因是为了实现文字环绕图片的效果
	 </p>

浮动的案例

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	.outer {
		width: 800px;
		height: 800px;
		border: 1px solid black;
		margin: 0 auto;
	}

	.one,.two,.three {
		width: 200px;
		height: 200px;
	}

	.one {
		background-color: red;
		float: left;
	}
	.two {
		background-color: blue;
		/*width: 100px;
		height: 100px;*/
		float: left;
	}
	.three {
		background-color: green;
		float: right;
	}
</style>

<!-- 
	浮动: float
		值:
			none  不浮动
			left  向左浮动
			right 向右浮动
		浮漏特

	一个页面元素默认情况下是不浮动的,正常情况下页面元素按照从上向下,从左向右的顺序排列元素,这种排列规则我们称为普通流(标准流)

	浮动的元素会脱离普通流,在标准流中失去了原有的位置

	1.如果父元素中有多个子元素,其中一个子元素浮动,这个子元素前面如果存在兄弟元素,浮动的元素跟在前面没有浮动的元素后面
	2.如果父元素中存在多个子元素,子元素要么都浮动,要么都不浮动
	3.浮动的元素不能脱离父元素的范围
	4.浮动的元素自动按照行内块元素的特征显示
 -->

 <div class="outer">
 	<div class="one"></div>
 	<div class="two"></div>
 	<div class="three"></div>
 </div>

定位

一个元素直接指定在页面上的位置,无需布局
如果想要实现定位:
1.定位模式
position: 指定定位模式
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
2.偏移量
x轴偏移量
y轴偏移量
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离

相对定位

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	.outer {
		width: 800px;
		height: 800px;
		border: 1px solid black;
		margin: 0 auto;
	}

	.one,.two,.three {
		width: 200px;
		height: 200px;
	}

	.one {
		background-color: red;
	}
	.two {
		background-color: blue;
		position: relative;
		/*bottom: 0;
		right: 300px;*/
		top: 0;
		left: -300px;
	}
	.three {
		background-color: green;
	}
</style>

<!-- 
	position: relative;  相对定位
	1.相对定位的参照物是自身原有的位置
	2.相对定位的元素不会脱离标准流
 -->
<div class="outer">
 	<div class="one"></div>
 	<div class="two"></div>
 	<div class="three"></div>
 </div>

绝对定位

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	.outer {
		width: 800px;
		height: 700px;
		border: 1px solid black;
		margin: 100px auto;
		position: relative;
	}

	.one,.two,.three {
		width: 200px;
		height: 200px;
	}

	.one {
		background-color: red;
		position: absolute;
		top: 0;
		left: 0;
		/*z-index: 2;*/
	}
	.two {
		background-color: blue;
		position: absolute;
		top: 100px;
		left: 100px;
		/*z-index: 2;*/
	}
	.three {
		background-color: green;
		position: absolute;
		top: 200px;
		left: 200px;
		/*z-index: 1;*/
	}
</style>

<!-- 
	position: absolute;  绝对定位

	1.绝对定位的参照物是已经定位的父元素,如果父元素没有定位,会查找已经定位的父元素的父元素,一直向上查找,直到浏览器
	2.绝对定位的元素脱离标准流,失去自身原有位置
	3.绝对定位的元素一般直接父元素都要定位,从使用的方便性来讲,常常使用子绝父相,父元素一般只给出定位模式,不去指定偏移量

	z-index:当多个定位的元素叠加在一起时,如果需要改变层叠的顺序,可以对定位的元素使用z-index属性指定叠加顺序
 -->
<div class="outer">
 	<div class="one"></div>
 	<div class="two"></div>
 	<div class="three"></div>
</div>

固定定位

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	img {
		position: fixed;
		right: 0;
		bottom: 0;
	}
</style>

<!-- 
	position: fixed;  固定定位
	1.固定定位的参照物是浏览器窗口
	2..固定定位的元素脱离标准流,失去自身原有位置
 -->
<img src="images/2.jpg" alt="">
<p>在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式
</p>
<p>在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，pos中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式
</p>
<p>在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式
</p>
sition属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，pos中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式
</p>
<p>在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式在CSS于定义元素的定位模式在CSS中，position属性用于定义元素的定位模式
</p>