menu
more_vert

HTML+CSS基础小笔记再整理

作者:dayu





4、常用标签
section 版块 用于划分页面上的不同区域,或者划分文章里不同的节

header 页面头部或者版块(section)头

footer 页面底部或者(section)底部

<header></header>
<section>
<header></header>
<footer></footer>
</section>
<footer></footer>

nav 导航 (包含链接的的一个列表)<nav></nav>

article 用来在页面中表示一套结构完整且独立的内容部分.可以用来呈现论坛的一个帖子,
杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。<article></article>

aside 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,
以及其他类似的有别与主要内容的部分 <aside></aside>

1)被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等
2)在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),
其中的内容可以是友情链接、附属导航或广告单元等。

time 里面写时间 <time></time>



5、文件路径:
绝对路径:完整的固定的路径地址、网站地址
相对路径:以当前页面的地址为对象来表示路径地址



6、搜索引擎通过标签来判断用户搜索内容---标签语义化
SEM 搜索引擎营销
SEO 搜索引擎优化



7、css选择器的优先级
选择器的优先级一致的情况下,后面的会覆盖前面相同的属性
!import > 行间样式style > id选择器 > class选择器 > 类型tag选择器 > 通配符* > 默认
包含(父子)选择器 > 单个选择器 = 群组选择器
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)


8、块元素和内嵌(内联、行内)元素:
块:
1)默认独占一行
2)支持所有css样式
3)不设置宽度的时候,宽度默认撑满整行
内嵌:
1)同一行上可以显示同类的标签
2)不支持宽高
3)不支持上下的margin和padding样式
4)宽高由内容撑开
5)代码换行会被解析成空格

想让内联元素具备块元素特征:display:block;
想让块元素具备内敛元素特征:display:inline;
想让元素既支持内敛也支持块元素特征:display:inline-block;

内敛块:
1)块元素能在一行显示
2)行内元素支持宽高
3)没有宽度的时候内容撑开宽度
4)标签之间的换行间隙被解析成空格
5)ie6 ie7不支持块属性标签的inline-block



9.浮动:
float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停下来

clear:left | right | both | none | inherit;指定元素的某个方向上不能有浮动元素

clear:both; 在左右两侧均不允许浮动元素。

float特征:

1)块在一排显示
2)内联支持宽高
3)默认内容撑开宽度
4)脱离文档流
5)提升层级半层




10.清除浮动的方法

1)加高:给父级元素一个高度,缺点是扩展性不好,若高度不固定,加高清除失效
2)父级浮动:给各类父级元素设置float,问题是页面中所有元素都要加浮动,而且margin左右auto居中失效
3)inline-block方法:给父级加display:inline-block; 问题是导致margin左右auto失效
4)空标签清除浮动:在浮动元素同级位置加一个空标签<div class="clearfix"></div> css: .clearfix{clear:both;}
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差) ,每个浮动元素后都要加空标签
5)br清除浮动:浮动元素后加 <br clear="all"/> 问题:不符合工作中结构、样式、行为,三者分离的要求。每个浮动元素后都要加
6)after伪类清浮动方法(现在主流方法):给浮动元素的父级添加一个clear类,并设置css样式为:
.clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} (zoom兼容ie6、ie7)
after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持
7)overflow:hidden; 清除浮动:给父级元素加。 问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow: scroll | auto | hidden;overflow:hidden;溢出隐藏



11、定位position:relative | absolute | fixed | static | inherit;

1)relative相对定位/定位偏移量position:relative; 特征
a、不影响元素本身的特性;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、如果没有定位偏移量,对元素本身没有任何影响;
d、提升层级

定位元素位置控制 top/right/bottom/left 定位元素偏移量。

2)absolute绝对定位/定位层级position:absolute; 特征
a、使元素完全脱离文档流;(原始位置消失,元素相当于隐形了)
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;
e、相对定位一般都是配合绝对定位元素使用;
f、提升层级

z-index:[number]; 定位层级
a、定位元素默认后者层级高于前者;
b、建议在兄弟标签之间比较层级
eg:z-index:1; 向前提升一个层级,
z-index:[number]; 定位层级

3)fixed 固定定位:

与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位; 问题:IE6不支持固定定位;



12、透明度
标准浏览器:opacity:0-1;
IE6、7下:filter:alpha(opacity=0-100)



13、表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
合并单元格
colspan 属性规定单元格可横跨的列数。 <td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>





