整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
三部分 附录（因为暂时不支持插入超链接所以部分内容无法显示）
附录一 DIV命名规范
附录二 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;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
附录三 一些tips解决方案
页面优化实践
写DIV+CSS 的一些常识
常用代码片段
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;
}
<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
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
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*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些总结
一些概念
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
ss声明顺序优先级
默认缺省
外联样式
内联样式
行内样式
缺省<外联样式<内联样式<行内样式
id>class
多类情况下属性越靠后优先级越高
缺省设置就是浏览器的缺省设置，不同的浏览器对元素的默认规则是不一样的
外部样式就是在head内部引用的样式文件，比如：
<link type=”text/css” rel=”sheetstyle” href=”xxx.css”/>
行内样式指的在元素标签内直接指定样式，比如:
<div style=”background-color:red”></div>
要在行内对一个元素同时指定多个样式属性的时候，我们可以把指定的属性用“：”隔开，比如：
<div style=”background-color:red;width:100px;heigth:50px”></div>
最后一个元素值的”;”可有可无
比如：
<div class=”fl fr”></div>
Css文件中写:
div{
width:100px;
weight:50px;
background-color:red;
}
.fl{
float:left;
}
.fr{
float:right;
}
那么这个div到底向右浮动还是向左浮动？
答案是向右浮动，为什么是向右浮动？新手一般会认为，class=”fl fr”,fr在后面嘛，但事实是：在多个类指定的属性的时候，属性生效的优先级不跟指定属性的类名先后顺序有关，而是跟css文件里面的.fl和.fr先后顺序有关，我们把css里面的.fl属性声明和.fr属性声明调换一下位置,div的浮动属性就变成左浮动了!
我们得出的答案是:属性声明越靠后面，它的优先级越高！
我们把css文件里面的fl和fr里面都加上font-size属性:
.fl{
Float:left;
Font-size:24px;
}
.fr{
Float:right;
Font-size:12px;
}
效果是:里面的字体是12px，再次验证了属性声明越靠后，优先级越高!
比如:
.fl{
Font-size:24px
Font-size:12px;
}
结果是:
比如：
<div id=”myid” class=”fr”></div>
我们在css文件里面指定:
#myid{
Float:left;
}
.fr{
Float:right;
}
虽然fr的float声明靠后，但是id属性优先啊，所以，这个div打死都不会向右浮动！
例如：
<div id=”myid” class=”fl lr”style=”float:right”></div>
那么这个div是向左浮动还是向右浮动?
答案是向右，因为不管是id和class，都是内联样式，行内样式优先级是高于内联样式的
关于css样式优先级顺序到此结束
你们的关注是我持续更新的动力，求个关注！
先，我们一般都是通过各种app，浏览器上各大平台制作我们的内容，这些内容最后一般都是通过html，css以及javascript处理，并且最终通过浏览器的渲染进程来展示出来。那这个背后的逻辑和原理是怎么样的呢？
浏览器开始加载 HTML 文档，并按照从上到下的顺序解析文档内容。
遇到 <script> 标签时，可能会暂停 HTML 解析，开始 JavaScript 解析。
浏览器引擎解析 JavaScript 代码，将其转换为可执行的机器码。
JavaScript 可以直接修改 DOM（文档对象模型）和 CSSOM（CSS 对象模型）。
HTML 解析器构建 DOM 树，表示文档的层次结构，即文档对象模型。
JavaScript 可以在这个阶段修改 DOM 树的结构。
浏览器解析 CSS 样式表，构建 CSS 对象模型（CSSOM）。
CSSOM 描述了文档中所有元素的样式信息。
DOM 树和 CSSOM 树结合，形成渲染树（Render Tree）。
渲染树只包含需要显示的节点和其样式信息。
浏览器根据渲染树的信息，计算每个节点在屏幕上的确切位置和大小。
浏览器使用绘制命令将每个节点绘制到屏幕上。
当 DOM 树或 CSSOM 树发生变化时，可能触发布局和绘制的重新计算，这就是重排（Reflow）和重绘（Repaint）。
重排涉及到重新计算布局，而重绘只涉及到样式的更新。
浏览器会尽量优化回流和重绘的开销，例如通过合并多次的操作、使用异步更新等方式。
在整个过程中，JavaScript、CSS 和 HTML 相互作用，而浏览器通过这些步骤最终将网页呈现给用户。这个过程是即时的，用户可以在不同阶段看到页面的渲染效果。因此，为了提高性能，开发人员需要注意减少不必要的回流和重绘，以及合理使用异步操作等策略。
*请认真填写需求信息，我们会在24小时内与您取得联系。
