1、
font的两个必须要写的：font-size 和 font-family
text-indent 首行缩进（em）1em=一个文字大小
text-algin 对齐方式：left、center、right
text-decortion 文本修饰： underline（下划线）overline（上划线）line-through（删除线）none（无）
letter-spacing 字间距（为0时字间距本身为1个像素，若为5px则字间距实际为6px）
word-spacing 词间距（先用空格将词组分开，否则没效果，注意空格也占几个像素）
line-height：行高，字的顶部到下一行字的顶部的像素
2、<a> href:
超链接 <a href="xxx.html">跳转页面</a>
压缩包下载：<a href=“xxx.rar">压缩包下载</a>
锚点(id)：<a href="#div1">跳转指定id位置</a>
eg：<a href="http://sohu.com/#sogou-search">直接跳到搜狐页面的指定id位置</a>
3、base：写在<head></head>之间
<base target="_blank" href="www.baidu.com"> 指定文档中所有<a>标签的默认
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基础小笔记再整理的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. SQL 基础语法笔记教程整理

    最近从图书馆借了本介绍 SQL 的书,打算复习一下基本语法,记录一下笔记,整理一下思路,以备日后复习之用. PS:本文适用 SQL Server2008 语法. 首先,附一个发现的 MySQL 读书笔 ...

  3. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  4. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

  5. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  6. css基础小总结

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  7. css通用小笔记01——导航背景

    很多刚接触前端的可能遇到一些css能解决的小问题,我现在总结了一些,将会逐渐和大家分享,先是导航的背景问题,在网页中常常看到,当鼠标放到一个导航按钮上面是,就会出现一些特效,比如背景,这是最常用的,我 ...

  8. SQL基础语法笔记教程整理

    PS:本文适用SQL Server2008语法. 一.关系型数据库和SQL 实际上准确的讲,SQL是一门语言,而不是一个数据库. 什么是SQL呢?简而言之,SQL就是维护和使用关系型数据库中的的数据的 ...

  9. HTML+CSS基础学习笔记（8）

    一.水平居中设置--行内元素 如果设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的 二.水平居中设置 --定宽块状元素 #当被设置元素为块状元素时 ...

随机推荐

  1. 按照Right-BICEP要求设计四则运算3程序的单元测试用例

    按照Right-BICEP要求: Right——结果是否正确? B——是否所有的边界条件都是正确的? I——能查一下反响关联吗? C——能用其它手段交叉检查一下吗? E——你是否可以强制错误条件发生? ...

  2. 如何防止app接口被别人调用

    app开发的时候,如何保护app的接口呢? 用https是我想到的办法,但是不知道怎么实现,所以就考虑用token,虽然不是绝对有效,但是能防止一般的用户来攻击,高手非要攻击,只能报警了吧. toke ...

  3. lintcode-223-回文链表

    223-回文链表 设计一种方式检查一个链表是否为回文链表. 样例 1->2->1 就是一个回文链表. 挑战 O(n)的时间和O(1)的额外空间. 标签 链表 思路 找到链表中点后,翻转链表 ...

  4. ORACLE公司传奇历史

    ORACLE公司传奇 ORACLE公司之起源 很难想象,ORACLE 公司的这一段传奇居然要从 IBM 公司开始. 1970年的6月,IBM 公司的研究员埃德加·考特 (Edgar Frank Cod ...

  5. 第8章 Linux磁盘与文件系统管理

    认识EXT2文件系统 文件的系统特性 Linux的正规文件系统为Ext2 文件数据除了文件实际内容外,还包括其他属性(文件权限.文件属性). 文件系统将这两部分数据分别存放在不同的块,权限和属性放在i ...

  6. IP ，路由

    ifconfig 命令       ip信息   enp0s3: flags=4163<UP(已经启用),BROADCAST(支持广播),RUNNING,MULTICAST(支持多播)> ...

  7. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  8. Hadoop HDFS环境搭建

    1,首先安装JDK,下面如果JDK出现安装错误,可以卸载 卸载 1.卸载用 bin文件安装的JDK方法: 删除/usr/java目录下的所有东西 2.卸载系统自带的jdk版本方法: 查看自带的jdk: ...

  9. QTemporaryDir及QTemporaryFile建立临时目录及文件夹

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QTemporaryDir及QTemporaryFile建立临时目录及文件夹     本文地址 ...

  10. （七）对Jmeter进行参数化的俩种方式

    一.使用CSV Data Set Config: 1.添加CSV Data Set Config: 2.配置参数: Filename:文件名,指保存参数化数据的文件目录,可以相对或者绝对路径. Fil ...