和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
2015-12-21 16:23
996 查看
之前和前端交流页面的实现方案时，经常被告知：这个效果实现不了；那个东西兼容性不好；这个做不了...明明这些效果别人家已经实现出来了，哎，奈何不懂前端相关，没辙！
最近花了点时间看了些前端相关的博客、论坛，整理了一些html/css的基础知识，算是学个入门。同时还学了浏览器调试工具的基本用法，做产品测试的时候还是蛮有用的，谷歌浏览器自带的调试工具很好用，火狐的话要装firebug，有兴趣的可以去玩玩，还是很有意思的！
# 基本
html（Hypertext Markup Language）—— 结构
超文本标记语言
css（Cascading Style Sheets）—— 样式
层叠样式表
js（javascript）—— 行为
html超文本标记语言
<html> </html> 标签对
<!DOCTYPE HTML> 声明文档类型
<meta charset="utf-8"/> 代码编码格式
单标签：直接在后面斜杠结束的标签叫做单标签。如换行符<br />
行间样式表
<div style="……"></div>
内部样式表
<style>…………</style>
外部样式表
<link href="style.css" rel="stylesheet"/>
# 属性：属性值；
width 宽度
height 高度
background 背景
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg); 背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置
# 传说中的盒模型
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
# 基础属性
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间距
# 基础标签
div 块
img 图片（单标签）
a 链接、下载、锚点
h1-h6 标题
p 段落
strong 强调（粗体）
em 强调（斜体）
span 区分样式
ul 无序列表
ol 有序列表
li 列表项
dl 定义列表
dt 定义列表标题
dd 定义列表项
# CSS基础选择符
id选择符（#）
群组选择符（，）
class选择符（.）
类型选择符(div……)
包含选择符（div p）
通配符（*）
基础选择符的优先级
类型 < class < id < style(行间) < js
伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）
a : link 未访问（默认）
a : hover 鼠标悬停（鼠标划过）
a : active 链接激活（鼠标按下）
a : visited 访问过后（点击过后）
a标签四个伪类的顺序：
link visited hover active
（love hate 记忆方法！）
a伪类的应用：
a、四个伪类全用(搜索引擎、新闻门户、小说网站)
b、一般网站只用（ a{} a:hover{} ）
#（样式重置）css reset 原则
但凡是浏览默认的样式，都不要使用。页面在不同浏览器下总是不能做到很好的兼容，显示的效果不同，估计就是一开始没有做样式重置！
<style>
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
</style>
# float浮动：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
# 清浮动方法
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法：
问题：margin左右自动失效；
4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）
# 浮动兼容性问题
IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。
a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;)
IE6下 li部分兼容性问题：
a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）
# 定位
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值
position:relative | absolute | fixed | static | inherit;
position:relative;
在 IE6 下父级的 overflow:hidden; 包不住子级的relative;
position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
# 表格标签
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
colspan 属性规定单元格可横跨的列数。<td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。<td rowspan="2"></td>
# form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
# 滑动门
滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得十分成熟。大部分公司要求前端工程师必须使用CSS 精灵，处理图片；
CSS精灵 优点：
利用CSS 精灵能很好地减少了网页的http请求次数，从而大大的提高了页面的性能，这也是CSS 精灵最大的优点；减少图片大小
CSS精灵 缺点：
降低开发效率；
维护难度加大；
# # 立志要搞懂技术的产品小白，正在学习JQuery的路上……
最近花了点时间看了些前端相关的博客、论坛，整理了一些html/css的基础知识，算是学个入门。同时还学了浏览器调试工具的基本用法，做产品测试的时候还是蛮有用的，谷歌浏览器自带的调试工具很好用，火狐的话要装firebug，有兴趣的可以去玩玩，还是很有意思的！
# 基本
html（Hypertext Markup Language）—— 结构
超文本标记语言
css（Cascading Style Sheets）—— 样式
层叠样式表
js（javascript）—— 行为
html超文本标记语言
<html> </html> 标签对
<!DOCTYPE HTML> 声明文档类型
<meta charset="utf-8"/> 代码编码格式
单标签：直接在后面斜杠结束的标签叫做单标签。如换行符<br />
行间样式表
<div style="……"></div>
内部样式表
<style>…………</style>
外部样式表
<link href="style.css" rel="stylesheet"/>
# 属性：属性值；
width 宽度
height 高度
background 背景
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg); 背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置
# 传说中的盒模型
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
# 基础属性
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间距
# 基础标签
div 块
img 图片（单标签）
a 链接、下载、锚点
h1-h6 标题
p 段落
strong 强调（粗体）
em 强调（斜体）
span 区分样式
ul 无序列表
ol 有序列表
li 列表项
dl 定义列表
dt 定义列表标题
dd 定义列表项
# CSS基础选择符
id选择符（#）
群组选择符（，）
class选择符（.）
类型选择符(div……)
包含选择符（div p）
通配符（*）
基础选择符的优先级
类型 < class < id < style(行间) < js
伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）
a : link 未访问（默认）
a : hover 鼠标悬停（鼠标划过）
a : active 链接激活（鼠标按下）
a : visited 访问过后（点击过后）
a标签四个伪类的顺序：
link visited hover active
（love hate 记忆方法！）
a伪类的应用：
a、四个伪类全用(搜索引擎、新闻门户、小说网站)
b、一般网站只用（ a{} a:hover{} ）
#（样式重置）css reset 原则
但凡是浏览默认的样式，都不要使用。页面在不同浏览器下总是不能做到很好的兼容，显示的效果不同，估计就是一开始没有做样式重置！
<style>
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
</style>
# float浮动：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
# 清浮动方法
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法：
问题：margin左右自动失效；
4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）
# 浮动兼容性问题
IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。
a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;)
IE6下 li部分兼容性问题：
a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）
# 定位
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值
position:relative | absolute | fixed | static | inherit;
position:relative;
在 IE6 下父级的 overflow:hidden; 包不住子级的relative;
position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
# 表格标签
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
colspan 属性规定单元格可横跨的列数。<td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。<td rowspan="2"></td>
# form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
# 滑动门
滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得十分成熟。大部分公司要求前端工程师必须使用CSS 精灵，处理图片；
CSS精灵 优点：
利用CSS 精灵能很好地减少了网页的http请求次数，从而大大的提高了页面的性能，这也是CSS 精灵最大的优点；减少图片大小
CSS精灵 缺点：
降低开发效率；
维护难度加大；
# # 立志要搞懂技术的产品小白，正在学习JQuery的路上……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3动画简介以及动画库animate.css的使用
- 解决修改css或js文件，浏览器缓存更新问题。
- POI EXCEL 样式设置
- css默认值汇总
- 让footer固定在页面（视口）底部（CSS-Sticky-Footer）
- 问题：css 自动换行；结果：CSS控制文本自动换行
- html+css麦子学院实训
- 用CSS3实现带小三角形的div框(不用图片)
- css3 常用命令总结（不定期更新）
- 横向滚动条展示 css
- CSS选择符
- CSS强制英文、中文换行与不换行 强制英文换行
- CSS3新增的选择器和属性
- 自定义浏览器滚动条样式
- 渐变背景 css3渐变效果及代码
- css3 新属性
- .net对js和css、img剥离项目进行压缩优化、cdn加速
- CSS的引入方式最常用的有三种，
- css毛玻璃效果
- [转]CSS Display(显示) 与 Visibility（可见性）