主流浏览器及其内核
浏览器分为shell 和 内核
主流浏览器及其内核
IE trident
Firefox Gecko
Google Chrome webkit/blink
Safari webkit
Opera presto
1.行级元素：inline
内容决定元素所占位置
不可以通过css改变宽高
span strong em a del
2.块级元素：block
独占一行
可以通过css改变宽高
div p ul li ol form address
3.行级块元素：inline-block
内容决定大小
可以通过css改变宽高
img
可以改变display:的内容来改变元素的类型
1.3.都带有inline 所以都带有文字特性
所以图片并排时会被分割出一个缝隙，把图片之间的空格回车直接去掉即可
<strong>加粗</strong>
<em>斜体</em>
<p>单独成段</p>
<h1>六级标题</h1>
<h6>独成一段，更改字体大小，加粗字体</h6>
<del>中横线</del>
<address>成段且斜体</address>
<小于符
>大于符
空格
<br>换行
<hr>水平线
<ol type=“排序方式” reversed="reversed" 逆序排列 start="2" 从2开始排列，只填数字>
1/a/A/i/I
<li>有序列表</li>
<li></li>
<li></li>
<li></li>
</ol>
<ul type="none"<!-- 默认值 square 方块 circle 消除 none -->>
<li>无序列表</li>
<li></li>
<li></li>
</ul>
<img src="图片地址" alt="图片信息" title="图片提示符"> 图片设置大小一般只设置一个，另一个元素会自动等比例缩放
图片设置宽度高度的时候只用一个属性会同比例缩放，搜索引擎的优化用alt中的内容
<a href="网址" target="_blank" ></a><!-- 表示在一个新的页面打开该链接 默认的是_self-->
<a href="tel:17370958134">打电话</a>
<!-- 2.a标签还可作为锚点定位使用
3.可以打电话使用
4.协议限定符
-->
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
table是表格
tr是表示行
td是指一行有几格
属性：border是边框厚度，cellpadding是内边距厚度，cellspacing是外边距厚度
一般第一行用th不用td，会加粗居中显示
rowspan表示合并行
colspan表示合并列
表示该元素鼠标悬浮时显示小手
cursor: pointer;
background-image: url(../images/01.png);背景图片
background-repeat: no-repeat;图片是否会重复
background-position: center;图片位置
background-size: cover;优先铺满屏幕，图片可能显示不全
background-attachment: fixed;背景不会随着其他元素的滚动而滚动，一定要写在引入背景图片的代码的下面，否则没效果
选择器
1. id选择器 <div id="名称"></div> 在css中写#名称{ 代码 }
2.class选择器（可多选）
<div class="名称"></div> css中写.+名称{代码}
多个div可共同应用一个css中的名称
一个div可应用多个css中名称的效果
3.标签选择器 主要用于初始化标签的效果
直接在css中写标签名称+{代码}即可
4.通配符选择器
css中加一个*{代码} 在所有标签都应用
5.属性选择器 在css中加标签+[id] 应用到所有有id属性的div等，其他以此类推
或[id="精确"]
父子选择器：（不一定用标签写，标签里面的条件也行）css中可写 div span{ 代码}选择div中的span
直接子元素选择器：css中写div > span就只选中div下的span，而不选中strong中的span，
并列选择器：用多个限制条件选中一个元素，如：div.id{代码}（id为id或class所代表的值）
分组选择器：不同的类别之间用,分隔 把很多不同类型的选择器组合到一起
兄弟选择器，A~B，从A开始找弟弟，不找哥哥，往下找不往上找
伪元素选择器：
/* 为某个元素的第一行文字使用样式。 */
:first-line
/* 为某个元素中的文字的首字母或第一个字使用样式。 */
:first-letter
/* 在某个元素之前插入一些内容。 */
:before
/* 在某个元素之后插入一些内容。 */
:after
内容在选择器中用context:
伪类选择器
加上空格找孩子，不加空格找所有叫自己本身名字的
:first-child
:last-child
:nth-child(序号)
:link 未访问
:visited 已访问
:hover 鼠标悬停
:active 鼠标按下
多重选择器时权重相加来计算优先级
!important>行间样式>id>class=属性选择器>标签选择器>通配符选择器
css权重
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
1000 256进制
快捷方式：
伪类选择器加>单指一级下面的孩子
布局尽量让父级来做
如果加浮动要在父级加overflow：hidden，让高度自适应
父级尽量不要给高度，让子级自己撑起来
div加通长背景，ul限制宽度，li自己调整占ul百分之多少
莫名出现空白可以在父级设置字体大小为0，然后子级再去覆盖字体
display 属性设置是否及如何显示元素。
display 显示状态
display:none 隐藏
display:block 块显示
display:inline 内嵌
display:table 表格显示
display:list-item 项目列表
这个属性用于定义建立布局时元素生成的显示框类型。
对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，
因为可能违反 HTML 中已经定义的显示层次结构。
对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
div中属性
font-size:字体大小
font-weight:bold;加粗
font-style:italic;斜体
font-family:arial;常用字体
boder:大小 实虚体 颜色;（可用boder画三角形）！！！
boder-width,
boder-style:solid(实体)，dotted(点状虚线),dashed(条状虚线);
boder-方向：为某一方向的边框
text-align:文字对齐方式 left center right; 垂直方向文本居中：让单行文本所占的高度等于容器高度
line-height:单行文本所占的高度
text-indent:首行缩进 2em;
em：1em=1*font-size;
text-decoration: line-through(中横线) none(无横线) underline(下划线)
cursor:(当鼠标移动到该区域会发生什么变化) pointer(网页链接效果，小手) help(问号)
伪类选择器：(给选择器选中的元素增加鼠标移上去的动态效果)，在选择器后加:hover{代码}
color:字体颜色;
1.单词(透明色：transparent)
2.颜色代码
3.颜色函数
2.颜色代码：#xxxxxx
前两位：00-ff 红色的饱和程度
中间两位00-ff 绿色的饱和程度
后面两位：00-ff 蓝色的饱和程度
当三个都两两相同的时候可以简化为一个
如ff4400可写为f40
3.颜色函数rgb(0-255,0-255,0-255);
定位 position
z-index:表示定位在第几层，数越大，离屏幕越远
1.绝对定位absolute
脱离原来位置进行定位
相对于最近的有定位的父级进行定位，如果父级都没有，则相对于文档进行定位
left:
top:
2.相对定位relative
相对于原来的位置进行定位
保留原来位置进行定位
3.固定定位fixed
不随页面滚动而移动
原则
用relative作为参照物
用absolute进行定位
全屏居中：
div{
position:absolute;
left:50%;
top:50%;
margin-left:-0.5个身位
margin-top:-0.5个身位
}
盒子模型
外边距 margin默认值为8px
边框 border
内边距padding
内容(高度height*宽度width)
四个值的顺序就是上右下左
若是三个值的话，对称位相等(左右）
