03.CSS基础一

痛定思痛。 2022-05-24 12:24 168阅读 0赞

# Css的起源 #

与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设备设置边框；允许改变文本的大小

# 1.Css概念： #

CSS指层叠样式表(Cascading Style Sheets)（级联样式表）  
Css是用来美化html标签，相当于给页面化妆。

# 2.选择器(重点） #

## 2.1写法 ##

选择器是一个选择标签的过程。  
写法：选择器\{属性:值;\}**(;告诉编译器结束）**

属性            解释
    Width:20px;      宽
    Height:20px;     高
    Background-color:red   背景颜色
    font-size:24px;    文字大小
    text-align:left|center|right 内容的水平对齐方式
    Text-indent:2em;    首行缩进  em是一个汉字的大小
    color：文字颜色；
    Width:20px;      宽
    Height:20px;     高
    Background-color:red   背景颜色
    font-size:24px;    文字大小
    text-align:left|center|right 内容的水平对齐方式
    Text-indent:2em;    首行缩进  em是一个汉字的大小
    color：文字颜色；

###  ###

## 2.2 基础选择器 ##

### 2.2.1 标签选择器（写在head里面）**（一打一大片！）** ###

写法：标签\{属性:值;\}会把页面所得的标签都选中  
颜色的显示方式（可以通过工具吸取颜色，神奇！）  
**1.直接写颜色的名称  
2.十六进制显示颜色** 0-9, a-f

例如 \#000000;黑色，**前两位代表red,中间代表green，后面两位代表blue**。

RGB,1667万种颜色。越接近0颜色越深，\#000黑色 \#eee灰色

**3.RGB表示颜色：**例如：color:reb(0,0,0)黑色

**4.RGBA**  A代表alpha，不透明度 ，值0-1,1是什么也看不到，0是没有透明效果；

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	
    	<style type="text/css">
        /*标签选择器*/
        div{
        	font-size:20px;
        	color: rgb(100,100,100);
        	background-color:yellow;
        	width:200px;
        	height:200px;
        }
        p{
        	font-size:15px;
        	color:#F40;
        	background-color:pink;
        	width:200px;
        	height:200px;
        }
    	</style>
    </head>
    <body>
        <h1>the moon of mystery月球之谜</h1>    
    	<div>1972 was the year a great love affair ended.一段美丽的爱情在1972年走到终点</div>
    	<div>The human race fell out of love with the moon.人类对月亮的爱意荡然无存</div>
    	<p>It was a classic case of familiarity breeds contempt.这是因了解而分开的典型范例.There'd been six moon landings, and we'd grown bored.六次登月任务后，我们开始心生厌烦.To this day no-one has been back.此后再也没人去过月球The moon did turn out to be dull.月球的确很乏味</p>
    
    </body>
    </html>

## 2.2.2 类选择器（重点）（指谁打谁） ##

写法：**.**自定义类名\{属性:值;属性:值;\}  
特点：**谁调用谁生效**， class="调用名1 调用名2"

### (自定义类名的规则： ###

1.不能纯数字，或以数字开头定义类名；  
2.不能纯使用特殊符号或者特殊符号开头；  
3. **\_**可以作为类名；  
4.不建议使用汉字来命名类名；

5.不推荐使用属性或者属性的值来定义类名**)**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	    .box{
    	    	font-size: 20px;
    	    	color: #ff0000;
    	    	width: 300px;
    	    	height: 200px;
    	    	background-color: #999;
    	    }
    	    .miss{
    	    	text-indent: 2em;
    	    	text-align: right;
    	    }
    	</style>
    </head>
    <body>
    	<div class="box miss">It's, what do you see,各位也看到了a barren colourless landscape
           那是一片散布着with fragmentary rock all over the place.碎石的荒芜大地</div>
    	<div class="miss">Our eyes wandered to other more intriguing worlds.
           我们不安于世的目光转向其他更引人入胜的世界</div>
    	<p class="box">Throughout the solar system scientists found many more moons
             科学家在太阳系中发现许多卫星</p>
    	<p>that seemed far more exciting than our own dull pile of grey rock.
             而它们看来比咱们灰色无聊的月球刺激得多</p>
    	<span class="box"></span>
    	<h1 class="box">你好<h1>
    
    </body>
    </html>

### 2.2.3 ID选择器 ###

### 写法 ###

### \#自定义名称\{属性：值\} ###