14、兼容(标准浏览器一般都兼容,主要看IE6、7)
1)H5兼容 IE6、IE7不支持H5标签,解决方案:需将h5标签变成block元素,后用js创建标签 (document.createElement("section"))
若含有很多h5标签,引用 html5shiv.js 文件解决。
2)元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
3)第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有一条空隙问题; 解决方案:第二块元素要用浮动float。
4)IE6下子元素超出父级宽高,会把父级的宽高撑开 。解决方案:子元素宽高不要超过父级元素宽高!
5)<p><h1-6><td>包含块元素嵌套规则,块元素在所有浏览器中不被这三个标签包含,直接变成同级关系。
6)margin兼容性问题,上下margin叠压问题,解决方案是避免多个元素上下margin同时存在,只使用一个方向的margin。
在浏览器中子元素margin-top会传递给父级元素,解决方案是触发BFC和haslayout
给父元素加overflow:hidden;触发BFC 。 给父元素加zoom:1;触发haslayout

BFC (block formatting context) 标准浏览器 :
a、float的值不为none。
b、overflow的值不为visible。
c、display的值为table-cell, table-caption, inline-block中的任何一个。
d、position的值不为relative和static。
e、width|height|min-width|min-height:(!aotu)
haslayout IE浏览器 :
a、writing-mode:tb-rl
b、-ms-writing-mode:tb-rl
c、zoom:(!normal)
7)display:inline-block兼容 IE6下不支持。解决方案:使用css hack(*)。在display:inline-block;后加上*display:inline; *zoom:1;
8)IE6最小高度问题。height:1px;在IE6下最小高度不是1px是19px; 解决方案:*overflow:hidden;
9)IE6双边距。在设置了float:left后设置margin-left会导致双边距现象;比如float:left;margin-left:50px;在IE6下会距离左边100px。
解决方案:针对IE6,添加 *display:inline;
10)li子元素都浮动的情况下,li下方会产生4px间隙。解决方案:给li添加 *vertical-align:top;
11)两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px时会出现溢出文字的情况
解决方案:两个浮动元素中间避免出现内联元素或者注释 或者 与父级宽度相差3px或以上
12)IE6\7下父元素overflow:hidden;包不住子元素的relative相对定位
解决方案:针对ie6、7给父级元素添加相对定位 *position:relative;
13)IE6下绝对定位元素的父级元素宽高是奇数,绝对定位元素设置的right和bottom值会有1px的偏差 。
解决方案:避免父级宽高出现奇数
14)IE6下绝对定位元素和浮动元素并列绝对定位元素消失 。解决方案:避免在同一级,可以用<p>包住内敛元素。
15)IE6下input会有上下1px空隙问题 。解决方案:给input添加 *float:left;
16)IE6下输入类型表单控件随输入内容增加,背景图片不固定的问题。解决:设置background-attachment:fixed;


CSS hack:针对不同的浏览器写不同的CSS 样式的过程,就叫CSS hack!

div{
width: 200px;
height: 200px;
background-color: red
background-color: blue\9;
*background-color: green;
_background-color: yellow;
}
书写顺序,从上到下范围依次减小。
\9 IE10以及IE10以下版本的
* IE7以及IE7以下版本的
_ IE6以及IE6以下版本的

17)PNG24 兼容性问题:IE6不支持PNG24,出现背景。
解决方案:
使用PNG8
或者:
JS插件:DD_belatedPNG_0.0.8a.js(问题:不能处理body之上png24) ;执行js插件中的函数:DD_belatedPNG.fix(‘xxx‘);
原生滤镜:在body样式添加这两句:
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");



兼容IE代码:

<!--[if !IE 7]>

<style type="text/css">

#wrap {display:table;height:100%}

</style>

< ![endif]-->



零散知识点

background-position:-70px -40px;
图片以容器左上角为参考向左偏移70px,向上偏移 40px,即图片的左边70px和上边的40px都在容器之外,容器内只显示剩下的部分。为负数是向右下。






css盒模型:

标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 padding。

例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px。
用标准 w3c 盒子模型(也包括ie7以上)解释:
那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px。
盒子的实际大小(有背景颜色的区域)为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px。

用ie 6及其以下盒子模型:
那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px
盒子的实际大小为:宽 200px、高 50px。

HTML+CSS基础小笔记再整理

原文地址:http://www.cnblogs.com/hello-web/p/7221414.html



Processed Time:0.21714901924133

_REQUEST:
Array
(
    [0] => read
    [1] => 95123
)
_SESSION:
Array
(
    [fid] => 4
)