布局

http://blog.csdn.net/linda_417/article/details/51507176

样式:

1.边框设置

边框`必须设置`样式才可以显示

样式如下:
[w3cshool样式演示][1-w]
[1-w]:http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

1.png

2.像素单位转换

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
感觉以后尽量使用rpx.

px是绝对单位: 像素px是相对于显示器屏幕分辨率而言的
em是相对单位: 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
vm: 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
[html,CSS文字大小单位px、em、pt的关系换算][2-r]
[2-r]:http://www.cnblogs.com/mxh1099/p/4071416.html

3.块元素和内联元素

块和inline 是对元素自身的描述限定,但是这个限定是关于相邻元素间关系的限定.
inline 元素相对其他元素的间距设定上,大多数情况下间距是要依靠line-height属性来设置.尽管 borde和padding可以获得同样可视的效果.

block（块）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素
中文叫法有多种内联元素、内嵌元素、行内元素、直进式元素）
块元素(block element)和内联元素(inline element)都是html规范中的概念。

块元素和内联元素的基本差异是块元素一般都从新行开始。

而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。

比如，我们完全可以把内联元素加上display:block这样的属性，让他也有每次都从新行开始的属性即成为块元素,

同样我们可以把块元素加上display:inline这样的属性，让他也在一行上排列

可变元素：
是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。

可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制

小程序中

view是块元素,但内部text是行内元素并不会自动换行
text元素和text元素之间并不会自动换行.除非之间有空行(即换行符)

margin 坍塌问题

同级元素间坍塌
父子元素间坍塌

同级元素间坍塌

对于上下两个并列的元素块而言，上面元素的margin-bottom和下面元素的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可

父子元素间坍塌

对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离

坍塌解决方式(父子)

设置边框,边框可以设置成透明 border:1px solid transparent
为父DIV添加padding，或者至少添加padding-top;

overflow:超出边界会被裁剪

值           描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden  内容会被修剪，并且其余内容是不可见的。
scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

#######固定元素:

footer {
position: fixed;
bottom: 5px;
left: 5px;
height: 70px;
background-color: white;
width: 100%-1px;
}
width: 100%-1px;//这里象征性的减去一个像素就可以被编译器理解为宽不是100%,此时left和right的不为0的值才会被采用.(原理未知)

布局

样式: