不知不觉中，21年十月入职至今，距离加入前端行业已经半年了。从完全不懂的小白到到现在了解一点点皮毛都要感谢当初带我入行的人儿，在此点名表扬小红，豪大，我工位对面的大聪明，右边的学霸同桌。和同事们在一起有了读书时候的感觉，大家一起讨论难题，相互交流，分享经验。上班于我来说没有那么难过。
下面发个福利，给大家看看我的小猫咪，平时就是它陪着我hh。
长在电脑上的猫猫
CSS特点：
修饰页面文本、图片等页面元素，避免使用不必要的HTML元素。
·更有效地控制页面结构、页面布局。
·提高开发和维护效率。
CSS的简写：
·颜色的缩写：#RRGGBB –– 缩写成 #RGB。
·单位值的省略：当数值为0时，可省略单位。
·内外边距的简写：根据上右下左的顺时针方向，有4种简写方式。
CSS选择符：
·标签选择符：E(html标签)
·ID选择符：#className
·类选择符：.className
·通配符选择符：*
·包含选择符：又称派生或后代选择符，作用于元素的后代元素。
·子选择符：又称子对象选择符，作用于元素的子元素，用“>”连接选择符(IE7+)。
·相邻选择符：作用于元素的相邻的下一个元素(线性结构中的直接后驱)，用”+“连接选择符(IE7+)。
·选择符的组合关系：针对性使用类选择符或ID选择符、选择符群组、选择符组合。
伪类：
用来指定一个或者多个与其相关的选择符的状态(IE6/7支持部分)。其形式为：选择符:伪类 {属性:属性值;}。
如：a:link{}、a:visited{}、a:hover{}、a:active{}。
伪类可使页面增加更多交互效果，而不必去使用过多的javascript来辅助实现。
伪对象：
指在html的文档指定的信息之外，创建文档的额外信息(IE6/7支持部分)。其形式：选择符:伪对象 {属性:属性值;}。
如：p:before {content: “4月1日”}。
CSS层叠样式表的特色在于“层叠”，所谓层叠即表示CSS样式表会根据选择符的使用而将样式相互叠加或者覆盖。
网页定义的4种样式：
·html：表示在html中是使用的样式。
·作者：表示CSS文件的编写者。
·用户：指浏览器网页的用户所设置的样式。
·浏览器：指浏览器默认样式。
CSS样式采用的优先顺序：
·标有!important关键字声明的属性。
·html中的CSS样式属性。
·作者编辑的CSS文件样式属性。
·用户设置的样式。
·浏览器默认的样式。
选择符优先级积分：
·标签选择符、伪类及伪对象：优先级积分为1。
·类选择符、属性选择符：优先级积分为10。
·ID选择符：优先级积分为100。
·style属性：优先级积分为1000。
·其他选择符，如通配符选择符等：优先级积分为0。
CSS显示环境--浏览器
IE6----是目前国内使用率最高的浏览器，也是对css解析能力最差的浏览器。
IE7----使用率仅次于IE6，主要也是因为vista系统的到来也将IE7带入了很多网民的家里。
FF-----mozilla公司开发的一个自由的，开放源码的浏览器。
两列页面布局：
两列定宽结构：
要点：float、width指定、 :after清除浮动。
前提：两列的盒模型宽度相加不能大于父元素的宽度，否则会出现错位现象。
两列自适应结构：
要点：float、width百分比、 :after清除浮动。
单列定宽-单列自适应结构：
要点：相对定位、负边距效果：http://jsfiddle.net/XianfaLang/U3J3X/
问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决，个人觉得应该有CSS方案来解决这个问题，而不是用javascript来解决。
两列等高：
4.1. 背景模拟：利用背景图片的平铺，在视觉效果上产生等高的感觉。
4.2. 负边距实现(推荐)：
原理：利用左右两个方向的外边距弥补在页面中布局出现错位的现象。
要点：两容器设置margin-bottom:-9999px; padding-bottom:9999px，父元素设置overflow:hidden;
问题：如果页面使用<a>做页面跳转，将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部，将看不到背景图片。
4.3. 边框模拟：
要点：border-right:280px solid #AAAAAA; 绝对定位
4.4. JS方式：
要点：使用javascript设置两列高度相同。
三列或多列布局：
了解width:auto与float的关系：http://jsfiddle.net/XianfaLang/nMyh4/
两列定宽中间自适应结构：
要点：浮动、负边距、mainBox的width为100%。
左侧定宽-右侧和中间自适应结构：
要点：浮动、margin百分比、负边距。
三列宽度自适应结构：同左侧定宽-右侧和中间自适应结构类似，把宽度改为百分比即可。
三列等高：
原理同两列等高类似，也有4种实现方式。这里只列举两种：
文本相关
text-indent属性可将文字往旁边“推”，如：p { text-indent: 2em; } /* 设置段落缩进2em */ 联想到负边距有“吸”功效。
隐藏文字方法：
a. 使用text-indent／line-height 将文字“推”到容器之外。
b. visibility: hidden; 设置元素不可见，但占空间位置。
c. display: none; 设置元素不可见，不占空间位置。
图片相关
PNG优点：
是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存储形式丰富。
即能把图像文件压缩到极限以利于网络传输，又能保留所有与图像品质有关的信息。
显示速度快。
支持透明图像的制作。
PNG缺点：不支持动画效果。
PNG-8比GIF要小一点，GIF可制作动画而PNG-8无法实现动画效果。
PNG-24是色彩最丰富的图片，且支持alpha通道的透明，不像PNG-8和GIF只能支持全透明的图片。
支持alpha通道的透明，可以让图片产生半透明的效果，使页面更漂亮。
采用哪种格式的图片作为背景图的参考点：
图片是否严重失真。
哪种格式的图片是最小的。
图片是否有透明效果，如果有，那是否有alpha透明效果。
background-position注意点：
任何背景图片都是先设置水平方向的定位，再设置垂直方向的定位。
只有一个数值时，该数值将作用于水平方向的定位，而垂直方向的定位将以默认的50%为基准。
属性值为百分比时，将以图片的中心点为基准计算其相对位置，而使用px像素值时将以图片的左上角为基准。
可以使用负值。
CSS Sprite常用来合并频繁使用的图形元素。
CSS Sprite注意点：
固定容器的宽度和高度。
超出容器的宽度和高度部分的背景图片需要隐藏。
背景图片在合并时，需要考虑每张图片的用途。
图文混排：给<img>设置float: left;
三种列表：
无序列表：<ul><li>...</li></ul>
有序列表：<ol><li>...</li><ol>
自定义列表：<dl> <dt>标题</dt> <dd>内容</dd> </dl>
行内元素不具备宽高属性，只有将其转化为块级元素后才具备宽高属性。
CSS样式中能将块元素以横向排列方式排列的只有定位(position)和浮动(float)两种方式。
CSS实现表现效果，javascript实现行为效果。
CSS样式需要大家不断去摸索，不断尝试新的内容才会使每个人自身对CSS样式的理解及处理问题的能力得到提升。
列表示例：
二级菜单导航(横排)：
要点：整体宽度、一级列表宽高和浮动、二级列表绝对定位。
图文列表信息：
要点：整体宽度、浮动。
理解、分析、总结是必须要进行的几个步骤：
理解每个例子中所讲解的步骤及实现的方法。
分析每个方法的可用性及是否有其他更好的实现方法。
总结在每次实践中所得到的经验。
在IE浏览器中，按钮与文字之间的垂直对齐关系 如同 复选框与文字之间的对齐关系，需要利用vertical-align对其进行调整。
表格相关
border-collapse：检索或设置表格的行和单元格的边是否合并到一起。默认值：separate。合并：collapse。
可使用相邻选择符实现隔行换色。个人觉得此知识点，主要是了解相邻选择符的应用，实际应用性不大。
将table标签用于显示数据结构，而不是用于页面布局。
float是将页面中的元素在水平方向上并排显示的，而position却是将页面的元素以叠加的方式显示的。
使用CSS滤镜之前，需要思考的几个问题：
页面中使用CSS滤镜的次数会不会过多。
使用CSS滤镜是不是会占用较多的CPU。
能否使用图片直接代替由CSS滤镜产生的效果。
使用CSS滤镜后，会不会影响到页面中的内容操作。
使用iframe实现的“选项卡”逐渐演变为将页面内容集于一体，通过JS切换显示内容。
实现tab选项卡要把握html结构与css样式之间的微妙关系。
负边距与层叠效果的应用：怪异的导航菜单。
IE浏览器会在每个列表li之间产生几个像素的空间，可用float:left;使多余的几个像素“消失”。
分析实例最好的方法就是将其简单化，从根本上去了解问题、分析问题。
清除浮动作用：
解决页面错位现象。
解决子元素浮动导致父元素无法自适应子元素高度的问题。
清除浮动的常用方法：
1. clear属性--常用clear: both;
2. 添加额外标签: <div style="clear:both;"></div>
3. 使用 br标签和其自身的 html属性: <br clear="all">
4. 父元素设置: overflow: hidden; *zoom:1; (在IE6中还需要触发 hasLayout ，例如 zoom：1)
5. 父元素设置: display: table;
6. 父元素设置 :after 伪类 (推荐)：
复制代码
.clearFix:after {
clear: both; /* 清除伪类层以上的浮动 */
display: block; /* 使生成的元素以块级元素显示,占满剩余空间; */
visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */
height: 0;
line-height: 0; /* 设置伪类层中的高度和行高为0 */
content: " "; /* 将伪类层中的内容清空 */
}
.clearFix {
zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */
}
/* 更简洁的写法 */
.clearFix:before,
.clearFix:after {
content: "";
display: table;
}
.clearFix:after {
clear: both;
}
.clearFix{
zoom:1;
}
复制代码
结构分析是页面制作的第一步。
用户习惯于滚动条上下移动，而不是左右移动。
如果图片很大，可将其切成两张图片。
使用语义的XHTML标签优点：
当样式无法正常加载时，依然会显示条理清晰的文档结构。
增加SEO(搜索引擎优化)性能。
加强与程序开发之间的配合。
提高页面后期维护的工作效率。
以上就是本次分享的内容，以后有机会会多分享一些的。手动撒花花~~~
网友评论