发表于： 2019-12-10 22:00:06
1 1050
今天完成的事情：
今天修改遇到页面的问题 之后在学习深度思考
<label><input type="checkbox" ></label> 这样不用id也可以实现同样的效果
letter-spacing：1px； 增加或减少字符间的空白（字符间距）
html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
css都小写
css用外链 放在<head></head>
命名用英文，在开头最好规定语言
id少用 多用类选择器 .photo
如果一个<div></div>能解决，尽可能减少div嵌套.
尽量避免使用style属性 写在相应的文件中
对于属性的定义，确保全部使用双引号，绝不要使用单引号
不用下划线_ 用 -
16进制颜色 属性尽量缩写
0.8 写成 .8
cloor： 这里要一个空格 #ddd；
用 border: 0; 代替 border: none;；
选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；
尽量少用'*'选择器。
ul的list-style默认样式是和li标签成分离状的，把list-style设置为inside,就可以改变为在li标签内。
深度思考
CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
正确的标签嵌套
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.块级元素与块级元素平级、内联元素与内联元素平级
2.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素
3.有几个特殊的块级元素只能包含内联元素，不能再包含块级元素 h1~h6、p、dt。
4.块级元素不能放在标签p里面。
5.li标签可以包含div标签，因为li和div标签都是装在内容的容器。
resetting 和 normalizing 之间有什么区别?
resetting:直接重置所有格式，没有任何前提性质的。
normalizing：重置部分格式的。
所以建议在设置的时候使用 normalizing进行重置，避免造成所有数据丢失。resetting 这个需要谨慎使用
为什么要做组件库？
提高前端开发效率，降低WEB维护成本
兼容hack
在css里编写
webkit内核浏览器 -Webkit
Gecko内核浏览器 -moz
Presto内核浏览器的 -o
Trident内核浏览器的 -ms
BFC
浮动元素会形成BFC，浮动元素内部子元素主要受该浮动元素影响，两个浮动元素之间是互不影响的。
当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
当 BFC 的宽度大于容器剩余宽度时，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
浮动之后 清除浮动，浮动元素总是挤到边界，排好一个浮动元素之后，这一行就要重排一次。所以说浮动元素会造成行级的reflow。重排的时候，行盒会躲开浮动元素。之后的块级盒（不论是行盒还是其它盒）也都会躲开浮动元素排布。
清除浮动
在想要清除浮动的元素后面加上空标签
.这个类名随意 { clera：both；}
<div class=" 这个类名随意"></div> 这个办法少用
给父元素加伪类 父元素有高度了 这个较常用
.s:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
给父元素加双伪类清除浮动
.s:before,.s:after {
content: "";
display: table;
}
.s::after {
clear: both;
}
外边距重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
解决外边距重叠？
内层元素绝对定位 postion:absolute:
内层元素 加float:left;或display:inline-block;
外层元素padding代替
外层元素 overflow:hidden;
内层元素padding:1px;
内层元素透明边框 border:1px solid transparent;
前端角度出发做好SEO（搜索引擎优化）需要考虑什么?
1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。
2、 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。
3、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。
5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。
6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。
7、 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。
8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。
————————————————————————————————————
微格式
微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）
<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/</a>
</div>
这里，正式名称（class=”fn”）
组织（class=”org”）
电话号码（class=”tel”）和url（class=”url”）分别用相应的class标示
同时，所有内容都包含在class="vcard"里
————————————————————————————————————
渐进增强与优雅降级有什么区别
渐进增强与优雅降级的区别在于：前者是优先考虑低版本，由低版本向高版本递进；后者是针对最高级的浏览器来设置后再考虑低版本浏览器的兼容问题
何谓渐进增强：
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
何谓优雅降级：
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
————————————————————————————————————
Quirks模式是什么？它和Standards模式有什么区别？
开启Quirks模式很简单。。。。就是把DOCTYPE随便写。。写的浏览器根本认不出来这是什么玩意儿之后，甚至可以不写，你就成功开启了！
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
解决办法，用text-align属性:
body{text-align:center};#{content:text-align:left}
盒模型
盒模型是浏览器 Quirks Mode 和 Standards Mode 的主要区别。
在 IE 盒模型中，
盒子宽= 内容宽+左右内边距+左右边框
盒子高= 内容高+上下内边距+上下边框
明天计划的事情：
上午复习深度思考，下午学习JS基础语法
遇到的问题：
已解决
收获：
明天开始JS
返回列表
评论