css样式总结体会

Posted 2020-10-30 wfblog

1、内联及行内元素设margin-top,padding-top没有效果，因为他们是基于基线对齐的。（需要自己多尝试下）

background-attachment：fixed  属性可以让背景图在浏览器窗口始终固定不变（就好像脱离了该背景图的标签），下面的内容滚动上去可以把它覆盖。

2、有时间研究一下3D的各种动态效果

3、关于内层DIV设置margin-top不起作用的解决方案（百度）

4、解决css3遮罩层挡住下面元素事件的方法：简单解决     pointer-events: none;

5、网页布局中侧边栏的一些与版心没有联系的的模块一律用定位，不然在网页变小（小屏幕电脑上)的时候侧边栏的元素会影响版心内容布局的。标准文档流就不用说了，浮动会有字围效应的。

6、如果一张大的banner图（内有文字），在浏览器变小的时候回使文字缺少一部分的话，可以把文字和背景分成两张图片处理。

7、vertical-align: top;属性是设置在子元素上的，也就是需要东西的的行内元素本身。

8、css3浏览器兼容问题就考虑5类：-webkit-；-moz-；-ms；-o-；还有一个是没有私有前缀的。

9、transform-origin：属性设置原点，是相对于该标签的左上角哪个点。默认的原点是图片中心点，也就是transform-origin：50% 50% 0；

10、border-collapse：属性可以设置表格边框是否被合并为一个单一的边框，还是象在标准的 html 中那样分开显示

11、如果文本的盒子设了弹性盒子模型，文字左右居中，text-align: center;属性会失效，还得单独测试一下。

12、css选择器最好是后代选择器和类名选择器的组合，因为如果页面出现改动，子代，后台和标签选择器组合的耦合性太大了，如果添加模块，模块正好是他的子代和或后代，那样式就会很乱的（因为标签名同类的太多了）。有一些ul下面的li是同样的样式的，这种可以给ul进行类选择器，后面的li用子代选择器比较好（用后代选择器的话，如果li后面嵌套了一个ul>li标签的话还是会出现耦合的）。

13、css组合选择器常用：后代、子代、相邻兄弟（下一个兄弟选择器）、

普通相邻兄弟（下面的所有兄弟选择器）[以上选择器在ie6以上都支持]

14、页面布局的时候，模块之间的左右间距不要严格按照设计图把值定死了，用户的浏览器是不同一的，有大有小的。所以这些间距就是灵活变动适应不同浏览器的一个方案。

15、父级元素的宽度太大的情况下，使用定位最好不要使用右边参考点，不然浏览器宽度变小的时候，整个结构就会乱掉。固定就另当别论了。

16、display：inline-block；和浮动的效果好像，因为脱离标准流的元素会隐式的转化为inline-block类型。但有和显示的display：inline-block；又有不同，显示表示的时候就不得不考虑元素的基线对其问题。

17、给元素设高度100%，往上推的父级元素的高度必须是可以确定，不然计算机没法计算的。如父元素的高度是通清除浮动撑出来的高度，给子元素设100%是无效的，

18、弹性盒子模型，盒子的之间的距离一定的相同的，不过他们之间的具体距离可以通过margin或pading值来改变的。

19、内联元素（包括行内块）默认都是基线对齐的，图片的基线就是图片的底部。父级元素默认 底边上一点的距离是基线对齐的地方（这个也只是对内联元素的子代有意义，块级元素没有任何影响）。内联元素一定是先按照内联元素对齐规则对齐后，再从上到下排版的。当文字的，图片的 vertical-align不为基线时或父元素的高度比图片大的多，则父元素默认 底边上一点的距离是基线就根本没有意义了，和没有一样。即父级元素默认 底边上一点的距离是基线只是在内联子元素是以基线对齐的时候会有效果。

也可以另外一种理解（个人自己的想法，觉的这种解释更合理。），内联元素始终是基线对齐的，内联元素高度最高的那个是决定基线所在的位置的，通过vertical-align可以设置它的基线位置，而其他的内联元素的vertical-align则是声明它们要和基准元素的关系，是和基准的头部对齐 还是基线对齐、又或者是底部对齐。

注意：vertical-align：bottom用在最高的内联元素则说明是与父元素以底边对齐的，与基线无关了。

20、父元素高度不是定值时，子元素高度用百分比是没有效果的。比如，父元素高度是被子元素撑高的，也包括清除浮动撑出来的高度。但是如果是定位元素的话，父元素高度不定，子元素也是单位的话，高度100%确是可以获得的。

21、banner图片用img标签和作为背景图片，两者各有优缺点。img只设宽度，图片会等比例缩放，这样的话高度就不能固定了；而作为背景，图片可以始终居中，图片大小不对改变，但是容器的宽度不够，会把图片两边给切掉的。如果banner图的突出看点是在之间部分的话用这种方法还是很不错的。

22、绝对定位元素，通过设置top、bottom可以决定他的高度；left、right可以决定他的宽度，这样不用设宽度和高度就可以设置元素的宽度和高度了。iscroll插件就是用的这种方法。

23、标签内的第一个标签设margin-top和最后一个标签设margin-bottom是没有效果的，他们都会作用到父元素上的。

24、body最好给他设一个最小宽度，因为  有的的时候banner区域不一定在版心区域，可能是通栏。如果没设这个属性的话，当缩小的版心后，有版心的也许就不会变化了（下面出现横向滚动条），但是通栏的还会不断的缩小。

25、当网站中所有的网页的头部是通过php的includ调用的，样式表也是同一个，如果某一页的头部需要有一点不同的样式的话，可以直接用内联式的方法在该页中写样式。

26、css3的弹性盒子的高度可以被子元素撑开