HTML和CSS进阶

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&CSS
1.定位  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>