因为最近主要的工作是小程序，为小程序主要的难点与技术是前端方面，主要包含的技术就是css+小程序框架+js，而作为一个后台开发人员，对逻辑上的处理是长处，可是对页面的展示样式问题，确是不小的挑战，两个版本过后，因为需求中对样式的要求还是有一定的难度，所以在css 方面的领悟上也有了不小的提高，下面我总结并列举下这些天自己对样式学习的成果。</pre>
- 盒子模型
盒子模型 百度上的一些介绍。
盒子模型 最多常见的 就是 margin padding border 以前以内对盒子模型理解不够，多以在多层块结构的处理上存在很大的问题。现在基本掌握。
需要注意的是 margin塌陷问题，即一个子结构相对于父结构进行margin-top处理时，不生效问题，是因为所有的margin-top都是相对于页面顶端的处理，而不是相对父结构处理，这个是css本身的一个bug，处理方式是触发盒子模型的bfc 改变父级的渲染规则
触发bfc方式
{
position：absolute；
display：inline-block;
folat:left/right
overflow:hidden;
}
-
层模型
- 层模型成员
层模型的主要家族成员有absolute及relative和fixed 其中absolute被称为绝对定位，是脱离原来的位置进行定位，最近有定位的父级进行定位，如果没有，那么性对于文档进行定位。而relative是保留原来的位置进行定位，相对自己原来的位置进行定位。fixed的定位概念我并没有去熟悉，因为在做小程序时，他对ios系统存在兼容问题，所以慎用。他通常被用作网页的固定广告弹窗。- 层模型的使用情况
relative的使用相对较少，个人认为他比较不同，因为他移动后，原本的位置他不会让出来，感觉上没有absoluste那么好用。
> absolute使用就是很常用的了，他通常是结合relative一起使用，通过relative对父级进行一个定位处理，或许相对位置，需要注意的是，定位元素，要加left等元素否则不生效。
-
浮动模型
- 浮动模型成员
就一个float- 浮动模型的使用
当想把几个块元素，并排排列，那么就可以使用浮动元素了，他会自动把块元素改变为行级块元素，需要注意的是，他的边界问题，他的边界是他父级的边界，使用它的时候回产生浮动流，进而影响他后面的块元素，解决方式是，使用伪元素清除浮动流。
伪元素 对选中标签前后增加文字
span::before{
content:"新新";
}
span::after{
content:"新";
}</pre>
浮动图片环绕
.img{
margin-right:10px;
float:left;
width:100px;
}
-
三大模型之外的知识
三大模型是工作中经常会使用到的，对于pc端而言，很少会调整细微的样式，因为有一些ui的框架可以供我们去调用，在一个系统建成后，基本的样式已经有了对应的功能，所以后期维护时，变得很轻松，但是一个项目从无到有，那么拥有处理样式的能力就十分重要。下面继续介绍一些小的样式。
a标签可以被造出来的 同时也可以被更改成其他的样式。
span{
color:rgb(0,0,238);
text-decoration:underline;
cursor:move;
}
文字缩进时不要用nbsp 要用em 因为em代表了一格汉字的宽度
尽量不要在页面标签上设定style，因为style的权重很高。后期难以处理
尽量不要使用!import 这个东西，会使当前的样式权重最高，万不得已不要使用
层模型就像是一个大楼内，各个楼层的房间，他们在一个坐标但是却不在一个位置，这时想让那一层显示出来可以使用z-index:99
最后，需要注意的是，css的命名一定要语义化。
网友评论