Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

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的基础样式:
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-50px;边框宽度
border-top-width;边框顶部宽度 border-right-边框右边宽度
border-bottom-边框底部宽度 border-left-边框左边宽度
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:yellow9;
+或者*表示IE7之前包括IE7的浏览器 例:+background:black;
_表示IE6之前包括IE6的浏览器 例:_background:pink: