title: HTML+css 基础语法
categories: HTML
tags: [语法,HTML,css]
一、HTML
什是么网站？
网站(Website)开始是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合
什么是网页？
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是超文本标记语言格式文件扩展名为.html。
文字与图片是构成一个网页的两个最基本的元素。
1. WEB标准的概念及组成
结构：
HTML- 超文本标记语言 (Hyper Text Markup Language)
XHTML-可扩展超文本标记语言(EXtensible HyperText Markup Language)
表现：
CSS-层叠样式表（Cascading Style Sheets）
行为：
JavaScript-是轻量级的脚本语言
2. XHTM基本语法
1、常规标记/双标记
<标记 属性=“属性值” 属性=“属性值”></标记>2、空标记/单标记
<标记 属性=“属性值” />
说明：
写在<>中的第一个单词叫做标记、标签、元素名。
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有单独的结束标签，用“/”代替。
3. HTML5 基本结构
<!doctype html>文档类型声明
<html></html>说明文档写的是标记语言 ，根标签
<head></head>文件头部
<title></title>文件标题（显示在状态栏上的内容）
<meta charset="utf-8" />['metə]
编码格式--meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找设置关键字等
<body></body>文件主体(所有要写的内容)4. 标签(<>)
（1）标签单双分类（根据有无单独的结束标签）：
1. 双标签（常规标签）：有单独的结束标签
h1~h6 p b strong i em del sup sub s strike ul ol dl dt dd li a table tr td
div span
2. 单标签（空标签）：没有单独结束标签
br hr img
（2）元素行块分类（根据有没有自占一行进行分类的）：
1. 块状元素：自占一行：
h1~h6 p hr ul ol dl dt dd li table div del
**2.行内元素：**宽度跟内容大小一致，并且可以跟其他的行内元素在一行内并列显示的：
b strong i em del s strike sup sub br img a imput buttom span
（3）标签作用
加粗：
<b>定义粗体的文本</b> //没有语义强调的意思，一般称为物理字体格式化标签
<strong>把文本定义为语气更强的强调的内容</strong> //有语意 强调
倾斜：
<i>显示斜体文本效果</i> //没有语义强调的意思，一般称为物理字体格式化标签
<em>把文本定义为强调的内容</em> //有语意 强调
删除标记：
<del>
<s>元素，已废弃，用来给文本加删除线(在HTML 4.01中废除)
HTML5 重定义了 <s> 元素，现在是被用来定义那些不正确的文本。
<strike> 定义加删除线文本(html5不推荐使用)
sup ：上标文本 sub：下标文本
**注：**语义强调作用的```<strong><em>```比```<b><i>```更容易引起搜索引擎的注意，但是如果只是为了加粗样式，建议在css样式表里面实现
**div标记** (division-部分)
可定义文档中的分区或节,可以把文档分割为独立的、不同的部分
作用：文档区域，文档布局对象
**span标记**
文本结点：用来组合文档中的行内元素5. 列表（ul, ol, dl）
HTML中有三种列表，分别是：无序列表(ul)，有序列表(ol)，自定义列表(dl)
无序列表
<ul>--unordered List
<li>列表项内容</li>
… …
</ul>
有序列表
<ol>-ordered List
<li>列表项内容</li>
… …
</ol>
自定义列表
<dl>Definition List
<dt>名词</dt>Definition term
<dd>解释</dd>Definition Description
</dl>6. 图片(img)
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />**1. src属性：**规定显示图像的 URL
2. title属性: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的;
3. alt属性: 规定图像的替代文本。[ælt] olt
注:所要插入的的图片必须放在站点下
src==source所用图片的来源(路径)
7. 超链接(a)
<a href="" title="" target="_blank"> 链接文本/图片</a>1. href属性：设置目标文件路径
2. title属性：超链接标题
3. target属性：设置超链接的打开方式 ['tɑrɡɪt]
属性值：_blank-新窗口打开 [blæŋk]
_self-默认的打开方式（本窗口打开）
_top 在顶层WINDOW对象中打开,一般用于多层框架嵌套的情况
_parent 在父窗口打开,一般用于框架内的窗口改变父窗口页面 ['peər(ə)nt]
Href== Hypertext Reference的缩写，意思是超文本引用
8. 表单(from)
作用：用来收集用户信息的：
<form action="test.html" method="post" name="myFomr">
<p><input type="text" name="userName" maxlength="50" placeholder="邮箱账号或手机账号"></p>
<p><input type="password" name="userPassword" placeholder="密码"></p>
<input type="submit" value="登录">
<input type="reset" value="reset">
</form>- **action属性：**规定当提交表单时，向何处发送表单数据。'ækʃ(ə)n]
- **method属性：**规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）浏览器使用method属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。['meθəd]
1.文本框(input)
<input type="text" name="uername" value="内容" placeholder="提示" maxlength="20"/>- type属性： 规定 input 元素的类型；（password，email，button）。
- value属性: 为 input 元素设定值；
- **name属性：**规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据，只有设置了name属性的表单元素才能在提交表单时传递它们的值。
- **placeholder属性：**规定帮助用户填写输入字段的提示
- **maxlength属性：**规定输入字段中的字符的最大长度
2. 按钮(button)
<input type="button" name="" value="按钮内容" />button和submit的区别：
submit是提交按钮起到提交信息的作用，button只是一个按钮
9. 表格(table)
作用：显示数据
<table width="600px" height="400px" border="3" cellspacing="0">
<tr>
<td rowspan="4">第一个单元格</td>
<td></td>
<td colspan="2" rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
</tr>
</table>- table: 标签定义HTML表格
- tr: 元素定义表格行(table row)
- td: 元素定义表格单元(table data数据)
- border: “表格的边框”
- bordercolor:“表格边框颜色”
- cellspacing=0: 单元格与单元格之间的间距
- cellpadding: 单元格与内容之间的空隙
水平对齐方式：align=“left/center/right”;
垂直对齐方式： vertical-align=“top/middle/bottom”;
注：对其方式在td,tr上使用 - colspan: 所要合并的单元格的列数” 横向合并;
- rowspan: 所要合并单元格的行数” 纵向合并;
10. HTML和XHTML的语法区别
XHTML 要求标签正确嵌套
XHTML 所有标签必须关闭 /
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理 < ">>二、CSS基础
white-space:pre
nowrap //文本不进行换行知道
text-overflow: //设置单行文本溢出是否显示省略号
clip 修剪文本CSS (cascading style sheets)WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页的显示样式。—级联样式表、层叠样式表
**语法：**选择符 { 属性：属性值；属性：属性值 }
1.样式表分类(内部、外部、内嵌)
1. 内部样式(style)
<style type="text/css">选择符 { 属性：属性值；属性：属性值 } </style>2. 外部样式(link)
<link rel="stylesheet" type="text/css" href="目标文件路径" />- rel: 规定当前文档与被连接文档之间的关系 stylesheet: 样式表
- **type: ** 规定被链接文档的类型
- href: 规定被链接文档的位置
3.外部样式表的导入-2(@import)
<style type="text/css">
@import url(目标文件的路径就文件全称);
</style>注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束
3.外部样式对比
两种导入样式表的方法比较：
- link 属于 HTML 标签，而 @import 是 CSS 提供的。
- 页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
- @import 只在 IE 5 以上才能识别，而 link 是 HTML 标签，无兼容问题。
- link 方式的样式的权重高于 @import 权重。
一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。
2. 选择器（选择符）
1. 元素选择器/类型选择器（标签 )
语法：元素名称{属性：属性值；}
说明：
元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span等。2. id选择器 (#)
语法：#id名{ }{属性：属性值;}
<标记 id="名称1 名称2" ></标记>
说明：
1） id属性值，在一个html文档中，必须是唯一的，不可重复，不能用关键字(所有的标记和属性都是关键字)
2）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
3) 最大的用处：创建网页的外围结构3. css选择器(.)
语法：.class名{属性：属性值;}
<标记 class="名称1 名称2" ></标记>
说明：
1）class选择符更适合定义一类样式；
2） 一个标记可以设置多个class名
3）class名可以重复
4）限定标签类型4. 群组选择器(,)
语法：选择器1，选择器2，选择器3{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组5. 后代选择器/包含选择器
语法：选择器1 选择器2{属性：属性值;}
说明：
包含选择器选择器1和选择器2用空格隔开，含义就是选择符1中包含的所有选择器2;6. 子选择器(>)
语法： 选择器1>选择器2{属性：属性值;}
说明：
选择符1和选择符2用>链接，选择符2必须是选择符1的子类7. 伪类选择器(:hover)
语法 ：
:link{属性：属性值;} //超链接的初始状态;
:visited{属性：属性值;} //超链接被访问后的状态; ['vɪzɪtɪd]
:hover{属性：属性值;} //鼠标悬停，即鼠标划过超链接时的状态;
:active{属性：属性值;} //超链接被激活时的状态，即鼠标按下时超链接的状态; ['æktɪv]
:focus //元素获得焦点的样式 ['fəʊkəs]
说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）使用与超链接相关的伪类选择符时，应为a元素定义href属性;8. 通配符(*)
语法：*{属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。
用法：常用来重置样式
全局样式
*{margin:0;padding:0;}
margin:0 auto; 让子元素相对父元素水平居中显示3. 选择器的权重
内联 id class 标签
1 0 0 0
# css中用四位数字表示权重，权重的表达方式如：0，0，0，0
# id 0100
# class选择器 （伪类选择符 :focus,:hover以及<a>:link） 0010
# 属性选择符的权重为 0010
# 元素a 伪元素 :before、:after 0001
# 后代选择符：1 2 = 1 + 2
# 子选择器 1 > 2 = 1 + 2
# 群组看选择符类型
# *{}(通配符) 0
# 继承 0
# 权重相同时，根据书写顺序而定，后书写的会把县书写的覆盖掉，会显示后书写的代码效果4. CSS特性：(层叠性和继承性)
**层叠性：**一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。
CSS的处理原则是：
1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。
2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的特殊性(权重)让元素应用特殊性(权重)高的选择器定义的样式。
继承：所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。继承得来的规则没有特殊性。
多数边框类属性，比如Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。(border属性是用来设置元素的边框的，它没有继承性)
块状、内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.
块状元素可继承：text-indent和text-align。
列表元素可继承： list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
css层叠性：
使用不同的选择符作用于同一个对象，每个选择符都有一些css声明/规则
如果规则没有发生冲突，这些样式都可以被执行
如果规则发生了冲突，根据选择符的权重/特殊性而定，执行权重高的选择符设置的样式
权重：
内联：1000
id：100
class 伪类：10
类型：1
群组：根据具体对象而定
包含：将使用的选择符相加=和
子：子结合符> = 0 其他选择符相加=和
通配父，继承的样式 子结合符：权重为0
css继承性： 子类可以继承父类的css样式
可以利用css继承，节省代码量，提高代码的可读性
5. 颜色(color)
可以用以下方法来规定 CSS 中的颜色：
- 十六进制色 ：十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。举例说，#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。
- RGB 颜色：RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
- RGBA 颜色：颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。 - HSL 颜色：颜色值是这样规定的：hsl(hue, saturation, lightness)。
Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。 - HSLA 颜色 ：颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
- 预定义/跨浏览器颜色名
6. 浮动(float)
margin:0 auto/margin:auto;放置在一个标签上，可以使此标签在父元素中水平居中
float:left/right/none
A. 给元素添加浮动之后，会脱离正常文档流
B. 子元素浮动了，父元素在没有设置高度的情况下，会高度塌陷
C. 给元素添加浮动之后，元素会产生块级框，而不论本身是什么元素类型
块状元素：
默认：
width:auto - 与父元素同宽
height:auto - 与内容的高度相同
加浮动之后：
width:auto - 与内容同宽
height:auto - 与内容的高度相同
设置具体的宽度和高度,设置的属性为多少，显示的大小就是多少
width:300px;height:300px
行内元素：
默认：不能设置宽度和高度，设置了显示无效
所以行内元素的显示大小，根据内容多少而定
加浮动之后：变成块状元素；
width:auto; =不设宽度
A. 对于块状元素而言,浏览器自动计算，，会与父元素同宽，
B. 对于块状元素而言，如果盒子浮动了，宽度与内容同宽
C. 如果给盒子设置具体的width:value，设置的多少，显示多宽
2. 浮动对盒子宽度的影响：
标签的宽度为：width:auto;
A. 对于块状元素而言,浏览器自动计算，，会与父元素同宽，
B. 对于块状元素而言，如果盒子浮动了，宽度与内容同宽
盒子的宽度为：width:value；
如果给盒子设置具体的width:value，设置的多少，显示多宽
3. 浮动对盒子文档流的影响
添加了浮动的盒子，会脱离正常文档流；
4. 父元素的高度塌陷
父元素在没有设置具体高度的情况下，子元素全部浮动了，父元素的高度为0；
5. 浮动的图片应用：以往这个属性总应用于图像，使文本围绕在图像周围
6. 浮动元素会生成一个块级框，而不论它本身是何种元素。
width:height固定宽度时，除了padding 不管里面有多少内容 width height不变
解决flaot父元素高度塌陷
1.overflow:块状元素，当width的属性值为auto/没写时，浏览器自动计算宽度，宽度是与父元素同宽
宽度：width:auto;
高度：400px
行内元素：不能设置宽度和高度，设置无效
7. background
background-image:url(…/img/mao.gif);
background-repeat:no-repeat;
background-position:100px 100px; 起始点时左上角 [pəˈzɪʃn]
background-position:100% 100% 起始点时中心
background-position:center;
background-position:227px 99px;
背景颜色：background-color
背景图片：background-image
背景重复：background-repeat [rɪ’piːt] 重复
背景定位：background-position [pəˈzɪʃən] 位置
背景状态：background-attachment [ə’tætʃm(ə)nt] e ta xu ment
background：color url repeat position attachment; ['kʌlə®]
单位
绝对长度单位、相对长度单位
绝对：cm mm in 等等
相对：
ex - 字符x的高度 1ex=x的高度
em - 当前元素/父元素的文本大小 1em=font-size
px - 设备上能显示的最小单位 css相对长度单位8. 文本(font)[fɒnt]
font-size: { none:[nʌn] norm:[nɔːm]
px：设定固定值
%:基于父元素的一个百分比值
}
font-family: {//规定元素的字体系列
(1)此属性设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，将尝试下一种字体。
(2) 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体""Times New Roman"。
(3) 多个字体系列是用一个逗号分隔指明;
}
font-weight:设置显示元素的文本中所用的字体加粗 { [weɪt]
1-500=normal ,600-900=bold [bəʊld]
bolder 更粗
}
font-style: //设置文本倾斜{
italic [ɪ'tælɪk]
oblique [ə'bliːk]
}
text-indent{
%
}
text-align:设置文本水平对齐{ [ə'laɪn]
left right center [ˈsentə(r)] justify
行内元素和文本是一样的 文本和行内元素都有作用对 块元素水平居中(0 auto)
}
text-decoration: 文本修饰 [dekə'reɪʃ(ə)n]{ // [dekə'reɪʃ(ə)n]
underline:文本下一条线 [ʌndə'laɪn]
overline: 文本上一条线
line-through: 穿过文本一条线 [θruː]
}
text-transform：{ //设置文本大小写 [træns'fɔrm]
capitalize: ['kæpɪtəlaɪz] 文本单词开头大写
uppercase: ['ʌpə'keɪs] 文本定义大小
lowercase: [ləʊə'keɪs] 文本定义小写
}
letter-spacing: { //定义字符之间的间隔
+ -
对汉字起作用
}
word-spacing: { //定义单词与单词之间的间隔z
只对单词有作用（字母和汉字无效）
}
顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family
font:[italic] [bold] 20px/{100px] '楷体';9. 行高(line-hight)
文本行的基线间的距离
默认字体16px => lin-hight=21px;
line-lenght:number 此数字会与当前字体尺寸相乘来设置行间距(2=2em,1em=元素文本大小 )
%：基于当前字体尺寸的百分比(100%=当前尺寸)
10px
16px
10px
10px
16px
10px
文本在行高内垂直居中
应用户单行文本 控制文本的垂直居中 应用于多行文本控制多行文本的间距10. 边框(border)
border-color:设置边框颜色 red green blue;上 左右 下
border-weight:
bordrer-style: 设置边框类型 dotted(点状) dashed(虚线) solid(实线) double(双线)
border- : 元素的所有边框设置宽度，或者单独地为各边边框设置宽度。outline****：（轮廓）**是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，轮廓线不会占据空间，也不一定是矩形。
outline-width
outline-style
outline-color
outline:简写
border跟outline的区别：
1. border可应用于几乎所有有形的html元素，而outline是针对链接、表单控件和ImageMap等元素设计
2. border占据空间，outline不占据空间11. 列表(list)
list-style：none;去掉列表符号
//定义列表符号的位置 [pəˈzɪʃən]
list-style-position:inside（列表项目放置在文本以内，且环绕文本根据标记对齐） outside(默认)
list-style-image: 设置图片作为列表符号
list-type: 设置列表项标记的类型
disc(实心圆)square(实心方块)decimal(数字)
[dɪsk] [skweə] ['desɪm(ə)l]12.盒模型
占据的宽度：width+左右padding+左右border+左右margin
占据的高度：height+上下padding+上下border+上下margin
1. 盒模型的四个组成部分：
content[kən'tent] padding border margin
padding: 调整内容在盒子中的位置关系
1. 需要添加到父元素上
2. 不允许是负边距值
3. 可以把内容撑大
4. 行内可以设置padding,但是显示有问题(上下显示有问题，左右没问题)1）. 将图片放在超链接中，在ie的低版本浏览器中，会自动解释出边框；
解决方法:img{border:0/none}
2）. 将图片放在行内元素中，在行内元素没有设置高度的基础上，会将行内元素在图片自身高度的基础上，撑大3~5px
A. img{display:block}
B. div{font-size:0
c. overflow:hidden;
d.float:left;}”。如果要实现图文混排，这种方法是很好的选择
5. display:设置元素的显示类型
block：将元素设置为块状元素
图片将盒子撑大3~5px的原因：、
因为图片是行内元素，跟匿名文本之间的对齐方式是基线对齐，在文本基线的下行距
会外边距(margin)
% 属性总结
text-indent:参照父元素的宽度计算
padding margin :基于父元素的宽度计算
width height: 父元素的width,height
line-height：参照元素的font-size
background-size: 参照父元素 你
absolut:left/right/top/bottom负值属性
text-indent -负值
background-postion: 负值
margin
absolut:left/right/top/bottom
z-index: 0=auto简写属性
background:
border:
font:
list-style: type position
list-style: url positionmargin：auto - 浏览器计算 --具体valuepx/em/cm/mm %
padding：不能为auto ，---具体valuepx/em/cm/mm %
1. 给子元素设置margin-top时，会影响到父元素一起向下移动；
A. 给父元素后者子元素添加浮动
B. 给父元素加边框
C. overflow:hidden;
2. 两个盒子之间的margin区域是可以重叠的（没有浮动的情况下）；
3. 两个浮动盒子之间的margin区域是不重叠的；
4. margin可以设置负值，显示方向和正值完全相反；
5. 行内元素可以执行margin，但是上下显示 不正确，左右显示正确(padding一样)overflow
overflow: //主要应用 设置溢出盒子的显示方式
visible:默认溢出，正常显示 [ˈvɪzəbl]
hidden:溢出以后，隐藏 ['hɪdn]
scroll: 显示滚动条 [skrəʊl]
auto: 如果溢出显示滚动条，如果不溢出就不显示滚动条
其他应用：
A，给父元素添加overflow:hidden 可以解决高度塌陷
B. 给父元素添加overflow:hidden 解决给子元素设置maring-top 影响父元素一起向上移动
overflow-x
overflow-y
省略
text-overflow: clip //直接裁剪
ellipsis //显示省略号
string 新增的，浏览器不支持
width:设置官渡
overflow: hidden
white-space:nowrap //强制让文本在一行内显示块级格式化上下文 BFC
其实归根结底，这里的浮动没有清除，只是因为overflow属性的值是hidden的时候会形成一个BFC，而BFC就是一个隔离的渲染区域，因此浮动造成的高崩塌会导致对外部布局的影响，为了消除这种不益的表现，计算高度的时候浮动元素也计算进去了。
需要保证满足下面至少一条就会触发BFC：
根元素body；
设置了float值不为none的元素；
设置了overflow属性不为visible的元素；
设置了属性position不为relative和static的元素；
设置了display的值为flex、table-cell、table-caption和inline-block中的任何一个的元素。
可以看出来，就是一个比较独立的块，因为是一个独立的环境，在开发时候适度使用会有效降低开发和维护难度。
大致可以归纳为三个方面：独立性、垂直分布规则和水平分布规则。
独立性：BFC是页面上一个隔离的容器，和外面的关系是不会互相影响，对浮动而言也是，不会和浮动元素发生重叠，高也和上面提到的一样不会崩塌；
垂直分布规则：BFC的内部里面的一个个盒子在垂直方向一个接着一个排放，位置由margin决定，两个相邻的盒子margin会发生重叠；
水平分布规则：BFC里面的盒子的左外边缘和包含块的左边相接触，简单的理解就是水平方向不会发生margin重叠。要实现溢出时产生省略号的效果还需定义：
1）、容器宽度：width：value；
2）、强制文本在一行内显示:white-space：nowrap;
3）、溢出内容为隐藏：overflow：hidden；
4）、溢出文本显示省略号：text-overflow：ellipsis; [ɪ'lɪpsɪs]元素类型
- 块状元素
1. display: //设置盒子的显示类型
none:此标签在浏览器中不显示
block：此标签显示为块状元素-div p ul ol dl dt dd h1 form h1~h6
inline:此标签显示为行内元素-a span b strong i em img br sup sub
inline-block:此标签显示为行内块元素 - input; 行内
list-item:此标签显示为列表项标签 - li
table:此标签显示为块级表格标签 - table
元素类型：
块状级元素：display:block list-item table
行内级元素：display:inline inline-block inline-table;
2. 块状元素的特征：
(1) 可以设置宽度和高度
(2) 自占一行
(3) 作为容器使用，作为盒子使用，可以正确解释4盒模型中的属性；
(4) 给盒子添加浮动之后，盒子在没有设置宽度和高度的情况下，在没有内容的情况下，宽度，高度为0；
行内设置 a img span i em b strong br sub sup del s
3. 行内元素的特征：
A。不能设置宽度和高度
B。可以和其他行内元素在一行内显示
C。行内元素也符合盒模型的特征，也能执行盒模型中的规则，但是margin，padding，border的上下显示不正确，左右显示正常；
D。盒子的大小有内容而定，如果给行内元素添加浮动之后，会生成块级框，变成块状元素1.行内元素
2.行内元素1
ver-align练习
置换元素和飞置换元素
小米商城行内元素垂直方向的对齐方式：默认基线对齐
1.给元素添加float 摆脱基线对齐 基线(小写字母x ,s,a 的下断沿的先)
2.行内元素在开发工具书写时，如果进行换行和空格
解决：A. 写在一行，不进行换行
B. 给所有的行内元素添加float
c. 给行内元素的父元素设置 font-size: 0; 当时行内元素有继承 font-size:0; 影响元素内的文本大小为0； 解决：给行内元素再设置font-sizevertical-align
vertical-align 设置元素的垂直的对齐方式
baseline: 默认 元素放在父元素的基线上(父元素的基线就是文本内容的基线)
top
bottom
middle 垂直居中对齐
sub: 垂直对齐文本的下标
super:
在没有边距没区别
%：当前line-hight(开发不推荐) 允许负值 正值：向上移动当前行高的大小
负值：向下移动当前行高的大小置换元素
定位
postion:
absolute 绝对定位 相当于static 定位以为的第一个父元素定位
body--position:static div没设就是static
hmlt---是绝对定为诶元素最大的参照物-默认
fixed行内元素
1. 行内元素在垂直方向的对其方式：默认是基线对其
基线：参照css核心属性的笔记-line-height
小写的英文字母x,s,a的下断沿的线
2. 行内元素在开发工具中书写时，如果进行换行或者空格，在浏览器中，两个标签之间有一个空格；
3. 去掉空格：
A. 写在一行中，不进行换行；
B. 给所有的行内元素添加浮动；
C. 给行内元素的父元素设置font-size：0；可以解决这个问题，但是行内元素会继承font-size:0;造成元素内的文本大小为0；
解决：给行内元素单独再设置文本大小
D. 都都转为inline-block
4. vertical-align： 设置元素的垂直对齐方式
注意：用在行内元素上面才有效
5. 图片将盒子撑大3~5px的原因
因为图片是行内元素，跟空白字节之间的对其方式是基线对其，在文本基线的下面有下行间距，下行间距会将盒子撑大3~5px；
方法：img{display：block}
div{font-size:0;}
img{vertical-align:只要不是baseline ，推荐使用top，middle，bottom}
6.
静态定位的特点：
position:static; 静态定位-没有特殊的定位效果，正常在文档流中显示
绝对定位的使用和特点：
(1) : position:absolute-绝对定位;
(2) : 根据参照物进行定位（参照物==包含块：有除了static以外的定位设置，并且是定位元素的父元素）
(3) : left right top bottom 确定元素坐标的位置
(4) : left right top bottom:属性值可以是正值也可以是负值,属性值可以为%，px
(5) 我们可以改变包含块的对象，不一定非是html
只要是父元素，只要设置了其他的定位设置（除static以为），都可以作为定位元素的参照物
(6) 绝对定位会使元素脱离正常文档流；
body: ----默认是position:static;
html:----是绝对定位元素最大的参照物，具有除静态定位以外的其他定位设置；
相对定位的使用和特点：
（1）相对定位不会使元素脱离正常文档流；
7. 元素在垂直方向上的层叠顺序
(1) 如果元素没有设置css表现，按正常的书写，后书写的显示在上面
(2) 如果元素设置定位（除static之外），层叠顺序比没有设置定位的元素高；
(3) 如果两个盒子都设置了定位，后书写的比较高
(4) 可以设置z-index属性，来提高元素的层叠顺序；
z-index: auto/number;
值越大，层叠顺序越高
值越小，层叠顺序越低
z-index属性必须结合position属性使用才有效（属性值除static以外）；
重点： 给盒子添加浮动，会脱离文档流
给行内元素添加浮动，产生块级框，变成块状元素
给盒子添加绝对定位，会脱离文档流
给行内元素添加绝对定位，产生块级框，变成块状元素
p 标签不能 嵌套div
a 标签不能嵌套 a标签
h1 标题不能嵌套 标题- 盒模型
content(width,height) + border + padding + margin- overflow使用-设置溢出容器的内容，如何显示
visible:表示溢出正常显示 [ˈvɪzəbl]
hidden：表示溢出容器的内容，被裁剪掉
scroll：让容器显示滚动条，查看其余的内容 [skrəʊl]
auto：如果溢出显示滚动条，不溢出就不显示
省略号的设置：
text-overflow：clip - 直接裁剪
ellipsis- 显示省略号
string - 新增的，浏览器不支持
width:设置宽度 overflow：hidden-溢出隐藏 white-space：nowrap 强制让文本在一行内显示； - 元素类型
类型分类： 块状元素 行内（内联）元素
块状元素：对应的标签：li ul ol dt dd form table h1~h6 div p
特征:(1) 能设置宽度和高度（2）自占一行 （3）作为容器使用，能正常解释盒模型的属性 （4）盒子在浏览器中以块的形式显示，宽度默认是auto与父元素同宽，高度根据内容而定，没有内容宽度为0
行内元素：对应标签： a img i em b strong span br sup sub del s input
特征：（1）不能设置宽度和高度 （2）在一行内显示（3）也可以遵循盒模型的规则，但是个别显示不正确，border，padding，margin上下显示不正确，左右显示正常 （4）盒子的大小有内容而定，如果添加了浮动，盒子变成块状元素
display：设置盒子的显示类型
none：让盒子消失不可见
block：快装
inline：行内
inline-block：行内块元素
list-item：显示列表项 -li
table：显示为块状表格 - 定位：
position：
absolute：绝对定位
（1） 会使元素脱离正常文档流
（2） 根据包含块进行定位
包含块：离绝对定位元素最近的并且有定位设置的父元素，定位设置不能是默认值-static
（3） 根据left right top bottom
相对定位：relative ['relətɪv]
（1） 不会使元素脱离正常文档流
（2） 根据自身在正常文档流中的位置进行坐标的偏移
（3） 根据left right top bottom ['bɒtəm]
fixed：固定定位 [fɪkst]
（1） 会使元素脱离正常文档流
（2） 根据窗口进行定位
（3） 根据left right top bottom
stiky：粘性定位
（1）在窗口范围内，定位效果像相对定位，当移动浏览器滚动条，盒子距离窗口的位置=设置的像素数时，盒子位置不发生改变，像固定定位
static：默认的定位效果，没有任务特殊的定位，在正常文档流中显示
z-index：设置元素的堆叠顺序；
auto：跟父元素的堆叠顺序相同
number：数字越大，顺序越高，数字越小，顺序越低
注意：必须结合position：absolute，relative，fixed，不能是static
包含块的概念：为绝对定位的元素提供坐标偏移的参照物
设置元素为包含块：给元素添加position：absolute，relative ，fixed 不能是static（推荐使用相对定位，因为不会使用元素脱离正常文档流）
锚点：（1）a href = “#锚点名”
在同一页面的不同位置进行跳转
（2） a href =“文件路径#锚点名”
跳转到另外一个页面的锚点元素所在的位置
overflow-x，y：设置某个方向上内容溢出如何显示，属性值跟overflow相同 - 宽高自适应：
概念，优势
伪元素选择符：5个 after['ɑːftə]
元素的高度如何自适应窗口的高度
清除浮动的三种方式：3种 overflow:hidden
[ə(ʊ)'pæsɪtɪ]
隐藏元素：display：none opacity：0-1 visibility：visible hidden
一组属性；min/max-width/height ming max - 属性选择符：权重是10；
- 图片整合的概念（精灵图 图片精灵）
- 图片整合的优势（1）减少请求次数，提高加载速度 （2）减小图片的体积
- 兼容
五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。360浏览器、QQ浏览器都是采用双内核。
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
常见的兼容问题：
双倍边界
默认高度
图片间隙
cursor属性：设置鼠标指针的形状；
png：ie支持png8位图片的背景透明，不支持其他的位数；
H5
特点：
添加 语意标签 canvas画布 多媒体交互标签 (video src ) mack(高亮显示文字)
- 骨架更简单
header nav section aside(侧边栏) footer figcaption
email
url 检测地址
number 专门用来输入数字
max min
step:默认1
range:
max min step
search: 比文本框多了x
color: 调色板
tel: 和文本框没区别 兼容性很大
date：
month 年月
week 年周
time 小时分钟
datetime 没显示 世界统一时
datetime-local 北京时间
output：输出框
属性
required:内容空白不能提交
placeholder:
pattern:正则表达式
autofocus: 页面刚加载自动获得焦点
list:（datalistId）与datalist标签>option 配合使用 类似select
autocomplete:自动完成功能-name历史记录
min max step
novalidate: 规定在提交表单，取消验证内容
multiple: 输入可以输入多个内容，用 ， 分开
form(fomrId值):控件链接idfrom
浏览器模式
标准模式：ie高版本浏览器 chrome safari
怪异模式：ie6 ie7
什么情况下会在怪异模式下解析：
- 文档声明不正确，或者不存在
-h5中只有一种文档声明 <!DOCTYPE html>
html4中文不能中
1. 过渡版本
标签的使用：不能使用框架标签
2. 严格版本
不能使用弃用标签，不能使用表现性标签，不能使用框架标签
盒模型在不同浏览器中的解释
#### css3
渐进增强
优雅降级
基本选选择符
层级选择符
属性选择符：
input[type="e"]//e开头
input[type="$e"]//以e结尾的input标签
input[ytpe="*=e"] //包含e的input标签
伪元素选择器
::first-letter
::firset-line
::before
::after
::selection
伪类选择器
:target //目标伪类选择器：某个目标元素被触发的时候
锚点
e:not(f) 否定伪类选择器
结构伪类选择器
e:mpty // ：当元素内容为空时
结构
:root // 给根元素(html)添加有
:nth-child(n) 匹配父元素中的第n个子元素
n:表达式：2n+1=odd, 2n=even
数字 表达式 关键字 n
:nth-last(n)
:nth-of-type(n)://先看类型在看个数
:only-child :看个数再看来下
:only-of-type //来类型再看数字
:first-child
:last-child
:first-of-type
:last-of-type
UI元素状态伪类选择器
:hover
:active
:focus
E:disabled //设置该元素处于不可用状态的样式
E:enabled //设置元素处于可用状态的样式
E:read-only //元素处于只读状态
E:read-write //
E:checked //表单中radio or checkbox 处于选中状态
E:default //页面打开时 默认处于选中状态 （一直执行）
E:selection //指定当元素处于选中状态时的样式
E:indeterminate //当页面打开时，如果一组单选框都没有选中才执行，如果用户选中了一个，则样式取消
valid
invalid
###### 内核前缀
Trident内核 -ms -ms-border-radius
Gecko内核： -moz (火狐)
Presto内核 -o
Webkit内核: -webkit
###### 文本属性
中文默认自动换行，字母
word-break:
norm:默认
break-all：允许单词内换行
keep-all: - 字符才换行
word-wrap: 允许长单词 or url 内部进行换行
text-shadow: 向文本添加应用
3px 3px 模糊 color,-3px -5px 模糊 color
###### 边框
border-radius: 20px 30px; //对角线角 圆角边框
border-image: //边框图片
border-top-left-radius:40px 90px 水平半径 垂直半径
border-image-source
&& border-image-slice: //裁剪
border-image-repeat: 图片平铺
border-image-width: 图片边框宽度
border-image-outset
brder-colors //设置边框颜色
box-shadow: //设置盒子的阴影
h-shadow: 0
v-shadow ：0
blur： 模糊距离
[]: 阴影大小 默认和盒子一样大
color
inset: 内阴影
指定元素的的宽度与高度的计算方法
box-sizing: content-box //width =盒子内容区域大小 =标准模式
border-box // 边框盒子大小 （content+padding+border) =怪异模式
##### 背景
background 属性提升
background-size: width height
%：盒子宽度的% 盒子的%
number: 会改变比例
cover: 等比例改变宽高，能覆盖 可能超出盒子
contain: 等比例改变宽高，按最小的放大
默认情况下：
如果盒子有内边距，背景图从内边距的padding开始显示
如果没有padding,背景图从内容盒子的
background-origin // 规定图片的显示区域
border-box //背景图从边框盒子开始显示
padding-box //默认效果
conente-box //从内容位置开始显示 没有padding
background-clip //背景图片的裁剪区域
border-box 背景裁剪到边框盒
padding-box //
content-box 背景图裁剪到内容区可见
text
-webkit-text-fill-color: //文本填充颜色
颜色
rgba()
hsl(色调，饱和度，亮度) {0,360} {0,100%} {0,100%}
hsal
transparent
##### 字体
.ttf eot woff otf svg
定义字体
font-face规则字体定义规则
@font-face{
定义字体名称
font-family: “myfont”
字体路径
src:url(…/font)
}
font-family: “myfont”
作业 名鞋侧边栏
淘宝工具栏
##### css3弹性盒
新的布局模式-flexible box布局，即收缩布局盒模型(弹性盒布局)
3个版本 旧版本 混合版本 新版本
容器上：
display //设置元素为弹性盒
flex/line-flex //块状弹性盒
使内部元素获得弹性布局效果 ，原本垂直
块级弹性盒：
父元素如果是弹性盒子，子元素作为弹性项目，在没有设置width 的情况下，width 与内容铜矿，
子元素作为弹性项目，在主轴方向方向从主轴起点上一次排序
子元素在没有设置height的情况下，height会拉伸与父元素同高 ，如果设置了多高就多高
行内弹性盒：
flex-direction //规定灵活项目的方向
row:默认值，灵活的项目水平显示
row-reverse: 与fow相同，但是以相反的顺序排列
column: 灵活项目将垂直显示
column-reverse: 主轴方向垂直，但是以相反的顺序排列
flex-wrap // 用于设置
nowrap: 默认 不换行不换列 改变width height
wrap : 规定灵活项目必要时换行，换列
wrap-reverse
简写：
flex-flow：flex-flow: column-reverse wrap-reverse
justify-content //设置子元素在主轴(水平方向的/垂直方向)上的对齐方式
flex-start //项目位于主轴的开头、
flex-end //项目位于主轴的结尾
enter //位于主轴的中心
space-between // 如果父元素的width大于子元素，留下的空白平均分给两个子元素之间
space-around: //平均分别分给每个元素的两边
align-items //设置子元素在侧轴方向的对齐方式
stretch ： 拉伸到适应容器 父元素没有height
center: 元素位于容器中心
flex-start : 侧轴的起点开始
flex-end:
baseline
align-content // 设置多行子元素在侧轴上的对齐方式（多行时，属性才生效)
stretch: //元素拉伸以适应容器
center //元素位于容器的中心
flex-start: //侧轴起点位置
flex-end //侧轴重点
space-between: //
space-around:
##### 视口（viewport）
视口：初始视口980 考虑移动端访问pc端css3媒体查询
@media meatype and|not|only ((条件表达式){
screen
}
css3添加媒体属性
only： 限定某种设备执行媒体查询
ccs2：媒体只能查询设备，没有条件移动端适配 改变html-font-size
vw
js
@media 不精细,避免
响应式布局
常见布局方案
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
**可切换的固定布局：**同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
**弹性布局：**以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；
移动优先（从移动端向上设计）；
无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
