CSS 基础

 架构

• 什么是CSS？为什么用CSS？

1.  CSS ：Cascading Style Sheets。
2.  CSS是HTML的表现形式，是在browser中的渲染。
3. 主要目的是使HTML内容与表现层独立分离；是开发者可以更好的实现对元素的控制，并初步实现交互（鼠标响应样式等）

• 如何实现一个好的CSS架构？

1.  预测性，重用性，维护性，扩展性。

更改添加某些样式规则的时候，不会影响到已有的样式，并且可以预见到元素的更改；可以在现有的组件上构建新的组件，无需修改编码模式；添加修改样式的时候无需重构现有的CSS样式； 

      2. 尽量避免不好的CSS

基于父组件的修改CSS，这样会致使代码的重用性受影响，不一定相同的样式都有相同的父组件。

过于复杂的选择器，会使元素应用的时候会过于复杂和迷惑性。

过于通用的类名，会使得依赖不同的CSS Library 或者大型网站的时候彼此相互影响，从而达不到预期的效果，可维护性也不佳。

一个规则做太多的事情，一个规则即定义了位置又定义了显示样式，在不同位置相同显示的元素就不可能重用，所以要尽量避免

3. 模块化

为CSS定义不同风格的类名书写方式,不同的风格代表不同的样式类型（.component-name;.component-name--modifier;.component-name__sub-object）。

定义基类样式,为网站的整个共同的元素定义整体的样式，（input body）.

定义位置样式

定义表现样式

• 盒模型

1.  box-sizing:content-box (default)

　　Element width = width + border+ padding

2. box-sizing:border-box 在知道元素整体占位高宽（加padding一起占50%）此时可以应用border-box

　　Element width = width

3. 外边距合并

在垂直方向上，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。相邻的外边距之间没有非空内容、padding和border和clear分隔。

 

 

• 布局

1. 普通文档流

自然排版布局，从左到右，从上到下，块状元素占据一行，从上到下，内联元素占据内容的大小位置，不能设置高宽，从左到右。

2. 位置布局

　　static (default) 

absolute:脱离文档流，可以不同元素占用相同位置，相对的左右定位是含有非static定位的父元素

relative:在普通文档流的基础上相对移动

fixed:相对试图窗口的位置偏移（网页小广告~）

3.Float布局

为了实现文本环绕。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后.

4.Flex(弹性布局)

• jquery & css 选择器 

1. 相对选择器 $("td", $(this)).css("background", "red") 相对于第二个对象（$this）的td
2. 多个条件选择器 ：$("p,div,span,menuitem") ，同时可以选择p div span 等
3. 层次选择器： $("#div li") .... 父子关系的选择器

 

转载链接

CSS架构

float布局：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　　　　https://segmentfault.com/a/1190000000707526