特点：一个ID选择器在一个页面**只能使用一次**，如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。

**一个标签只能调用一个ID选择器。**

**一个标签可以同时调用类选择器和ID选择器。**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
        <style type="text/css">
        	#box{
        		font-size: 40px;
        		color: rgb(0,0,233);
        		background-color: rgb(255,255,0);
        	}
        </style>
    </head>
    <body>
    	<div id="box">For 35 years our own moon has been abandoned.</div>我们自己的月亮被打入冷宫35年
    	<div> But now all that's about to change.但这一切即将改变</div>
        <p>This is the story of our love affair with the moon.
        这是我们与月球间的爱情故事</p>
    
    </body>
    </html>

### 谷歌小案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	.G{
    		font-size: 200px;
    		color: #000099;
    	}
    	.o1{
    		font-size: 200px;
    		color: #990000;
    	}
    	.o2{
    		font-size: 200px;
    		color: orange;
    	}
    	.g1{
    		font-size: 200px;
    		color: orange;
    	}
    	.l{
    		font-size: 200px;
    		color: #009900;
    	}
    	.e{
    		font-size: 200px;
    		color: #990000;
    	}
    	</style>
    </head>
    	<span class="G">G</span>
    	<span class="o1">o</span>
    	<span class="o2">o</span>
    	<span class="g1">g</span>
    	<span class="l">l</span>
    	<span class="e">e</span>
    </body>
    </html>

**2.2.4 通配符选择器（全打）**

**\*\{属性：值；\}，\*代表所有标签都用到此样式**

**不推荐使用，增加浏览器和服务器负担。**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			font-size: 20px;
    			color: green;
    			background-color: yellow;
    			
    		}
    	</style>
    </head>
    <body>
    	<div>Our love affair with the moon is an ancient one.
    我们对月亮的爱恋由来已久</div>
    	<div>The moon has looked down on the whole of human history.
    月亮默默地俯视着人类历史的上演</div>
    	<p>And throughout history, we have looked up at it.
    而从古至今，我们也一直仰望着它</p>
    	<p>It has inspired great myths and legends.
    月亮激发了伟大的神话与传说</p>
    	<span>We've feared it, and we've worshipped it.
    我们对月亮是又敬又怕</span>
    </body>
    </html>

### 2.2.5复合选择器 ###

定义：两个或者两个以上的基础选择器通过不同的方式连接在一起。

**①交集选择器**

**标签+类（ID）选择器\{属性：值； \}**

**特点：既要满足使用的标签，也要满足使用了类（id选择器）**

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	/*.box{}类选择器*/
    	  .box{
    		font-size: 50px;
          		}
    	div.box{
    		color: red;
    	}
    	/*#miss{}id选择器*/
    	#miss{
    		font-size: 50px;
    	}
    	span#miss{

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
        .box{
        	font-size: 40px;
        	color: red;
        }
        .box span{
        	background-color: pink;
        }
        div span{
        	font-size: 30px;
        }
    	</style>
    </head>
    <body>
    	<div class="box">
           <p><span>We know very little about these people,
    我们对这群人所知不多</span></p>
    	</div>
    	<div>
    but they've left us an enduring symbol of their profound
    但他们与月亮刻骨铭心的关系</div>
    
    </body>
    </html>

width: 400px;height: 300px;background-color: \#004400;\}</style></head><body><div class="box">Five thousand years ago, 五千年前</div> <p class="box">in a remote corner of the Outer Hebrides,一个新石器时代的聚落</p><span id="miss">a Neolithic community made its home.在外赫布立群岛的偏远角落安顿下来</span></body></html>

**②后代选择器（重点）**

**写法：选择器+空格+选择器+空格+选择器+......\{属性：值；\}**

**特点：无限隔代**

**③子代选择器（很少用）**

选择器>选择器\{属性：值；\}

选中直接下一代元素。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	div>span{
    			color:red;
    			font-size:40px;
    		}
        p>span{
        	color:green;
        	font-size:60px;
        }
    
    	</style>
    </head>
    <body>
    	<div>
    		<p><span>熬夜做实验好累啊</span></p>
    		<span>感觉快挂了</span>
    
    	</div>
    </body>
    </html>

**④并集选择器**

