HTML和CSS进阶
1.内外边距
padding(内边距): 用于控制内容与边框之间的距离
例如，padding:10px，20px; 顺时针，可以这样理解，鼠标到包装盒的距离
border(边框): 围绕在内边距和内容外的边框
例如，border-top:10px solid red; 包装盒的厚度
margin(外边距)：用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到互相隔开的目的，例如，两个盒子之间
margin父子塌陷问题，上下会出现，左右没有
解决办法，父类里面加属性border, padding, 在里面添加文本内容，任何一种都可以
margin兄弟塌陷，上下会出现，以大的外边距为主；
content(内容): 盒子的内容, 显示文本和图像.，就相当于鼠标
设置宽度和高度
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
盒子的真实尺寸：盒子宽度 = width + padding左右 + border左右
外间距居中技巧：如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素
例如，/* 子元素上下外边距设为0，左右设置为auto */
margin: 0px auto;
2.补充background
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-image: url('./images/logo.png');
background-repeat: repeat-y; # 平铺纵向
background-color: pink;
3.列表标签
有序列表 <ol> <li> </li></ol>
无序列表 <ul> <li> </li> </ul>
list-style:none; 消列表前面的序号或者是点
4.HTML表单
使用方式:
<form action="" method="">
</form>
<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式(会在输入网址框里看到，并且网址框还有长度设定，不安全)和“post”方式（会在浏览器的Network里看到）
<label> </label>标签
<label>标签 为表单元素定义文字标注
label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦
label的for属性设置:
<label for="male">用户名:
<input type="text" id="male">
<input>标签 定义通用的表单元素，placeholder 设置input输入框的默认提示文字。
例如，<input type="text" name="username" placeholder="请您输入姓名">
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
其它标签
<textarea>标签 定义多行文本输入框
使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
textarea的使用
</textarea>
<select>标签 定义下拉表单元素
<option>标签 与<select>标签配合，定义下拉表单元素中的选项
创建带有 4 个选项的选择列表：
<select name="province" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">河南</option>
<option value="4">湖北</option>
</select>
6.CSS属性进阶
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px
例如，中文汉字，默认一个汉字的像素为16px;
display属性
作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示
display 属性规定元素应该生成的框的类型。
display 的默认属性值是 inline, 此元素会被显示为内联元素
display属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- block 此元素会被显示为块元素
- inline 此元素会被显示为内联元素
- inline-block 行内块元素
font补充
font-style 定义字体的风格
- normal: 正常
- italic: 浏览器会显示一个斜体的字体样式。
font-variant 能把字体变小一号并且全大写显示
small-caps 变小一号并且全大写显示
normal 正常
CSS元素溢出
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
5..表格
<table>标签，声明一个表格
先有行，<tr>标签，定义表格中的行
<td>和<th>标签，td代表列，th表示列中的标题部分(加粗)
- colspan 设置单元格水平合并，设置值是数值（从左到右，原先内容删掉）
- rowspan 设置单元格垂直合并，设置值是数值（从上到下）
表格相关样式属性 table里面属性
- border-collapse 设置表格的边线合并，如：border-collapse:collapse;
- border='1' 可以设置table的边框大小
- text-align 可以设置对齐方式: left right center
03-HTML&CSS1.定位 position，会浮起来relative 相对定位: 为了管理野孩子，left:10px; 还可以设置left:50%; 原来的空间会被占用，不会空出来；absolute 绝对定位: 变成野孩子，原来的空间会空出来fixed 固定定位: 相对于浏览器的绝对定位: 变成只能由body管的野孩子left right top bottom 配合使用,确定位置: 在哪里野元素层级：z-index:1，默认值为0，谁的值大，谁就浮在最上面；权重值， 标签: 1 class: 10 id: 100 内嵌样式: 1000 ，谁的权重值大就听谁的内联，例如，<div style="color:blue">这是一个div</div>，权重值为1000；
子绝父相
2.页面嵌套 iframe
src 设置另一个页面的地址
和 a 标签配合使用, 使用 target 来控制 iframe 的 name 来进行切换
<a href="001.html" target="name">001页面</a>
<iframe src="001.html" frameborder="0" name="name"></iframe>
