-
<a>伪类选择器 -
a:link {color:#FF0000;}/* 未访问的链接 */ （只用于a标签） -
a:visited {color:#00FF00;}/* 已访问的链接 */ （只用于a标签） -
a:hover {color:#FF00FF;}/* 鼠标移动到链接上 -
*/（可和其他标签结合一起用） -
a:active {color:#0000FF;}/* 选定的链接 */ -
注意
-
伪类选择器的排序很重要，
a:linka:visiteda:hovera:active，记作lvha -
输入伪类选择器（针对表单）
-
input:focus{color:red;}/* 键盘输入焦点 */ -
其他伪类选择器
-
p:first-child{color:red;}/* 第一个p */ -
:before在元素之前添加内容。 -
:after在元素之后添加内容。 -
css优先规则 -
内联样式表->
ID选择器—>Class类选择器->标签选择器
第十一章 背景属性
-
背景属性：
-
背景的添加 ：
-
背景颜色的添加:
-
background:red; -
backgronnd-color:red; -
背景图片的添加：
-
background:url(“images/1.jpg”); -
backgronnd-image:url(“images/1.jpg”); -
背景的平铺
-
什么是平铺？平铺就是图片是否重复出现
-
不平铺：
background-repeat:no-repeat; -
水平方向平铺：
background-repeat:repeat-x; -
垂直方向平铺：
background-repeat:repeat-y; -
完全平铺：默认为完全平铺
-
背景图片的定位
-
背景图片的定位就是可以设置显示背景图片的位置，通过属性
background-position来实现 -
background-position的取值可为英文单词或者数值和百分值。 -
background-positon的英文单词取值 -
top left -
top center -
top right -
center left -
center center -
center right -
bottom left -
bottom center -
ottom right -
background-positon的数值取值 -
background-position:x y; -
positon的百分值取值 -
background-position:x% y%; -
背景图片的大小
-
背景图片的大小可以通过属性
background-size来设置background-size的取值可为数值和百分值。 -
background-size的数值取值 -
background-size:x y; -
background-size的数值取值 -
background-size:x% y%; -
背景图片的滚动
-
背景图片是否随着内容的滚动而滚动由
background-attachment设置 -
background-attachment:fixed;固定，不随内容的滚动而滚动 -
background-attachment:scroll;滚动，随内容的滚动而滚动
第十二章 文字文本属性
-
css文字文本属性： -
文字属性
-
color:red;文字颜色 -
font-size:12px; 文字大小 -
font-weight:“bold”文字粗细(bold/normal) -
font-family:“宋体”文字字体 -
font-variant:small-caps小写字母以大写字母显示 -
文本属性
-
text-align:center;文本对齐(right/left/center) -
line-height:10px;行间距(可通过它实现文本的垂直居中) -
text-indent:20px;首行缩进 -
text-decoration:none; -
文本线(
none/underline/overline/line-through) -
letter-spacing: 字间距
第十三章 盒子模型
-
盒子模型
-
盒子模型就是一个有高度和宽度的矩形区域
-
所有
html标签都是盒子模型 -
div标签自定义盒子模型 -
所有的标签都是盒子模型
-
class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。 -
盒子模型的组成
-
盒子模型组成部分：
-
自身内容：
width、height宽高 -
内边距：
padding -
盒子边框：
border边框线 -
与其他盒子距离：
margin外边距 -
内容+内边距+边框+外边距=面积
-
border边框 -
常见写法
border:1px solid #f00; -
单独属性：
-
border-width: -
border-style: -
dotted点状虚线 -
dashed（虚线） -
solid（实线） -
double（双实线） -
border-color(颜色) -
padding内边距 -
值：
像素/厘米等长度单位、百分比 -
padding:10px;上下左右 -
padding:10px 10px;上下 左右 -
padding:10px 10px 10px;上 左右 下 -
padding:10px 10px 10px 10px;上 右 下 左（设置4个点–>顺时针方向） -
单独属性：
-
padding-top: -
padding-right: -
padding-bottom: -
padding-left: -
当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据
width和height减小 -
margin 外边距
-
值：与
padding相同 -
单独属性：与
padding相同 -
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
补充盒子模型内容
-
标准盒子模型
-
盒子模型是
css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型
-
从上图可以看到标准
w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分 -
** IE盒子模型**
-
从上图可以看到
ie盒子模型的范围也包括margin、border、padding、content -
和标准
w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding -
IE盒子模型width=padding+border+内容 -
标准盒子模型 = 内容的宽度（不包含
border+padding） -
例：
-
一个盒子的
margin为 20px，border为 1px，padding为 10px，content的宽为 200px、高为 50px，假如用标准w3c盒子模型解释，那么这个盒子需要占据的位置为：宽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 盒子模型，那么这个盒子需要占据的位置为：宽20*2+200=240px、高20*2+50=70px，盒子的实际大小为：宽200px、高50px -
那应该选择哪中盒子模型呢？当然是“标准
w3c盒子模型”了。怎么样才算是选择了“标准w3c盒子模型”呢？很简单，就是在网页的顶部加上doctype声明。 -
假如不加
doctype声明，那么各个浏览器会根据自己的行为去理解网页，即ie浏览器会采用ie盒子模型去解释你的盒子，而ff会采用标准w3c盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。 -
反之，假如加上了
doctype声明，那么所有浏览器都会采用标准w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
- 用
jquery做的例子来证实一下
- 上面的代码没有加上
doctype声明，在ie浏览器中显示ie盒子模型，在 ff 浏览器中显示“标准w3c盒子模型”。
<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd”>
-
代码2 与代码1 唯一的不同的就是顶部加了
doctype声明。在所有浏览器中都显示“标准w3c盒子模型” -
所以为了让网页能兼容各个浏览器，让我们用标准
w3c盒子模型 -
扩展
第十四章 块元素、行元素与溢出
-
基本概念
-
块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；
-
行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距
-
行块转换
-
display:none; 不显示 -
display:block; 变成块级元素 -
display:inline; 变成行级元素 -
display:inline-block; 以块级元素样式展示，以行级元素样式排列 -
溢出
-
overflow:hidden; 溢出隐藏 -
overflow:scroll; 内容会被修剪，浏览器会显示滚动条 -
overflow:auto; 如果内容被修剪，则产生滚动条 -
文本不换行：
white-space:nowrap; -
长单词换行：
word-wrap:break-word; -
行内元素和快级元素小结
-
一、块级元素：block element
-
每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（
float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素； -
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。
-
DIV是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。 -
二、行内元素：inline element
-
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如
SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。 -
三、block（块）元素的特点:
-
①、总是在新行上开始；
-
②、高度，行高以及外边距和内边距都可控制；
-
③、宽度缺省是它的容器的100%，除非设定一个宽度。
-
④、它可以容纳内联元素和其他块元素
-
四、inline元素的特点
-
①、和其他元素都在一行上；
-
②、高，行高及外边距和内边距不可改变；
-
③、宽度就是它的文字或图片的宽度，不可改变
-
④、内联元素只能容纳文本或者其他内联元素
-
对行内元素，需要注意如下:
-
设置宽度
width无效。 设置高度height无效，可以通过line-height来设置。 设置margin -
只有左右
margin有效，上下无效。 -
设置
padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。 -
五、常见的块状元素
-
address– 地址 -
blockquote– 块引用 -
center– 举中对齐块 -
dir– 目录列表 -
div– 常用块级容易，也是CSS layout的主要标签 -
dl– 定义列表 -
fieldset–form控制组 -
form– 交互表单 -
h1– 大标题 -
h2– 副标题 -
h3– 3级标题 -
h4– 4级标题 -
h5– 5级标题 -
h6– 6级标题 -
hr– 水平分隔线 -
isindex–input prompt -
menu– 菜单列表 -
noframes–frames可选内容，（对于不支持frame的浏览器显示此区块内容 -
noscript– 可选脚本内容（对于不支持script的浏览器显示此内容） -
ol– 有序表单 -
p– 段落 -
pre– 格式化文本 -
table– 表格 -
ul– 无序列表 -
六、常见的内联元素
-
a– 锚点 -
abbr– 缩写 -
acronym– 首字 -
b– 粗体(不推荐) -
bdo–bidi override -
big– 大字体 -
br– 换行 -
cite– 引用 -
code– 计算机代码(在引用源码的时候需要) -
dfn– 定义字段 -
em– 强调 -
font– 字体设定(不推荐) -
i– 斜体 -
img– 图片 -
input– 输入框 -
kbd– 定义键盘文本 -
label– 表格标签 -
q– 短引用 -
s– 中划线(不推荐) -
samp– 定义范例计算机代码 -
select– 项目选择 -
small– 小字体文本 -
span– 常用内联容器，定义文本内区块 -
strike– 中划线 -
strong– 粗体强调 -
sub– 下标 -
sup– 上标 -
textarea– 多行文本输入框 -
tt– 电传文本 -
u– 下划线 -
七，可变元素
-
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
-
applet-java applet -
button- 按钮 -
del- 删除文本 -
iframe-inline frame -
ins- 插入的文本 -
map- 图片区块(map) -
object-object对象 -
script- 客户端脚本 -
八、行内元素与块级元素有什么不同
-
区别一：
-
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
-
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
-
区别二：
-
块级：块级元素可以设置宽高
-
行内：行内元素不可以设置宽高
-
区别三：
-
块级：块级元素可以设置
margin，padding -
行内：行内元素水平方向的
margin-left;margin-right; -
padding-left;padding-right;可以生效。但是竖直方向的margin-bottom;margin-top;padding-top;padding-bottom;却不能生效。 -
区别四：
-
块级：
display:block; -
行内：
display:inline; -
替换元素有如下：（和
img一样的设置方法） -
<img>、<input>、<textarea>、<select> -
<object>都是替换元素，这些元素都没有实际的内容 -
可以通过修改
display属性来切换块级元素和行内元素
第十五章 定位
-
static静态定位（不对它的位置进行改变，在哪里就在那里） -
默认值。没有定位，元素出现在正常的流中（忽略
top,bottom,left, right或者z-index声明）。 -
fixed固定定位（参照物–浏览器窗口）—做 弹窗广告用到 -
生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过
"left","top","right"以及"bottom"属性进行规定。 -
relative（相对定位 ）（参照物以他本身） -
生成相对定位的元素，相对于其正常位置进行定位。
-
absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位) -
生成绝对定位的元素，相对于
static定位以外的第一个父元素进行定位。 -
元素的位置通过 "
left","top","right"以及"bottom"属性进行规定 -
z-index
-
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 -
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
-
一切皆为框
-
块级元素:
div、h1或p元素 即：显示为一块内容称之为 “块框“ ; -
行内元素:
span,strong,a等元素 即：内容显示在行中称 “行内框”; -
使用display属性改变成框的类型 即：
display:block; 让行内元素设置为块级元素，display:none;没有框 -
相对定位：
-
如果对一个元素进行相对定位，它将出现在它所在的位置上。
-
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
-
.adv_relative { position: relative; left: 30px; top: 20px; } -
绝对定位：
-
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。
.adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
-
frameset框架： -
<frameset>---- 用来定义一个框架；双标签
不能和 <body> 一起使用
-
rows、cols属性 -
rows定义行表示框架有多少行（取值px/%/*） -
cols定义列表示框架有多少列（取值px/%/*） -
frame子框架
-
<
frame> ---- 表示框架中的某一个部分；单标签，要跟结束标志 -
src显示的网页的路径 -
name框架名 -
frameborder边框线（取值 0 / 1） -
<
noframes>属性 -
<
noframes> 提供不支持框架的浏览器显示body的内容；双标签
-
<iframe>内联框架 -
iframe元素会创建包含另外一个文档的内联框架（即行内框架） -
允许和
body一起使用 -
width宽（取值 px / %） -
height高（取值 px / %） -
name框架名 -
frameborder边框线（取值 0 / 1） -
src显示的网页的路径
第十七章 css高级属性
-
opacity透明属性 -
opacity -
对于
IE6/7/，使用filter:alpha(opacity:值;) 值为0-100 -
对于
Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1 -
对于早期火狐，使用
-moz-opacity:值; 值为0-1 -
所以写透明属性时，一般写法是
{
opacity:0.5;
filter:alpha(opacity：50);/0-100/
-moz-opacity:0.5; /取值0-1/–>针对早起版本的火狐兼容问题的解决
}
-
border-radius圆角边框属性 -
向
div元素添加圆角边框 -
border-radius:10px; -
box-shadow阴影属性 -
box-shadow属性向框添加阴影效果,后面跟4个参数。 -
box-shadow:0px 0px 10px #000; -
<embed>属性 -
是
HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频 -
<embed src=“media/music.mp3” /> -
格式
.mid.wav.mp3等
- CSS部分导图总结
css选择符(复制图片地址到浏览器打开放大即可清晰查看)
css选择符
css常见简写
css简写速查
- HTML+CSS+JavaScript学习导图笔记(复制图片地址到浏览器打开放大即可清晰查看)
HTML+CSS+JavaScript学习导图笔记
-
前端详细学习路线(复制图片地址到浏览器打开放大即可清晰查看)
-
前端学习路线
第三部分 附录
附录一 DIV命名规范
-
企业
DIV使用频率高的命名方法 -
网页内容类
-
标题:
title -
摘要:
summary -
箭头：
arrow -
商标：
label -
网站标志：
logo -
转角/圆角：
corner -
横幅广告：
banner -
子菜单：
subMenu -
搜索：
search -
搜索框：
searchBox -
登录：
login -
登录条：
loginbar -
工具条：
toolbar -
下拉：
drop -
标签页：
tab -
当前的：
current -
列表：
list -
滚动：
scroll -
服务：
service -
提示信息：
msg -
热点：
hot -
新闻：
news -
小技巧：
tips -
下载：
download -
栏目标题：
title -
热点：
hot -
加入：
joinus -
注册：
regsiter -
指南：
guide -
友情链接：
friendlink -
状态：
status -
版权：
copyright -
按钮：
btn -
合作伙伴：
partner -
投票：
vote -
左右中：
leftrightcenter
-
注释的写法:
/* Footer */内容区/* End Footer */ -
id的命名:
-
页面结构
-
容器:
container -
页头：
header -
内容：
content/container -
页面主体：
main -
页尾：
footer -
导航：
nav -
侧栏：
sidebar -
栏目：
column -
页面外围控制整体布局宽度：
wrapper -
左右中：
leftrightcenter
-
导航
-
导航：
nav -
主导航：
mainbav -
子导航：
subnav -
顶导航：
topnav -
边导航：
sidebar -
左导航：
leftsidebar -
右导航：
rightsidebar -
菜单：
menu -
子菜单：
submenu -
标题:
title -
摘要:
summary
-
功能
-
标志：
logo -
广告：
banner -
登陆：
login -
登录条：
loginbar -
注册：
regsiter -
搜索：
search -
功能区：
shop -
标题：
title -
加入：
joinus -
状态：
status -
按钮：
btn -
滚动：
scroll -
标签页：
tab -
文章列表：
list -
提示信息：
msg -
当前的:
current -
小技巧：
tips -
图标:
icon -
注释：
note -
指南：
guild -
服务：
service -
热点：
hot -
新闻：
news -
下载：
download -
投票：
vote -
合作伙伴：
partner -
友情链接：
link -
版权：
copyright
-
class的命名: -
颜色:使用颜色的名称或者16进制代码,如
-
.red { color: red; } -
.f60 { color: #f60; } -
.ff8600 { color: #ff8600; } -
字体大小,直接使用"font+字体大小"作为名称,如
-
.font12px { font-size: 12px; } -
.font9px {font-size: 9pt; } -
对齐样式,使用对齐目标的英文名称,如
-
.left { float:left; } -
.bottom { float:bottom; } -
标题栏样式,使用"类别+功能"的方式命名,如
-
.barnews { } -
.barproduct { }
-
注意事项::
-
一律小写;
-
尽量用英文;
-
不加中杠和下划线;
-
尽量不缩写，除非一看就明白的单词.
-
推荐的
CSS书写顺序： -
显示属性
-
display -
list-style -
position -
float -
clear -
自身属性
-
width -
height -
margin -
padding -
border -
background -
文本属性
-
color -
font -
text-decoration -
text-align -
vertical-align -
white-space -
other text -
content
附录二 CSS精灵
-
CSS精灵原理以及应用
-
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。 -
该图片使用
CSSbackground和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。 -
一个简单的例子：
-
一张图片作出一个按钮的三个状态
-
一个链接用
CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active<a class="button" href="#">链接</a> -
加入右侧的图片为：
200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
display:block;
width:200px;
height:65px;
line-height:65px; /定义状态/
text-indent:-2015px; /隐藏文字/
background-image:url(button.png); /定义背景图片/
background-position:0 0;
/定义链接的普通状态，此时图像显示的是顶上的部分/
}
a:hover {
background-position:0 -66px;
/定义链接的滑过状态，此时显示的为中间部分，向下取负值/
}
a:active {
background-position:0 -132px;
/定 义链接的普通状态，此时显示的是底部的部分，向下取负值/
}
-
更多的
CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值 -
如：
background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位 -
优点：
-
减少加载网页图片时对服务器的请求次数
-
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
-
提高页面的加载速度
-
sprite技术的其中一个好处是图片的加载时间(在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。因此，单独的一张JPEG或者PNGsprite在大小上非常可能比把一张图分成多张得来的图片总尺寸小。 -
减少鼠标滑过的一些
bug -
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。 -
不足：
-
CSS雪碧的最大问题是内存使用 -
影响浏览器的缩放功能
-
拼图维护比较麻烦
-
使
CSS的编写变得困难 -
CSS雪碧调用的图片不能被打印 -
错误得使用
Sprites影响可访问性
附录三 一些tips解决方案
页面优化实践
-
从下面的几个方面可以进行页面的优化：
-
减少请求数
-
图片合并
-
CSS文件合并 -
减少内联样式
-
避免在
CSS中使用import -
减少文件大小
-
选择适合的图片格式
-
图片压缩
-
CSS值缩写（Shorthand Property) -
文件压缩
-
页面性能
-
调整文件加载顺序
-
减少标签数量
-
调整选择器长度
-
尽量使用
CSS制作显示表现 -
增强代码可读性与可维护性
-
规范化
-
语义化
-
模块化
写DIV+CSS 的一些常识
-
不要使用过小的图片做背景平铺
-
这就是为何很多人都不用
1px的原因，这才知晓。宽高1px的图片平铺出一个宽高200px的区域，需要200200=40, 000次，占用资源 -
无边框
-
推荐的写法是
border:none;，哈哈，我一直在用这个。border:0;只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源 -
慎用 通配符
-
所谓通配符，就是将
CSS中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。 -
CSS的十六进制颜色代码缩写 -
习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
-
样式放头上，脚本放脚下。不内嵌，只外链
-
坚决不用
CSS表达式 -
使用 引用样式表，而不是通过
@import导入。 -
一般来说，
PNG比GIF要小，小得多。再者，GIF中有多少颜色是被浪费的，很值得优化。 -
千万不要在
HTML中缩放图片，一者不好看，二者占资源。 -
正文字体最好用偶数
-
12px、14px、16px，效果非常好。特例，15px。 -
block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。 -
段落之间，至少要有一倍行距
-
强行指定某些元素的
line-height，正文1.6倍于文字大小，标题1.3倍。 -
中文标点用全角
-
英文夹杂在中文中，左右空格，半角。
-
中文字体的粗体和斜体，远离较好
-
[建议] HTML 标签的使用应该遵循标签的语义
-
下面是常见标签语义
-
p- 段落 -
h1,h2,h3,h4,h5,h6- 层级标题 -
strong,em- 强调 -
ins- 插入 -
del- 删除 -
abbr- 缩写 -
code- 代码标识 -
cite- 引述来源作品的标题 -
q- 引用 -
blockquote- 一段或长篇引用 -
ul- 无序列表 -
ol- 有序列表 -
dl,dt,dd- 定义列表
常用代码片段
-
雅虎工程师提供的
CSS初始化示例代码【仅供参考】 -
可以在
html头文件中直接引用，从而避免浏览器的不兼容带来的错误。
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: “.”;
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
-
现代浏览器
cssreset解决方案【推荐使用这个】 -
mobile meta标签
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
- 表格不被撑开
table-layout: fixed; word-break: break-all;;border-collapse: collapse
- 不设宽高居中
<span style=”background:#f00; display:table-cell; vertical-align:middle;”>
- 透明度的兼容代码
filter:alpha(opacity=50); /1-100/
-moz-opacity:0.5; /0-1.0/
-khtml-opacity:0.5; /0-1.0/
opacity:0.5; /0-1.0/
-
文本溢出的几种处理方法
-
简单隐藏
div.hide{overflow:hidden}
- 使用滚动条
div.scroll{overflow:scroll}
- 简单裁切
div.clip{
border:1px solid;
overflow:hidden;/超出隐藏/
white-space:nowrap;/强制在一行显示/
text-overflow:clip;/裁切/
}
- 超出部分省略号
div.elli{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;/使用省略号/
}
-
清除浮动的几种方法
-
方法一：
投机取巧法– 不推荐 -
直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
-
方法二：
overflow + zoom方法 --不推荐
.fix{overflow:hidden; zoom:1;}
-
此方法优点在于代码简洁，涵盖所有浏览器
-
方法三：
after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了 -
clearfix只应用在包含浮动子元素的父级元素上
.clearfix{zoom:1;}
.clearfix:after{
display:block;
content:‘clear’;
clear:both;
line-height:0;
visibility:hidden;
}
- 方法四 在方法三的基础上的最优雅的做法【推荐】
.clearfix:after,
.clearfix:before {/before 是为了防止浏览器顶部空白的崩溃/
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
清除浮动的原理是触发BFC，这里只有clear:both起清除浮动作用，其他的line-height:0; visibility:hidden;都是为了隐藏生的内容需要的
一些总结
-
自动继承属性：
-
color -
font -
text-align -
list-style
…
-
非继承属性：
-
background -
border -
position
…
-
具有破坏性的元素：
-
float -
display:none; -
position:absoblute/fixed/sticky; -
具有包裹性的元素：
-
display:inline-block/table-cell -
position:absolute/fixed/sticky -
overflow:hidden/scroll -
消除图片底部间隙的方法
-
图片块状化-无基线对齐
img{display:block;}
- 图片底线对齐
img{vertical-align:bottom;}
- 行高足够小 - 基线位置上移
.box{line-height:0;}
一些概念
-
BFC
-
BFC全称
”Block Formatting Context”中文为“块级格式化上下文” -
记住这么一句话：
BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素 -
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 -
扩展阅读
-
优雅降级(
graceful degradation) -
Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效 -
渐进增强
progressive enhancement： -
从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用
-
平稳退化
-
是在浏览器没有
JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；
方案荟萃扩展阅读
-
关于布局
-
其他
附录四 部分工具资源
附录五 编码规范
附录六 进阶学习
附录七 其他资源
附录八 常见问题
-
前端指路
-
前端技术文章【新人篇】
-
性能/规范/实践
-
一些问答社区
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
]( )
-
其他
附录四 部分工具资源
附录五 编码规范
附录六 进阶学习
附录七 其他资源
附录八 常见问题
-
前端指路
-
前端技术文章【新人篇】
-
性能/规范/实践
-
一些问答社区
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-d3PaQS10-1713480678301)]
[外链图片转存中…(img-JVlo5UYi-1713480678301)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-vBtQTD3h-1713480678302)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
[外链图片转存中…(img-IA0BpAzj-1713480678302)]
最后
[外链图片转存中…(img-7iumhIsS-1713480678302)]
[外链图片转存中…(img-891rBHZz-1713480678302)]
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