**选择器+，+选择器+，+选择器\{属性：值；\}**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	.dd,h1,span,p,div{
    		font-size: 30px;
    		color: #888;
    		background-color: pink;
    	}
    	.dd,#xx{
    		font-size: 40px;
    		color:blue;
    	}
    	</style>
    </head>
    <body>
    	<h1 class="dd">不眠之夜</h1>
    	<p id="xx">硫磺实验，全身散发着DMDS的臭味</p>
    	<div>转行的念头很迫切，所以抓紧时间学</div>
    	<span>希望自己不要被累死</span>
    	<p>因为那样太丢人~但是，结束或许也是一种解脱~</p>
    	<h1>真的太累了，我真的应该学会保护和照顾自己</h1>
    
    </body>
    </html>

## **3.文本元素** ##

**3.1属性**

**font-size:16px；文字大小**

**font-weight：700；文字的粗细（100-900），不推荐使用font-weight:bold;**

**font-family: 微软雅黑；文字字体**

**font-style: normal （正常）| italic（斜体）;**

**line-height: 40px;行距**

**3.2文本属性连写**

**font: font-style font-weight font-size/line-height font-family;**

**Font: italic 700 16px/40px 微软雅黑；（****按顺序写就行了****）**

**文本属性连写文字大小和字体必须写**

**3.3字体（font-family）的表达方式**

**1.直接写中文名称 2.直接写字体的英文名称3.Unicode编码，可以在console中寻找：输入escape("宋体")然后回车，将%u改成\\即可。**

**3.4.选择器的小案例**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	.content{
    		width: 900px;
    		margin: 0 auto;
    	}
    	.content h1{
    		font: 28px \5FAE%u8F6F\96C5\9ED1;
    		text-align: center;
    	}
    	.content .box{
    		text-align: center;
    
    	}
    	.time,.solution{
    		font-size: 14px;
    		text-align: center;
    	}
    	.time{
    		color: rgb(180,180,180);
    	}
    	.solution{
    		color: #990000;
    	}
    	/*属性选择器*/
    	.box input[type=text]{
    		color: red;
    	}
    	.content p{
    		text-indent: 2em;
    		line-height: 24px;
    	}
    	.content p span{
    		color: blue;
    	}
    	</style>
    </head>
    <body>
    	<div class="content">
              <h1>the mystery of moon</h1>
              <div class="box"><span class="time">2018年5月31日 21:44</span>  
              	<span class="solution">化工实验室 满身DMDS味道</span> <a href="#">收藏本文</a>  
              	<input type="text" value="请输入查询条件"><input type="button" value="搜索"></div>
              	<hr>
              	<p>Five thousand years ago,五千年前
    	           in a remote corner of the Outer Hebrides,
    				一个新石器时代的聚落<span>[微博]</span>
    				a Neolithic community made its home.
    				在外赫布立群岛的偏远角落安顿下来
    			</p>
    			<p>
    			We know very little about these people,
    				我们对这群人所知不多
    			but they've left us an enduring symbol of their profound但他们与月亮刻骨铭心的关系relationship with the moon.<span>[微博]</span>却为后世留下了恒久的象征</p>
    			<p>Islanders Margaret Curtis and her husband Ron
        		  住在岛上的玛格丽特寇提斯和她丈夫朗恩
          		 have devoted their lives to understanding that relationship.<strong>穷尽毕生精力研究这段关系</strong></p>
    	</div>
    </body>
    </html>

### 4.样式表书写位置 ###

**♦内嵌式写法**

<head>

样式表写法

</style>

</head>

**♦外链式写法**

写在head里<link rel="stylesheet" href="1.css">

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="outlink.css">
    </head>
    <body>
       <div class="box">
       	   <p>The mystery of Moon</p>
       </div>
       
       <h1 style="font-size: 30px; color: red;">1972 was the year a great love affair ended.</h1>
    </body>
    </html>

/*css为后缀文件*/
    .box{
    	font: italic 200 74px microsoft yahei;
    }

**三种写法特点：**

**☆内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离；**

**☆外链式写法，作用范围是当前站点，范围广，实现结构表现分离；**

**☆行内样式表，作用范围仅限于当前标签，范围小（不专业）**

**5.标签分类（显示方式）**

**5.1 块元素**

典型代表:Div,h1-h6,p,ul,li

特点：独占一行； 可以设置宽高；嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

**5.2 行内元素**

典型代表：span，a, strong, em ,del, ins

特点：在一行内显示；不能直接定义宽高，取决于内容的大小；

**5.3行内块元素（内联元素）**

**典型代表：input , img。效果即等于块元素也等于行内元素**

