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:
Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
原文地址：https://www.cnblogs.com/davis16/p/8329552.html