HTML
概述
●
HTML
指的是超文本标记语言 (
HyperText Markup Language
)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)
•
浏览器根据不同的HTML标签，解析成我们看到的网页
●
声明
html4的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明
<!DOCTYPE html>
如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。
●
Head标签(标签)包含了所有的头部标签标签。
●
头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>
<title>标签可定义网页的标题
<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新
频度的描述和关键词。
<meta> 标签位于文档的头部
<meta charset="utf-8" />
标题处添加图标
<link rel="icon" href="ico地址">
语法
•
标签
HTML
中的标记指的就是标签。
HTML
使用标记标签来描述网页。
结构：
<
标签名
>
标签内容
</
标签名
>
闭合标签
(
有标签内容
)
<
标签名
/>
自闭合标签
(
无标签内容
)
●
标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用
特性。如：
<body text=”red”>
1.
属性的格式 ：属性名
= “
属性值
“
2.
属性的位置：
<
标签名 属性名
= “
属性值
“ >xxx</
标签名
>
3.
添加多个属性：
<
标签名 属性名
= “
属性值
“
属性名
= “
属性值
“ >xxx </
标签名
>
●
标题标签
<h1></h1>…..<h6></h6>
●
段落标签
<p></p>
换行标签
<br/>
●
列表
无序列表
<ul><li></li></ul>
有序列表
<ol><li></li></ol>
●
超链接
<a></a>
●
图像标签
<img/>
实例
<!--
html注释
<!DOCTYPE html> 声明html语言的版本信息,为html5版本 告诉浏览器以html5标准解释运行
-->
<!DOCTYPE html>
<!-- HTML 骨架标签 -->
<!--
html标签是网页中的根标签,所有的内容都应该写在此标签中
-->
<html>
<!-- 头标签 -->
<head>
<meta charset="utf-8" /> <!-- 网页字符集 -->
<meta name = "keywords" content = "家电,手机"/> <!-- 设置网页关键字,让搜索引擎查找的-->
<title > 我的第一个网页 </title> <!-- 网页标题-->
<link href="img/baidu.ico" rel="icon"/><!-- rel 表示目标地址（href）与原地址（HTML文档是什么关系 ） icon 是图标关系-->
</head>
<!-- 身体标签 ,用来写网页内容 -->
<body text = "red" bgcolor="green">
网页内容
<!--
标签结构
<标签名>
<开始标签> 标签体 </结束标签> 闭合标签 (双标签)
<标签名 属性="" />完成一个特定的设置功能,没有标签体 自闭和标签(单标签)
<meta charset="utf-8" />
<br/> 换行标签
标签中可以有属性: 可以标签属性改变原来的显示风格
<body text = "red" bgcolor="green">
属性写在标签的开始标签中
一个标签可以有多个属性
属性名 = "值"
-->
<b>百度 </b> <br />新浪
<font color = "blue" size = "4">
<b>
<a href="">腾讯</a>
</b>
</font>
</body>
</html>
<!--
html注释
<!DOCTYPE html> 声明html语言的版本信息,为html5版本 告诉浏览器以html5标准解释运行
-->
<!DOCTYPE html>
<!-- HTML 骨架标签 -->
<!--
html标签是网页中的根标签,所有的内容都应该写在此标签中
-->
<html>
<!-- 头标签 -->
<head>
<meta charset="utf-8" /> <!-- 网页字符集 -->
<meta name = "keywords" content = "家电,手机"/> <!-- 设置网页关键字,让搜索引擎查找的-->
<title > 我的第一个网页 </title> <!-- 网页标题-->
<link href="img/baidu.ico" rel="icon"/><!-- rel 表示目标地址（href）与原地址（HTML文档是什么关系 ） icon 是图标关系-->
</head>
<!-- 身体标签 ,用来写网页内容 -->
<body text = "red" bgcolor="green">
网页内容
<!--
标签结构
<标签名>
<开始标签> 标签体 </结束标签> 闭合标签 (双标签)
<标签名 属性="" />完成一个特定的设置功能,没有标签体 自闭和标签(单标签)
<meta charset="utf-8" />
<br/> 换行标签
标签中可以有属性: 可以标签属性改变原来的显示风格
<body text = "red" bgcolor="green">
属性写在标签的开始标签中
一个标签可以有多个属性
属性名 = "值"
-->
<b>百度 </b> <br />新浪
<font color = "blue" size = "4">
<b>
<a href="">腾讯</a>
</b>
</font>
</body>
</html>
●
a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是
通过连接来访问其他网页资源。
<a href=“http://www.baiduc.om” target=“_blank”>百度</a>
<a href=“login.html” target =“_blank”>登录</a>
target:默认值为_self
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面
地址)
URL(Uniform Resource Locator)统一资源定位符
用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
超链接标签
href = "链接地址" URL -- 文件的地址
target = "打开的位置" _self(默认) 在自己的本窗口打开一个新网页
-->
<a href = "http://www.baidu.com" target="_self"> 百度 </a>
<a href = "http://www.baidu.com" target="_blank"> 百度 </a>
<a href="index.html">首页</a>
</body>
</html>
……
<body>
<img src=“img/demo.jpg”width=“300”height=“150“border= ” 1 ”/>
</ body >
●
图片的宽高一般不建议使用
•
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在html中使用字符转义。
* 小于号< * 版权(C)
< ©
* 大于号> * 商标(TM)
> ™
* 空格 * 注册商标(R)
®
表格
●
表格的基本构成标签
table
标签：表格标签
tr
标签：表格中的行
th
标签
:
表格的表头
td
标签：表格单元格
●
表格的基本结构
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
●
表格属性
width
height
cellspacing
cellpadding
align
valign
cospan
rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table 表示一个表格 可以设置宽和高
cellpadding = "0" 设置内容到边框的内边距
cellspacing = "0" 设置单元格与单元格之间的外边距
tr 表示一个行 设置行高
th 表示一个单元格 , 还是表头 , 内容会加粗 , 并且居中, 设置宽度
td 表示一个普通单元格
align = "内容水平对齐方式" left(默认) center right
valign = "内容垂直对齐方式" top middle(默认) bottom
表格中的数据都只能写到单元中(否则直接写到表格外面了)
-->
<table border="1" width = "400" cellspacing = "0" >
<tr height = "40">
<th>姓名</th>
<th>java</th>
<th width="100" >C</th>
<th>python</th>
</tr>
<tr >
<td>张胜</td>
<td>80</td>
<td>90</td>
<td>77</td>
</tr>
<tr height = "50">
<td align = "center" valign = "top">张胜</td>
<td align = "right" valign = "bottom">80</td>
<td>90</td>
<td>77</td>
</tr>
<tr height = "50" align="center" valign = "bottom" >
<td>张胜</td>
<td>80</td>
<td>90</td>
<td>77</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
colspan = "4" 合并列 从那列开始合并, 在哪列添加colspan="合并的数量"记得删除多余的单元格
rowspan "3" 跨行合并单元格
-->
<table border = "1" width = "400" height = "300" >
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
表单
●
form
标签：表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写
信息,最终提交表单,把客户端数据提交至服务器.
密码框基本语法
<input
type=“password ” value=“ 123456 ” /
>
初始密码
密码框
•
单选按钮基本语法
<input
type="radio" value="
男
" checked="checked“/
>
•
复选框基本语法
<
input
type=“checkbox” name="cb2“ value="talk“/>
注意：单选框通过
name
属性来分组，
name
相同是一组才可实现单选。
单选和复选不能输入内容，所以必须指定
value
的值。
•
文件选择框语法
<
input
type=“file” name=“img”/>
accept=“.
文件后缀名
,.
文件后缀名
… “
限制文件类型
基本
语法
●
下拉框的
name,id,
事件等需要在
select
中定义，而
value
需要在
option
中
定义。
<select name="bmon">
<option value=“” >
选择省份
</ option >
< option value=“100”>
山西
</ option >
< option value=“101” selected = ” selected ” >
陕西
</ option >
< option value=“102”>
河南
</ option >
</select>
•
多行文本域基本语法
<textarea name= "textarea" cols= "40" rows= "6">
文本域中的内容 </ textarea >
•
按钮基本语法
<
input
type="reset" name="Reset" value="
重填
">
表单
-
按钮
按钮名称
按钮类型
按钮上显示的
名称
<input type=“reset” value=“
重填
”
>
重置表单内容
<input type=“submit” value=“
提交
”
>
提交表单内容到服务器
<input type=“button” value=“
按钮
”
>
普通按钮没有功能，只能被点击触发事件用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单 :
就一个区域, 拥有许多输入和选择组件
让用户可以输入选择信息, 最终将数据提交到服务器端
<form action = "server.html" method = "get">
action = "服务器地址" method = "请求方式"
input
type="text" 单行文本输入框
name = "account" 定义组件的名字 向后端提交用的(也就是键的名字)
value = "" 组件的值
readonly 设置组件只读 不能修改 提交表单时,可以被提交到服务器端
placeholder =="请输入用户名" 输入提示信息
disabled 禁用组件, 不会提交内容到服务器(也就是不让用组件)
type="password"密码框
type = "radio" 单选框
单选性组件需要给value值
单选框通过name分组, name为相同为一组
checked 属性可以默认选中一项
type = "checkbox" 多选框 (复选框)
type = "file" 文件选择框
<select name ="province"> 下拉选择组件
<option> 请选择</option>
<option value = "101">北京</option>最终提交选中 的选项值
多行文本框组件
<textarea rows = "5" cols ="30" name = "address">1111</textare>
-->
<form action="server.html" method="get">
账号:<input type="text" name = "account" value ="" placeholder="请输入用户名" /><br/>
密码:<input type="password" name="password"/><br/>
性别:<input type="radio" name = "性别" value = "男" checked/>男
<input type="radio" name = "性别" value = "女"/>女<br/>
是否满意:<input type="radio" name ="a" value="同意" checked/> 同意
<input type="radio" name ="a" value="不同意" /> 不同意<br/>
课程: <input type="checkbox" name = "course" value="java" checked/>java
<input type="checkbox" name = "course" value="C" />C
<input type="checkbox" name = "course" value="sql" />sql
<input type="checkbox" name = "course" value="html" />html <br/>
附件: <input type="file" name="file"/> <br/>
省份:<select name = "province">
<option>请选择</option>
<option value = "101"> 北京</option>
<option value = "102" selected> 上海</option>
<option value = "103"> 陕西</option>
</select><br/>
地址:<textarea rows="5" cols="30" name="address">1111</textarea> <br/>
<input type="submit" /><br/>
<input type="reset" />
<input type="button" value="登录" onclick="alert('你好')"/>
<!--
type = "submit"提交按钮 触发表单的提交(数据到服务器)
type = "reset" 重置按钮 让表单回到默认状态
type = "button" 普通按钮 是用来触发事件的
-->
</form>
</body>
</html>
CSS
概述
●
CSS是
C
ascading
S
tyle
S
heets（级联样式表）。
●
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，
CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
●
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用
于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
●
CSS与HTML的关系
HTML是网页内容
CSS定义页面的样式
行内样式表
,
又有人称内联样式、行间样式、内嵌样式。是通过标签的
style
属性来设置
元素的样式，其基本语法格式如下：
<
标签名
style="
属性
1:
属性值
1;
属性
2:
属性值
2;
属性
3:
属性值
3;">
内容
</
标签名
>
内嵌式是将
CSS
代码集中写在
HTML
文档的
head
头部标签中，并且用
style
标签定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{
color: green;
font-size: 24px;
font-family: 楷体;
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
css 是一种样式表语言, 为html标签修饰定义外观,分工不同 css是用来修饰html标签的 改变内容的外观
html是网页的内荣
css是网页的样式
-->
<!-- <a href="">
<font color = 'red'>
<b>百度</b>
</font>
</a>
<a href="">
<font color = 'red'>
<b>新浪</b>
</font>
</a> -->
<!-- <a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a>
<a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a>
<a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a> -->
<a href="" class="p1">新浪</a>
<a href="" class="p1">新浪</a>
<a href="" class="p1">新浪</a>
<p class="p1">收拾收拾</p>
</body>
</html>
外部样式表是将所有的样式放在一个或多个以
.CSS
为扩展名的外部样式表文件中，通
过
link
标签将外部样式表文件链接到
HTML
文档中
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* .p1{
color: green;
font-size: 24px;
font-family: 楷体;
background-color: aquamarine;
} */
</style>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<!--
css 是一种样式表语言, 为html标签修饰定义外观,分工不同 css是用来修饰html标签的 改变内容的外观
html是网页的内荣
css是网页的样式
-->
<!-- <a href="">
<font color = 'red'>
<b>百度</b>
</font>
</a>
<a href="">
<font color = 'red'>
<b>新浪</b>
</font>
</a> -->
<!-- <a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a>
<a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a>
<a href="" style="color:red;font-size: 20px;font-family: 楷体;">新浪</a> -->
<a href="" class="p1">新浪</a>
<a href="" class="p1">新浪</a>
<a href="" class="p1">新浪</a>
<p class="p1">收拾收拾</p>
</body>
</html>选择器
•
要使用
CSS
对
HTML
页面中的标签实现一对一，一对多的控制，这就需要用到
CSS
选
择器。
●
常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名
{}
类选择器：通过标签的
class
属性值选中一组标签
语法：
.class
属性值
{}
id
选择器：通过标签的
id
属性值选中唯一的一个标签
语法：
#id
属性值
{}
通配选择器
:
可以用来选中页面中的所有的标签
语法：
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<strong></strong>
<style>
/* 标签选择器 */
a{
color: red;
font-size: 20px;
}
p{
color: green;
}
/* 类选择器 */
.p1{
color: blue;
}
/* 通配选择器 选中所有的标签 */
*{
font-size: 20px;
}
/* id选择器 唯一的*/
#aid{
color: chocolate;
}
/*选择器优先级
匹配标签越多，优先级越低 ，重叠选中标签时，使用优先级高的样式，但是低优先级与高优先级没有重叠的样子也会添加上去,
由高到低
行内样式表--> id 选择器 --> 类选择器 -->标签选择器 -->通配选择区
*/
</style>
</head>
<body>
<a href="" >新浪</a>
<a href="">新浪</a>
<a href="" class="p1" id="aid" style="color: salmon;">新浪</a>
<a href="" class="p1">新浪</a>
<p>段落</p>
</body>
</html>文本
●
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>
.p1{
color: #2e8a43;
font-size: 20px; /* px 是像素单位 css中尺寸需要加单位 */
font-family: 楷体;
font-weight: 700;/* 加粗*/
/* text-align: center; 文本水平对齐*/
font-style: italic;
/* text-decoration: underline; 修饰文本下添加下滑线 */
/* text-decoration: line-through; 修饰文本 添加删除线 */
/* line-height: 50px; 行高 */
/* letter-spacing: 30px; 字符间距 */
/* word-spacing: 30px; 单词间距 */
/* text-indent: 2em; em 当前文本中一个字符的大小 */
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #ff0000;
}
</style>
</head>
<body>
<p class="p1">
列表属性可以放置、改变列表项标志 hello world hello world、或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志、或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志、或者将图像作为列表项标志。
</p>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
</body>
</html>
背景
●
background-color
背景颜色
●
background-image
背景图片
●
background-repeat
背景重复
●
background-size
背景尺寸
●
background- position
背景位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
background-color: aqua;/*设置背景颜色*/
background-image: url(img/bg.jpg);/*添加背景图片*/
background-repeat: no-repeat;/*背景不重复*/
background-position: center center;/*背景位置 水平（left center right） 垂直（top center bottom）*/
background-size: 400px 400px;/*背景尺寸 宽 高*/
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<p>段落标签</p>
</body>
</html>
●
CSS
列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
●
list
-style-image
将图象设置为列表项标志。
●
list-style-position
设置列表中列表项标志的位置。
●
list-style-type
设置列表项标志的类型。
●
list-style
简写属性。
伪类
●
CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类 。
●
伪类的语法
：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
透明
●
定义透明效果的属性是
opacity
。
opacity
属性设置标签的不透明级别 值为
1
。
规定不透明度：从
0.0
（完全透明）到
1.0
（完全不透明）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
color: aqua;
}
/* 当鼠标移入到选择器对应的标签时，自动切换到此样式表 */
a:hover{
color: red;
font-size: 20px;
}
p:hover{
color: red;
background-color: aqua;
}
/* 当鼠标点击标签时 自动切换到此样式表 */
p:active{
color: blue;
}
.btn:hover{
background-color: aquamarine;
}
.btn:active{
background-color: red;
}
/* 当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表 */
input:focus{
background-color: darkblue;
}
/* */
img{
opacity: 0.5;
}
img:hover{
opacity: 1;
}
</style>
</head>
<body>
<a href="">百度</a>
<p>段落</p>
<input type="button" value="保存" class="btn" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<img src="img/photo.jpg"/>
</body>
</html>
块级
,
行级
,
行级块标签
●
什么是块级标签？
块级标签：无论内容多少 都会独自占据一行的。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。
●
什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如<font>、<b>、<i>、<a>等。
●
什么是行级块标签？
例如 <input/> <img>等
●
通过
display
样式可以修改标签的类型。
可选值：
bloc
k
：
设
置
标签为块标签
inline
：设置标签为行级标签
inline-block
：设置标签为行级块标签
none
：隐藏标签（标签将在页面中完全消失）
div
标签
div
是块级标签，可以放置任何标签。
div
没有任何附加功能，给了什么属性就能变成什么样。
div
主要的作用是被用来布局网页。
span
标签
span
是行级标签
span
没有任何附加功能，给了什么属性就能变成什么样。
span
标签被用来选中文档中的文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
块级标签 : 无论内容多少都会独占一行
可以设置宽高
主要用来进行网页布局
p h2...h6
div标签是一个块级标签,没有任何附加样式,我们给他设置什么样式就变成什么样子
-->
<p style="background-color: greenyellow;width: 200px;height: 100px;">aaa </p>
qqqaq
<h1>asdasdasd</h1>
<div style="background-color: greenyellow;width: 200px;height: 100px; margin-top: 10px;display: none;"> div标签是一个纯净版的行级标签</div>
<!-- 行级标签: 只占内容的大小, 不会占一行, 设置宽高也无效
例如a b s i
主要用来对网页的文字进行修饰
span是一个纯净版的行级标签,对网页的文字进行选中,修饰
-->
<a href="" style="width: 100px;height: 100px;display: block;">百度</a>
<span style="color: red; font-style:italic; font-weight: 700 ;text-decoration:underline;"> 你好 asadad</span>
<!--
常用标签：div span a 表格 表单 列表
-->
<!--
行级块标签：不占一行，又可以设置宽高 img
-->
<img src="img/photo.jpg" width="200" height="200"/>
<input type="text" style="width: 500px; height: 50px;"/>
</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>
.box{
background-color: aqua;
width: 80px;
height: 80px;
/* 设置内边距 */
/* padding-top: 10px;
padding-bottom: 10px;
*/
/* padding: 10px; */
/* padding: 5px 10px 15px 20px 上 右 下 左 */
/* padding : 10px 20px 上下 左右 */
/*
标签大小 = 内容区+内边距+边框
*/
}
.box1{
width: 70px;
height: 20px;
padding:15px 65px;
background-color: aquamarine;
}
.box2{
width: 270px;
padding:15px 65px;
background-color: azure;
}
</style>
</head>
<body>
<!--
盒子模型
每一个标签都像一个盒子,网页布局其本质就是摆放盒子
每个盒子又分成4个区域:
内容区: 放内容的区域
内边距: 内容区到边框的距离
边框: 标签的对外层
外边距: 一个标签距离另一个标签之间的距离
-->
<div class="box">
盒子模型
</div>
<div class = "box1">
新闻热点
</div>
<!-- 行块级标签 带有一点附加 块级标签高度为实时内容高度-->
<div class="box2">
<img src="img/ffyc.png" style="display:block;">
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
background-color: aqua;
width: 180px;
height: 180px;
/* border-top-width: 2px;
border-top-color: red;
border-top-style: solid; */
/* border-top: red solid 2px; */
border: 2px red solid;
/* border-radius: 8px; */
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.txt{
width: 466px;
height: 26px;
padding: 10px 15px;
border: 2px gainsboro solid;
border-radius: 8px;
outline: none;
}
.txt:hover{
border: 2px gray solid;
}
.txt:focus{
border: 2px blue solid;
}
</style>
</head>
<body>
<div class="box">
盒子模型
</div>
<br />
<input type="text" class="txt" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ /* 去掉所有标签默认的外边距 内边距 */
margin: 0px;
padding: 0px;
}
/* body{
margin: 0px; 去掉了body标签的默认外边距
} */
.box1{
background-color: aqua;
width: 200px;
height: 200px;
}
.box2{
background-color: green;
width: 200px;
height: 200px;
/* margin-top: 10px;
margin-left: 100px; */
/* margin: 10px; */
/* 左右外边距可以为auto,外边距会变为最大值 */
/* margin-left: auto;
margin-right: auto; */
/* margin-top: auto; 上下外边距不能设置为自动, 设置的自动值默认为0, 只能设置具体的值
margin-bottom: auto; */
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
盒子模型
</div>
<div class="box2">
盒子模型2
</div><p>sada</p>
<p>sada</p>
<p>sada</p>
</body>
</html>
●
可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的
边框。
●
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线）
groove （槽线）
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
●
外边
距
是
标签边框与周围标签相距的空间。 使用margin属性可以设置
外边距。用法和padding类似，同样也提供了四个方向的 。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为
auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
●
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子
的实际控制范围。
●
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所
以为很多的标签都设置了一些默认的
margin
和
padding
，而它的这些默
认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的
margin
和
padding
统统
的去掉。
*{
margin: 0;
padding: 0;
}
文档流
●
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分
成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
●
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不
足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。
●
这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行
布局就会变得比较麻烦。
浮动
•
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用
float
属性。
可选值：
none
：不浮动
left
：向左浮动
right
：向右浮动
●
当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我
们 都会为其指定一个宽度。
●
当一个标签浮动以后，其下方的标签会上移。
●
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流
,
这时不会再影响父标签的高度
,
也就是浮动标签
不会撑开父标签。
清除浮动
●
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
CSS 定位(Position)
•
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对
于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
相对定位
(relative)
•
相对定位
相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位，
left right top bottom四个属性来设置标签的偏移量。
相对定位的特点
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
绝对定位
(absolute)
•
绝对定位
绝对定位是不占空间的，运用了
绝对定位的标签会脱离原来的文档
流，浮动起来，因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位，
left right top bottom四个属性来
设置标签的偏移量
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: relative;/*只开启相对定位 只开启了相对定位,不设置偏移,标签不会变化的*/
left:100px /*相对定位是以自己本身的位置为参照物定位的, 不会让标签脱离文档流 */
}
.box2{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: absolute;/*开启了绝对定位,立即脱离原来的文档流*/
left:100px;
top:100px;
/*
移动是的参照物:
离他最近的 开启了定位的父级标签为参照物, 如果所有的父级标签都没有开启定位, 那么它以浏览器的边框为参照物
一般情况开启另一个标签的绝对定位,都会开启父级标签的相对定位
*/
}
.box2{
background-color: green;
width: 100px;
height: 100px;
}
.main{
width: 200px;
height:200px;
background-color: bisque;
position: relative;
}
</style>
</head>
<body>
<div class="main">
div3
<div class="box1">div1</div>
</div>
<div class="box2">div2</div>
</body>
</html>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