**特点：在一行上显示；可以设置宽高**

5.5块元素、行内元素

♦块元素转行内元素

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	/*块元素转换成行内元素，width和height作用失效*/
    	div,p{
    		display: inline;
    		width: 500px;
    		height: 500px;
    		background-color: red;
    	}
    	</style>
    </head>
    <body>
       <div>These stones at Callanish are a sort of lun,</div>
       <p>卡拉尼什立石阵有点像</p>
    </body>
    </html>

♦行内元素转块元素

display: block;

♦块和行内元素转行内块元素

Display: inline-block;

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	/*display: inline-block 块和行内元素转行内块元素*/
    	div,p,span,strong{
    		display: inline-block;
    		font-size: 50px;
    		background-color: #00ff00;
    	}
    
    	</style>
    </head>
    <body>
    	<div>我的第一个HTML页面</div>
    	<p>body元素的内容会显示在浏览器中</p>
    	<span>title元素的内容会显示在浏览器的标题栏中。</span>
    	<strong>br是单标签，<br/>功能是换行，已br/输入更专业</strong>
    </body>
    </html>

### 6.css三大特性 ###

**①层叠性：当多个样式作用于同一个(同一类）标签时，样式发生了冲突，总是执行后边的代码。（后面的代码层叠了前面的代码）**

**②继承性**

**继承性发生的前提是包含（嵌套关系）**

**文字颜色、大小、字体、粗细、风格、行高等一切文字属性都可以继承。**

**特殊情况：1. h系列无法继承文字大小，会呈倍数变化；**

**2. 超链接颜色为默认蓝色，无法继承文字颜色。**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>My first HTML program</title>
    	<style type="text/css">
    	/*p标签中的内容继承了div标签中的属性，因为是嵌套关系*/
    	.father{
    		color:red;
    		font: italic 700 40px microsoft yahei;
    	}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<h1>No zuo No dead</h1>
    		<h2>why you try?</h2>
    		<p style="font-size:60px;">why you try?</p>
    		<p>请仅仅把标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其他标签或CSS代替。</p>
    		<a href="#">a标签不能继承颜色</a>
    	</div>
    </body>
    </html>

**③优先级**

**默认样式<标签选择器<类选择器<id 选择器<行内样式<!important**

### **7.链接伪类** ###

a:link\{属性：值；\} a\{属性：值\}效果一样的

a:link\{属性：值；\} 链接的默认状态；

a:visited\{属性：值；\} 链接访问之后的状态；

a:hover\{属性：值；\}鼠标放在链接上显示的状态；

a:active\{属性：值；\} 链接激活的状态；

：focus\{属性：值；\}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>My second HTML exercise</title>
    	<style type="text/css">
    	/*链接默认的状态*/
    	a:link{
    		color: red;
    	}/*a{
    	 color:red
        }
    	/*链接访问之后的状态*/
    	a:visited{
    		color: green;
    	}
    	/*鼠标放在链接上显示的状态*/
    	a:hover{
    		color: yellow;
    	}
    	/*鼠标按着链接不放的状态*/
    	a:active{
    		color: pink;
    	}
    */
    	</style>
    
    </head>
    <body>
    	<a href="#">align="center"居中排列</a>
    </body>
    </html>

7.1 文本修饰

text-decoration : none | underline | line-through

链接伪类小案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	.nav{
    		background-color: #aaa;
    		height: 50px;
    		text-align: center;
    	}
    	a:link{
    		display: inline-block;
    		width:90px;
    		height:50px;
    		text-decoration: none;
    		font-size: 20px;
    		font-family: microsoft heiti;
    		color: black;
    		font-weight: 700;
    		}
    	a:hover{
    		background-color: grey;
    		text-decoration: underline;
    		color: red;
    	}
    	a.public{
    		font-weight: 700;
    		color: red;
    	}
    	
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<a href="#" class="public">天猫</a> 
    		<a href="#" class="public">聚划算</a>
    		<a href="#" class="public">超市</a>  
    		<a href="#" class="public">头条</a>
    		<a href="#">阿里旅游</a>
    		<a href="#">电器</a>
    		<a href="#">淘抢购</a>
    		<a href="#">苏宁电器</a>
    	    <a href="#">京东商城</a>
    	</div>
    </body>
    </html>

### 8.背景属性 ###

**background-color**背景颜色、**background-image**背景图片、

**background-repeat**  repeat（默认）| no-repeat（不平铺） | repeat-x（沿x轴平铺） | repeat-y（沿y轴平铺）图片平铺属性

**background-position**  left | center | right | top | bottom 背景定位

**background-attachment** 背景是否滚动  scroll （以元素为定位例如在div中，所以滚动滑轮图片不动，） | fixed（以浏览器定位，所以滚动滑轮图片随着移动，）

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>THE CHARACTER OF BACKGROUND</title>
    	<style type="text/css"> 
        .box{
        	height: 500px;
        	/*background-color: #999;
        	background-image: url("1.png");
        	background-repeat: no-repeat;
        	/*20px代表水平方向距离值，30px代表垂直方向距离值*/
        	/*background-position: bottom right;*/*/
        	background-attachment: fixed;
        	/*连写没有顺序限制，url为必写项*/
        	background:red url("1.png") no-repeat 30px 40px scroll;
        }
    	</style>
    </head>
    <body>
    	<div class="box">
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    	<p>头脑清晰</p>
    <p>头脑清晰</p><p>头脑清晰</p><p>头脑清晰</p>
    	<p>头脑清晰</p><p>头脑清晰</p><p>头脑清晰</p
    	</div>
    </body>
    </html>

### **8.1几个小案例** ###

案例1：搜索框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        /*input 标签选择器*/
        input{
        	width: 280px;
        	height: 30px;
        	background: url("search.jpg") no-repeat right;
    
        }
        </style>
    </head>
    <body>
    	<input type="text" value="请输入关键字">
    </body>
    </html>

案例2：链接前面有图片
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
        li{
        	/*清楚列表前面的符号*/
        	list-style: none;
        	background: url(li.gif) no-repeat left;
        	text-indent: 1em;
        }
    	</style>
    </head>
    <body>
    	
    	<ul>
    		<li><a href="#">如何成长为一名优秀的Web前端开发工程师</a></li>
    		<li><a href="#">多写</a></li>
    		<li><a href="#">看书</a></li>
    		<li><a href="#">读BLOG</a></li>
    		<li><a href="#">学一门后端语言</a></li>
    		<li><a href="#">去用很多产品</a></li>
    	    
    	</ul>
    </body>
    </html>

## 9.一些知识 ##

**9.1** 浏览器默认行高：16px

行高：是基线与基线之间的距离。 行高=文字高度+上下边距

**一行文字行高和父元素高度一致时候，垂直居中显示。**

**9.2 行高单位**

**px 文字大小为20px 则行高为20px；**

**em 1em=20px；**%;例如150%=150%\*2px=30px；

总结：单位除了像素以外，行高都是与文字大小乘积。

不带单位时，行高是和子元素文字大小相乘，em和%的行高和父元素文字大小相乘。行高以像素为单位时，就是定义的行高值。

## 10 盒子模型 ##

作用：页面布局

**10.1 边框 border**

Border-top-style: solid 实线 dotted 点线 dashed 虚线；

Border-top-color: 上边框颜色；

Border-top-width: 上边框粗细；

简单写法：连写（无顺序要求），线型为必写项。

/*四个边框值相同的写法*/
        border: 5px solid red;

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      .box{
        width: 300px;
        height: 390px;
        background-color: #999;
        /*border-top-style: solid;/*线型*/
        border-top-color: green;/*边框颜色*/
        border-bottom-width: 5px;*/
        border-bottom-style: dashed;
        border-bottom-color: red;
        border-bottom-width: 10px;
        border-top: green solid 5px/*连写*/
        /*四个边框值相同的写法*/
        border: 5px solid red;
      }
      </style>
    </head>
    <body>
       <div class="box">what people think about</div>
    </body>
    </html>>

**10.2**

**边框合并：border-collapse: collapse;**

**获取光标焦点：<label for="id内容">获取光标焦点内容</label><input id="id内容">**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      table{
        width: 300px;
        height: 500px;
        border: 15px solid red;
        /* 边框合并*/
        border-collapse: collapse;
      }
      td{
        border: 5px solid red;
      }
      </style>
    </head>
    <body>
      
       <table cellspacing="0">
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
       </table>
       <div class="box">what people think about</div>
    </body>
    </html>

一个小案例：
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      .one{
         border: 0 none;/*去掉边框*/
         outline-style: none;/*去掉轮廓线*/
        display: block;
        border: dashed 2px green;
        background-color: #888;
      }
      .one:focus{
        background: red;
      }
      .two{
        border: 0 none;
        display: block;
        border-bottom: dotted 2px red;
      }
      .three{
        background: url("../a今日任务/5.css基础三上课资料/5.css基础三上课资料/5.css基础三上课资料/04-案例/search.png") no-repeat right;
        outline-style: none;
        border: 0 none;
        border: 2px solid #999;
      }
      </style>
    </head>
    <body>
      
      <label for="one">用户名：</label><input type="text" class="one" id="one"><br>
      邮箱：<input type="text" class="two"><br>
      搜索一下：<input type="text" class="three">
    </body>
    </html>

**10.3内边距**

![20180611185842885][]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>inner margin</title>
      <style type="text/css">
      .box{
        padding-left: 10px;
        padding-right: 20px;
        padding-top: 50px;
        padding-bottom: 20px;
        width: 400px;
        height: 300px;
        background: green;
        /*padding：20px;/*连写，上右下左，内边距都是20px*/
        padding: 20px 30px;/*上下20px 左右30px*/
        padding: 20px 30px 40px;/*上内边距20px 左右为30px 下内边距40px*/
        padding: 20px 30px 40px 50px;/*上右下左*/*/
      }
      </style>
    </head>
    <body>
      <div class="box">你好，明天</div>
    </body>
    </html>

**♦内边距撑大盒子div.box的问题**

**影响盒子宽度的因素：**

**①内边距影响盒子宽度padding**

**②边框影响盒子宽度bored**

**盒子的宽度=定义的宽度+边框宽度+左右内边距；**

**继承的盒子一般不会被撑大（水平方向受父类影响），除非padding超过了父类大小。**

**居中小案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>inner margin</title>
      <style type="text/css">
      .box{
        padding-left: 100px;
        padding-top: 75px;
        width: 400px;
        height:225px;
        background: pink;
      }
      .smallbox{
        width: 300px;
        height: 150px;
        background: red;
      }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="smallbox">
        </div>
      </div>
    </body>
    </html>

**10.4外边距**

**Margin: 0 auto。盒子居中**

**同样写在head中，margin-left: 左外边距值px; margin-right: 右外边距值px； margin-top: 上外边距值px； margin-bottom 下外边距值；**

**外边距连写：**

**margin：20px 30px;前一个代表上下外边距，后者代表左右外边距；**

**margin：20px 30px 40px; 第一个上外边距，第二个左右，第三个下**

**margin: 20px 30px 40px 50px; 上右下左**

**♦垂直方向外边距合并**

**垂直方向的2个盒子，如果都设置了垂直方向外边距，取的是比较大的值。**

**♦外边距塌陷（统一下降）**

**嵌套盒子，直接给子盒子设置垂直方向外边距的时候，会发生塌陷。**

**解决方法：**

**☆给父盒子设置边框 boder-top: px;**

**☆给父盒子设置：overflow(溢出)：hidden bfc格式化上下文**

一个利用padding的小案例
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
      .box{
        height: 40px;
        background: #eee;
        border-top: 3px solid orange;
        border-bottom: 1px solid #aaa;
      }
      .smallbox{
        width:1000px;
        height:40px;
        background: #aaa;
        margin: 0 auto;
      }
      a:link{
        display: inline-block;
        height: 40px;
        /*最好把行高放在a链接里*/
        font: 12px/40px microsoft yahei;
        display: inline-block;
        text-decoration: none;
        color: black;
        padding: 0 12px;
      }
      a:hover{
        background: #333;
        color: orange;
      }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="smallbox">
          <a href="#">设为首页</a>
          <a href="#">手机新浪网</a>
          <a href="#">移动客户端</a>
        </div>
    </div>
    </body>
    </html>

### **10.5行内元素可以定义左右的内外边距，上下会被忽略掉。** ###

### **11. Fireworks的基本使用** ###

**新建文件** crtl+n **打开文件** crtl+o **调出和隐藏标尺** ctrl+r

**清除辅助线：**视图-辅助线-清除辅助线

**放大镜** ：z(快捷键) 放大镜状态下 alt+鼠标左键 缩小

**抓手工具**：快捷键--空格不放

**测量距离 ☆**先拉出2根辅助线 **☆**切换到指针工具（黑色的箭头）**☆**将光标放在两个辅助线之间，按住shift键就能测量距离。

[20180611185842885]: /images/20220524/a630dfd214d74b1aa33bb066bb73e1b6.png