【Web】CSS 经典样式及问题思考

CSS 经典样式及问题思考

盒模型问题及处理

当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。
盒模型效果css：

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

问题解决：新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box;

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

另外可以添加为页面全局有效

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Position使用及特殊处理

position属性和top、right、bottom、left配合使用，用以设定元素的位置

static
默认属性，表示不会被”positioned“

relative
相对定位，配合top、right、bottom、left使用，表示在原来的位置相对移动

fixed
固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom和 left 属性都可用。
移动端对fixed支持总结： http://bradfrost.com/blog/mobile/fixed-position/
移动端判断浏览器是否支持fixed属性方法如下：

function isSupportFixed() {
    var userAgent = window.navigator.userAgent, 
        ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/),
        ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) < 5),
        operaMini = /Opera Mini/i.test(userAgent),
        body = document.body,
        div, isFixed;

    div = document.createElement('div');
    div.style.cssText = 'display:none;position:fixed;z-index:100;';
    body.appendChild(div);
    isFixed = window.getComputedStyle(div).position != 'fixed';
    body.removeChild(div);
    div = null;

    return !!(isFixed || ios5below || operaMini);
}

说明： 对于不支持fixed的浏览器，window.getComputedStyle(div).position计算出来的值会是absolute。
z-index 属性设定了Z轴的位置，元素的默认z-index是0，要始终显示在最上层，可以通过设定z-index

absolute
absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
如果祖先元素是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

Float使用

Float属性即浮动属性，设置了float属性的元素是在包含块中浮动显示，会影响自身位置，同时也会影响周围元素的对齐和环绕，其中包含块概念如下：
包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素。

Float浮动位置和周围位置的关系，此处不做赘述。

清除浮动
高度塌陷：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

解决方法就是清除浮动。

方法1
哪里有浮动元素，就在其父级元素的内容中增加一个

方法2
在父元素上设置：overflow:hidden 或者 overflow: auto

方法3
after伪元素

.floatParent{
}
.floatParent:after {    
    display:block; content:''; clear:both; height:0; visibility:hidden;
}

移动端显示

使用 meta viewport：
https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

Display属性

block：块级属性，会重新开始一行并撑满容器。常用块级元素有：div、p、form、header、footer、section
inline：行内元素，占用一行并自动换行。常用行内元素有：span、a（用作链接元素）
none：不删除元素的情况下不显示元素，类似于Android View.Gone

inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递，它是inline和block的结合

更多display属性：https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=control

flex
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器具有以下属性：

1.flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）.

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2.flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow:  || ;
}

4.justify-content
justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5.align-items
align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

6.align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

垂直居中布局的一种实现

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

参考链接
学习CSS布局：http://zh.learnlayout.com/
CSS示例：http://www.w3school.com.cn/example/csse_examples.asp
Flex: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html