目录
一、HTML
1、网页的组成部分
页面由三部分组成，分别是内容（结构）、表现、行为
- 内容（结构）：是我们在页面中可以看到的数据，我们称之为内容，一般内容，我们使用html技术来展示
- 表现：指的是这些内容在页面上的展示形式，比如说。布局、颜色、大小等等。一般使用CSS技术实现。
- 行为：指的是页面中元素与输入设备交互的响应，一般使用javaScript技术实现。
2、HTML文件的书写规范
HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
<!DOCTYPE html><!--约束，声明为html5文档-->
<html lang="en"><!--html标签表示html的开始 lang="zh_CN表示中文" html标签中一般分为两个部分，分别是head和body-->
<head><!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
<meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
<title>标题</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主题内容-->
hello
</body>
</html>
3.HTML标签的介绍
- 标签的格式：<标签名>封装的数据</标签名>
- 标签名大小写不敏感
- 标签拥有自己的属性
- 分为基本数据：bgcolor=“red” 可以修改简单的样式效果
- 事件属性：οnclick=“alert(‘你好！’)” 可以直接设置事件响应后的代码
- 标签又分为，单标签和双标签
- 单标签格式：<标签名/>
- 双标签格式：<标签名>…封装的数据</标签名>
4、标签的语法
- 标签不能交叉嵌套
<!--标签不能交叉嵌套-->
正确:<div><span>早安，尚硅谷</span></div>
错误:<div><span>早安，尚硅谷</div></span>
- 属性必须有值，属性值必须加引号
<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">尚硅谷</font><br/>
错误：<font color=blue>尚硅谷</font><br/>
错误：<font color>尚硅谷</font><br/>
- 注释不能嵌套
5、常用标签介绍
- font字体标签
<font color="red" face="宋体" size="7">标签字体</font>
- 特殊字符
我是 < > & " ' 标签
- 标题标签（h1-h6）
align对齐属性（left，right，center）然后放大缩小网页它会自动对齐
<h1 align="left">标题一</h1>
<h2 align="right">标题二</h2>
<h3 align="center">标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
- 超链接
href属性设置链接的地址target属性设置哪个目标进行跳转_self表示当前页面 默认是这个_blank表示打开新页面进行跳转
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
- 列表标签
ul是无序列表ol是有序列表
li列表项type属性可以修改列表项前面的符号
<ul>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
- img标签
img标签是图片标签，用来显示图片
src属性可以设置图片的路径width属性设置图片的宽度height属性设置图片的高度border属性设置边框的大小title属性设置鼠标悬停时提示的文字alt属性设置当指定路径找不到图片时，用来代替的信息
在javase中路径也分为相对路径和绝对路径
- 相对路径：从工程名开始算
- 绝对路径：盘符：/目录/文件名
在web中路径分为相对路径和绝对路径两种
- 相对路径：
- . 表示当前文件所在的目录
- . .表示当前文件所在的上一级目录
- 文件名： 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略
- 绝对路径： 格式是： http://ip:port/工程名/资源路径
<img src="../imgs/02.jpg" width="100" height="260" border="20"/>
- table标签
table是表格标签
border是表格边框大小width是表格宽度height是表格高度align设置整体表格的对齐方式cellspacing是设置单元格之间的间距
tr是行标签
td表示单元格，但是还要去设置加粗、居中th是表头标签，已经设置好了加粗和居中align设置单元格的对齐方式b是加粗标签
<table border="3" width="300" height="200" align="center" cellspacing="10">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>13</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
</table>
- table标签跨行和跨列
<table border="1" width="400" align="center" height="200" cellspacing="0">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>13</td>
<td rowspan="6">你还哦</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>93</td>
</tr>
<tr>
<td>总人数 </td>
<td colspan="2"> 2000</td>
</tr>
<tr>
<td> 平均数</td>
<td colspan="2">20 </td>
</tr>
<tr>
<td> 及格率</td>
<td colspan="2">20% </td>
</tr>
</table>
- iframe标签（内嵌窗口）
ifarme标签它可以在一个html页面上，打开一个小窗口去加载单独的页面。
<body>
这是一个单独的页面<br/>
<!-- iframe标签可以在页面上开辟一个小区域显示一个单独的页面-->
<!-- iframe和a标签使用步骤-->
<!-- 1、在iframe标签上使用name属性定义一个名称-->
<!-- 2、在a标签的target属性上设置iframe的name的属性值-->
<iframe src="table表格.html" name="abc" width="350" height="250">
</iframe>
<br/>
<br/>
<br/>
<ol>
<li><a href="font标签.html" target="abc">font标签</a></li>
<li><a href="table表格.html" target="abc">table表格</a></li>
</ol>
</body>
- 表单显示
标签就是html页面中，用来
收集用户信息的所有元素集合，然后发送服务器
form标签就是表单项
input type="text"是单行文本输入框value属性设置文本框的默认值input type="password"是密码输入框 value属性设置密码框的默认值input type="radio"是单选框 name属性可以对其分组，同一组只可以选一个 checked="checked"就是默认选择input type="checkbox"是复选框 checked="checked"就是默认选择input type="reset"是重置按钮 value可以修改按钮上的文字input type="submit"是提交按钮 value可以修改按钮上的文字input type="button"是按钮 value可以修改按钮上的文字input type="file"是提交文件input type="hidden"是隐藏域 当我们要发送某些信息，而这些信息，不需要用户看见或参与，就可以使用（提交也会发给服务器）select是下拉列表框
option是下拉列表框中的选项， selected="selected"设置默认选中textarea表示多行文本输入框（起始标签和结束标签中的值是默认值）
rows属性设置可以显示几行cols属性设置每行可以显示几个字符宽度
<body>
<!--需求1 ：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），-->
<!--兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交-->
<form>
用户名称：<input type="text" value="123"></input><br/>
用户密码：<input type="password"></input><br/>
确认密码：<input type="password"></input><br/>
性别：<input type="radio" name="sex" checked="checked">男</input>
<input type="radio" name="sex">女</input><br/>
兴趣爱好：<input type="checkbox">Java</input>
<input type="checkbox" >JavaScript</input>
<input type="checkbox" >C++</input></br>
国籍：<select>
<option>--请选择国籍--</option>
<option>中国</option>
<option>美国</option>
<option>英国</option>
</select></br>
自我评价：<textarea rows="10" cols="20">默认是在这</textarea></br>
<input type="reset" value="重置"></input>
<input type="submit"value="登录"></input>
<input type="file"></input>
<input type="hidden"></input>
</form>
</body>
表单提交的时候，数据没有发送给服务器的有三种原因
（1）表单项没有name属性值
（2）单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
（3）表单项不在提交的form标签中
- GET请求的特点：
（1）浏览器地址栏中的地址是：action属性+？+请求参数
请求的格式是：name=value&name=value
（2）不安全
（3）它有数据长度的限制- POST请求的特点：
（1）浏览器地址栏中只有action属性值
（2）相对于GET请求更安全
（3）理论上没有数据长度的限制
<body>
<form action="http://www.baidu.com" method="post">
<input type="hidden" name="action" value="login"></input>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<th>用户名称：</th>
<th><input type="text" value="123" name="username"></input><br/></th>
</tr>
<tr>
<th>用户密码：</th>
<th><input type="password" name="pwd"></input><br/></th>
</tr>
<tr>
<th>性别：</th>
<th>
<input type="radio" name="sex" checked="checked" value="男">男</input>
<input type="radio" name="sex" value="女">女</input><br/>
</th>
</tr>
<tr>
<th>兴趣爱好：</th>
<th>
<input type="checkbox" name="hobby" value="java">Java</input>
<input type="checkbox" name="hobby" value="jsp">JavaScript</input>
<input type="checkbox" name="hobby" value="c++">C++</input></br>
</th>
</tr>
<tr>
<th>国籍：</th>
<th>
<select name="country">
<option>--请选择国籍--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="英国">英国</option>
</select></br>
</th>
</tr>
<tr>
<th>自我评价：</th>
<th><textarea name="desc" rows="10" cols="20">默认是在这</textarea></br></th>
</tr>
<tr>
<th><input type="reset"></input></th>
<th><input type="submit"></input></th>
</tr>
</table>
</form>
</body>
- 其他标签（div,span,p，br）
div标签默认独占一行span标签它的长度是封装数据的长度p段落标签默认会在段落的上方或下方各空出一行来br标签换行
div标签 俗称"块"，主要用于划分页面结构，做页面布局div属于块元素（h1~h6也属于块元素）- 块元素：
自己独占一行的元素。- 块元素的CSS样式的宽、高等等，往往都是生效的
span标签 俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰span属于行内元素- 行内元素：不会自己独占一行的元素
- 行内元素的CSS样式的宽、高等等，很多都是不生效的
- 适合将某些地方单独拎出来强调等用途
<body>
<!--需求：div span p标签-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
<br/>
</body>
二、CSS
1、CSS技术介绍
CSS是层叠样式表。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记行语言
2、CSS语法规则
- 选择器：浏览器根据“选择器”决定CSS样式影响的html元素（标签）
- 属性（property）：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
- 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）
3、CSS和HTML的结合方式
3.1、 行内式
语法：style='样式名：样式值；样式名：样式值；......;'
<input
type="button"
value="按钮"
style="
display: block;
width: 60px;
height: 40px;
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
"
>
缺点：
- 如果标签多了。样式多了，代码量庞大
- 可读性非常差
- css代码没什么复用性可言
3.2、 内嵌式
在head标签中，使用style标签来定义本页面的公共样式
通过选择器确定样式的作用元素
<head>
<meta charset="UTF-8">
<style>
/* 通过选择器确定样式的作用范围 */
input {
display: block;
width: 80px;
height: 40px;
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
</body>
缺点：
- 只能在同一页面内复用代码，不能再多个页面中复用css代码
- 维护起来不方便，实际的项目中会有成千上万的页面，-要到每个页面中去修改，工作量大
3.3、外部样式表
把css样式写成一个单独的.css文件，那个html需要这些代码就在head中通过link标签引入。
- 使用html的
<link rel="stylesheet" type="text/css" href="./styles.css">
- 标签 导入css样式文件
input {
display: block;
width: 80px;
height: 40px;
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
<head>
<meta charset="UTF-8">
<link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
</body>
4、CSS选择器
4.1、标签名选择器
根据标签的名字确定样式的作用元素
标签名{
属性:值;
}
<head>
<meta charset="UTF-8">
<style>
input {
display: block;
width: 80px;
height: 40px;
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
<button>按钮5</button>
</body>
4.2、 id选择器
根据标签的id值确定样式的作用元素
id值有唯一性，样式只能作用到一个元素上
#id 属性值{
属性：值;
}
<head>
<meta charset="UTF-8">
<style>
#btn1 {
display: block;
width: 80px;
height: 40px;
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<input id="btn1" type="button" value="按钮1"/>
<input id="btn2" type="button" value="按钮2"/>
<input id="btn3" type="button" value="按钮3"/>
<input id="btn4" type="button" value="按钮4"/>
<button id="btn5">按钮5</button>
</body>
说明
- 一般每个元素都有一个唯一的id属性。但是在一个页面中，每个元素的id值不应该相同，即，id具有唯一性。因此所有id选择器也只能影响一个元素的样式
- 一个id选择器 对应 一个元素的样式
- 一个id选择器 不能对应 多个元素的样式
4.3、class选择器（类选择器）
根据元素的class属性有效的选择地去使用这个样式
.class属性值{
属性：值;
}
与id选择器的区别就是id只能有一个标签去使用他，而类选择器中能有好多标签去使用他
<head>
<meta charset="UTF-8">
<style>
.shapeClass {
display: block;
width: 80px;
height: 40px;
border-radius: 5px;
}
.colorClass{
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
}
.fontClass {
font-size: 22px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input class ="shapeClass colorClass fontClass"type="button" value="按钮1"/>
<input class ="shapeClass colorClass" type="button" value="按钮2"/>
<input class ="colorClass fontClass" type="button" value="按钮3"/>
<input class ="fontClass" type="button" value="按钮4"/>
<button class="shapeClass colorClass fontClass" >按钮5</button>
</body>
4.4、组合选择器
选择器1，选择器2，选择器3…n{
属性：值;
}
组合选择器可以让多个选择器共用同一个代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.class01, #id001{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!-- 需求修改class="class01"的div标签和id="id01"所有的span标签，-->
<!-- 字体颜色为蓝色，字体大小为20个像素，边框为1像素的黄色实线-->
<div class="class01">div标签</div>
<span id="id001">span 标签</span>
<div>div标签</div>
<div>div标签id01</div>
</body>
4.5、CSS常用样式
- 字体颜色
color: red;
颜色可以写颜色名字：black、red等
颜色也可以写rgb值和十六进制表示值，如rgb(255, 0, 0)，如果写十六进制必须加#
- 宽度
width: 19px;
宽度可以写像素值： 19px;
也可以写百分比值：20%;
- 高度
height: 20px;
高度可以写像素值： 19px;
也可以写百分比值：20%;
- 背景颜色
background-color:#OF2D4C
- 字体样式
color:#FF0000；
font-size: 20px;
- 红色1像素实现边框
border: 1px soild red;
- DIV居中
margin-left:auto; //向左对齐
margin-right:auto; //向右对齐 这样就左不左右不右 就居中了
- 文字居中
text-align: center //文字居中
- 超链接去下划线
text-decoration: none;
- 表格细线
table{
border: 1px solid black; //这里设置的是表格的最外面
border-collapse:collapse; //将边框合并
}
td,th{
border:1px solid black; //这里设置的是表格的里面的单元格的线
}
- 列表去除修饰
ul{
list-style:none;
}
5、CSS浮动
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
- 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
浮动原理
- 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
- 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失
- 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
- 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
- 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
浮动的样式名:float
通过代码感受浮动的效果
代码1+效果
- 代码
display: inlinedisplay:表现出来的属性block- 块元素inline- 行内元素
<head>
<meta charset="UTF-8">
<style>
.outerDiv {
width: 500px;
height: 300px;
border: 1px solid green;
background-color: rgb(230, 224, 224);
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
}
.d1{
background-color: greenyellow;
/* float: right; */
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
代码2+效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
display: inline
display-表现出来的属性 block-块元素 inline-行内元素
-->
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid rgb(112, 126, 112);
background-color: beige;
}
.innerDiv1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.innerDiv2{
width: 100px;
height: 150px;
border: 1px solid blue;
}
.innerDiv3{
width: 100px;
height: 200px;
border: 1px solid blue;
}
/*
float：浮动属性。
当进行操作的时候会出现释放文档流的现象，有些元素可能会被遮挡，
但是由于设计的初衷是不会挡住文本，因此这些被遮挡的元素里的文本又会在它上涌之前的位置显示出来。
*/
.d1{
background-color: greenyellow;
float: left;
}
.d2{
background-color:rgb(210, 119, 119);
float: left;
}
.d3{
background-color: rgb(142, 236, 229);
float: left;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv1 d1">div1</div>
<div class="innerDiv2 d2">div2</div>
<div class="innerDiv3 d3">div3</div>
</div>
</body>
</html>
6、CSS定位
position 属性指定了元素的定位类型。
- 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
- position：
static- 默认值absolute- 绝对定位relative- 相对定位1：相对元素原本的位置来定位 不释放文档流，下面的div2不会涌上来占位fixed- 相对定位2：相对浏览器窗口的位置来定位 释放文档流，下面的div2会涌上来占位
left- 距离页面左端的距离right- 距离页面右端的距离top- 距离页面顶端的距离bottom- 距离页面底端的距离
6.1、静态定位
- 说明
- 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: static;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
6.2、绝对定位（absolute）
- 说明
absolute,通过top left right bottom指定元素在页面上的固定位置定位后元素会让出原来位置,其他元素可以占用
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: absolute;
left: 300px;
top: 100px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
6.3、相对定位(relative)
- 说明
relative相对于自己原来的位置进行移位- 定位后保留原来的站位,
其他元素不会移动到该位置
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: relative;
left: 30px;
top: 30px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
6.4、固定定位(fixed)
- 说明
fixed始终在浏览器窗口固定位置,不会随着页面的上下移动而移动元素定位后会让出原来的位置,其他元素可以占用
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: fixed;
right: 30px;
top: 30px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
br*100+tab
</body>
7、 CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）
- 说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
<head>
<meta charset="UTF-8">
<style>
.outerDiv {
width: 800px;
height: 300px;
border: 1px solid green;
background-color: rgb(230, 224, 224);
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
margin: 10px 20px 30px 40px;
}
.d1{
background-color: greenyellow;
/* padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; */
padding: 10px 20px 30px 40px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
在浏览器上,通过F12工具查看盒子模型状态
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
