1.html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
</body>
</html>
2.DOCTYPE声明放在html文件头部
最新HTML5用<!DOCTYPE html>声明
3.css的引入方式
a.直接在html下引入<style></style>
b.直接写在div内；如<div style="background=red;"></div>
c.写一个css文件（文件里不用写style），在html头部中引用；
<link rel="stylesheet" href="./my.css"> (./表示在根目录下）
d.在css文件中引入；@import url(../star.css);（必须写在css文件的开头）
4.ID选择器：ID="id名"，在样式中用# +id名{}表示
id名要以英文字母开头；id名是唯一的
class选择器：class="class名"，在样式中用 . + class名{}表示
标签名选择器<class选择器<id选择器<行间样式
5.div的布局属性position属性
a.position:static;无定位；表示div没有position属性不能用top、left等定位
b.position:relative;相对定位；表示div用top、left、right、bottom来定位
定位时根据父div，没父div时用他的前一个同属性div
c.position:absolute绝对定位；能用top、left等将div准确的移到你想要的位置
能覆盖div，就像图层的最上层；定位时根据父同属性的div定位，没有
同属性的父div时相对于body定位（注意：1.如果父div不是absolute属性
不会影响到该子div的定位；2.如果改div没有用top等定位会默认放置相对于
上个div的高的位置下）
d.position:fixed;相对于窗口的固定位置；于absolute类似，当窗口滚动时div不会
随着窗口滚动
6.css的基础样式：
width:100px;宽100像素
height:100px;
背景颜色蓝色
background-image:url("图片路径");背景图片
background-repeat : repeat | no-repeat | repeat-x | repeat-y 如何重复背景图片
平铺/不平铺/向x轴平铺/向y轴平铺
background-position:第一个值（x轴位置）第二个值（y轴的位置）;
background的复合写法：
background:color image position repeat;
例：background:red url("img/1.jpg") 30px 100px no-repeat;
background-attachment:fixed;背景图固定不滚动；
background-size:第一个值（x轴的比例） 第二个值（y轴的比例）;
7.border边框
border-width:50px;边框宽度
border-top-width;边框顶部宽度 border-right-width:边框右边宽度
border-bottom-width:边框底部宽度 border-left-width:边框左边宽度
border-style:solid;边框样式：实线
border-color:blue;边框颜色：蓝色
border的复合写法：
border:border-width border-style border-color;
border-top:border-top-width border-top-style border-top-color;
border-radius:10px;边框圆角为10像素
8.padding内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding的复合写法：
padding:10px 20px;俩个值 第一个值代表上下 第二个值代表左右
padding:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个至代表下
padding:10px 20px 30px 40px;四个值代表上右下左
9.margin外边距
margin-top;上外边距
margin-right;右外边距
margin-bottom;下外边距
margin-left;左外边距
margin的复合写法和padding类似；
注意：标签的嵌套 确定父子级关系
a.第一个子级的margin-top会在特定的情况下穿透父级
规避方法：1、给父级加边框
2、给父级加 overflow:hidden;
3、不要用margin-top，用父级的padding-top代替
b.兄弟关系的margin-top和margin-bottom会叠压
10.文本设置(以下可以继承文本样式）
font-size 文字大小（一般为偶数）
font-size：16px； 字体为16像素
font-family 文字字体
font-family："SimSun";字体为宋体
color 文字颜色
color:rgb(255,0,0);字体为红色
line-height 文字行高
text-align 文本对齐方式（left center right）
text-indent 首行缩进（em缩进字符或者是具体的数值）
font-weight 文字着中（normal bold bolder 100-900）
font-style 文字倾斜（normal italic oblique）
text-decoration 文本修饰（none underline overline line-through）
letter-spacing 字母间距（具体的数量px）
word-spacing 单词间距（以空格为解析单位）
11.常见的复合属性
background:background-color background-image
background-position background-repeat
border:border-width border-style border-color
padding:padding-top padding-right padding-bottom padding-left
margin:
font:font-style font-weight font-size/line- height font-family;
12.常见标签
title标签 写法：<title></title> 双标签 语义：网页标题 权重最大
div标签 写法：<div></div> 双标签 语义：无意义
h标签 h1~h6 写法：<h1></h1> <h2></h2> ...<h6></h6> 语义：标题
h标签默认样式：font-size font-weight margin h1权重最大h2次之
p标签 写法：<p></p> 语义：段落 默认样式：margin p标签在嵌套里不要包含块元素的标签
ul标签 写法：<ul></ul> 语义：无序列表 默认样式：margin padding-left list-style-type
li标签 写法：<li></li> 语义：列表项 默认样式：list-style-type
ol标签 写法<ol></ol> 语义：有序列表 默认样式：margin padding-left list-style-type
ul，ol和li是组合标签 ul，ol的第一层子级一定是li li的父级一定是ul或ol
dl标签 字典标签 写法：<dl></dl> 语义：自定义列表 默认样式：无
<dt></dt> 语义：列表标题 默认样式：无
<dd></dd> 语义：列表说明 默认样式：margin-left
块属性标签的特性：1、默认是父级100%的宽
2、支持所有CSS的样式
3、独占一行
内联属性的标签：
内联标签 特性：
1、同属性的标签排在同一排
2、内容撑开宽度
3、不支持宽高，不支持上下的padding和margin（支持左右的），
4、代码换行被解析 间距的大小取决于父级的font-size的大小
span标签 写法：<span></span> 语义：无意义
strong标签 写法：<strong></strong> 语义强调 默认样式：font-weight 权重比较高
em标签 写法：<em></em> 语义强调 默认样式：font-style 权重比较高
a标签 写法：<a href="需要连接的网页地址" target="打开网页的方式"></a> 语义：超链接
默认样式：color text-decoration cursor
target="_self"(默认)当前页打开 target="_blank"新窗口打开
href属性中：1、如果要连接一个网址，一定要加http://
2、#代表连接到当前页
内联块块标签：
内联块属性特性：
1、同属性的标签排在同一排
2、内容撑开宽度
3、支持所有的CSS的样式
4、代码换行被解析，间距大小取决于父级的font-size的大小
注意：图片路径地址一定要正确，alt属性一定要写
img标签 写法：<img src=图片的路径地址"" alt="图片说明"> 单标签 语义：图片
默认样式：在低版本浏览器中有默认的边框
13.标签类型的转换
显示为无：display:none;
块属性 display:block;
内联属性：
内联：display:inline;
内联块：display:inline-block;
14.浮动的样式和特性
浮动的特性：
1、浮动的元素排在同一排
2、浮动的元素内容撑开宽度
3、浮动的元素支持所有的css样式
4、浮动的元素脱离文档流
5、浮动的元素提升层级半级（属性盖住内容溢出，可做文字环绕div的效果）
注意：
1、overflow溢出 会重新计算元素的空间
hidden溢出隐藏
auto溢出出现滚条
scroll出现滚动条
2、元素的居中
margin:0 auto;
3、元素的伪类
伪类：就是css一些元素身上的特殊属性
:hover 鼠标停留
:after 在元素内容之后插入一些内容
浮动：就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来
15.BFC的常见方法及优缺点
BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
1、父级也浮动
弊端：左右的margin:0 auto;会失效；
2、给父级加display:inline-block;
弊端：左右的margin:0 auto;会失效；(如果需要让元素居中可以给父级家text-align:center)
3、给父级加高
弊端：扩展性不好
4、br标签
写法<br/> 作用：换行
5、clear
clear 元素的某一方向不允许出现其他的浮动元素
left right both推荐使用 none
第4、5种：不符合W3C规范 违反结构、样式、行为三者分离原则
6、伪类清浮动
:after{
content:"";display:block;clear:both;
}
目前主流方法，建议使用。
16.定位特性
定位：把一个元素按照一定的方式定到页面的某一位置
position
相对定位 relative
针对自己本身的位置进行定位
绝对定位 absolute
针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上
有没有定位，如果有，针对父级的父级的原点定位，以此类推，如果都没有定位，
针对document进行定位
温馨提示：绝对定位即使没有初始值，也一定要设置值（如：left:0px;top:0px;）
固定定位 fixed
针对页面窗口进行定位
温馨提示：IE6 不支持固定定位
偏移量：left、top、right、、bottom
注意：left top比right bottom的优先级要高
三种定位特性
相对定位 relative
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位 absolute
1.会使元素完全脱离文档流
2.内容完全撑开宽度和高度
3.使元素支持所有的css样式
4.提升层级
z-index：数值；定位层级设置数值越大，层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移，没有定位父级针对document发生偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作
固定定位 fixed
1.不兼容IE6
2.针对窗口进行定位
3.如固定定位的子级有浮动，可以省略清浮动的操作
17.派生选择器
是由id选择器 class选择器 标签名选择器组合而成
id选择器 10000
class选择器 100
标签名选择器 1
例：#box span{} =10000+1 这个值越高，优先级就越高
18.兼容性
页面在不同的浏览器中可能会显示不同。
1、在IE6下，子级的宽度会撑父级设置好的宽度
温馨提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同
2、在IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动元素才可以
3、在IE6下，元素要同过浮动排在同一排，就需要给这行元素都加浮动
例：如果一右边元素浮动，左边元素利用margin排在同一排，俩个元素之间会产生3像素的间隙
4、注意标签的嵌套规则；例：<p> <div></div> </p> 网页默认会产生2个p标签
5、在IE6下，元素的高度如果小于19px的时候，会被当成19px来处理
解决方法：ovreflow：hidden；
6、在IE6下，不支持1px的边宽样式；例：border:1px dotted red;
解决方法：切背景平铺
7、在IE6下，大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性可以减少
很多IE下的兼容性问题；
父级有边框的时候，子元素的margin会失效
解决方法：触发父级的haslayout属性
8、IE6下双边距的bug
在IE6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大俩倍
解决方法：把块元素转成内联元素
9、设置margin-left 一行中左侧的第一个元素有双边距
设置margin-right 一行中右侧的第一个元素有双边距
解决方法：转化成内联元素
10、在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙
解决方法：1.给li加浮动 2.给li加vertical-align：top；
在IE6下，最小高度的bug和li的间隙问题共存的时候，vertical-align不好使
解决方法：给li加浮动
11、当一行子级的元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情
况的时候，最后一行的子级元素的margin-bottom会失效
12、在IE6下的文字溢出bug
子元素的宽度和父级的宽度如果相差小于3px的时候，俩个浮动元素中间有注释或者内联元素，
就会出现文字溢出，内联元素越多，溢出越多
解决方法：用div把注释或者内联元素包起来
13、在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效
解决方法：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来
14、在IE6、7下，子级元素有相对定位，父级overflow保不住子级元素
解决方法：给父级也加相对定位
15、在IE6下，如果绝对定位的父级的宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差
16、在IE6下，当设置body高度，div设置固定定位是，拉动网页滚动条div并不会固定
解决方法：用JS
17、在IE6、7、8下设置透明度opacity无效
解决方法：设置透明度应写俩行代码：opacity:0.5; filter:alpha(opacity=50);
18、在IE6、7下，输入型的表单标签控件上下会有1px的间隙。
处理方法：给input加浮动
19、在IE6下，引用透明图片在网页显示不出透明效果
解决方法：JS
20、注释里面的内容在IE浏览器中通过条件注释语句是可以进行识别的
例：<!--[if ie]
我是ie
<![endif]-->
21、css hack：
\9 IE10之前的IE浏览器解析的代码 例：background:yellow\9;
+或者*表示IE7之前包括IE7的浏览器 例：+background:black;
_表示IE6之前包括IE6的浏览器 例：_background:pink:
原文地址：https://www.cnblogs.com/davis16/p/8329552.html