css布局

Contents

Display属性。每个元素都有一个默认的display值，这与元素的类型有关系。
一个block元素通常被叫做块级元素
一个inline元素被叫做行内元素

Block

是一个标准的块级元素。一个块级元素会新开始一行并尽可能撑满容器。
常见块级元素有p form header footer section

Inline
是一个标准的行内inline元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。a元素是最常用的行内元素

None
一些特殊元素的默认display值是none，比如script。
Display:none通常被js用来在不删除元素的情况下隐藏或显示元素。设置成none不会占据他本来应该显示的空间，和visibility:hidden不一样，这个会占据空间。

当你设置一个元素box-sizing:border-box 此时元素的内边距和边框都不会增加他的宽度
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 支持ie8+

position
1、 static 默认值。任意position：static的元素都不会被特殊的定位
2、 relative 相对定位表现和static一样。设置top、right、bottom、left会使得其偏离原来的位置。其他元素的位置不会受该元素的影响发声位置改变来弥补他偏离后剩下的空隙
3、 fixed 固定定位。相对于视窗来定位。移动浏览器对它的支持很差
4、 absolute 相对于最近的“positioned”祖先没有祖先元素则相对于文档的body元素，会随着页面滚动而滚动。是指一个position不为static的元素

float 可以实现文字环绕图片
clear 控制浮动 clear:left clear:right 清楚向左或向右的浮动
清楚浮动
父元素
.clearfix {
overflow: auto;
zoom: 1;
}

响应式布局媒体查询使用 meta viewport可以让布局在移动浏览器上显示更好。

使用inline-block布局有几点：
• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

字体加粗 font-weight:bold; normal默认
字体斜体 font-style:italic; normal则默认
下划线 text-decoration: underline;

颜色 #ff0000 #f00红色【红-绿-蓝】 #FFA500橙色 #808080 灰色
hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
rgb(0, 0, 0) 黑色 rgb(255, 255, 255)白色 rgb(255, 0, 0)红色

:nth-child()第几个子元素【从零开始下表】
:odd 奇数
:even 偶数

CSS选择器：
1 类选择器
2 id选择器
3 标签选择器
4 后代选择器【空格】不是子元素

原来一个border是由三个小属性综合而成：
border-width border-style border-color。

html学习笔记：
注释
关于Lorem ipsum 占位符http://www.ruanyifeng.com/blog/2009/04/lorem_ipsum.html

谷歌字体

划伤去鼠标变化，是一个手，则是

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
每一个复选按钮都应该嵌套进label元素中.所有关联的复选按钮应该具有相同的name属性。

Bootstrap

font awesome

按钮文字旁边一个点赞的手势：