前端学习笔记

一、

参考链接：http://zh.learnlayout.com

1、display属性

block
块级元素，新起一行并且尽可能撑满容器，如：p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline
行内元素，包裹一些文字而不会打乱段落的布局，如：span、a等。

none
一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
注：display: none 元素不会占据它本来应该显示的空间；但是设置成 visibility: hidden;，元素还会占据空间。

强制覆盖原display属性常见的应用是：把 li 元素修改成 inline，制作成水平菜单。

2、

#main { 
max-width: 600px;     // IE7+
margin: 0 auto;      // 设置左右外边距为 auto 来使其水平居中
}

3、box-sizing: border-box

使元素的内边距和边框不再会增加它的宽度，支持IE8+。

一般全局设置，所以写在开头：

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

4、position

static
static 是默认值。任意 position: static; 的元素不会被特殊的定位。
一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
relative
相对定位的元素设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置，否则与static一样。
其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
fixed
相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
absolute
absolute 是相对于最近的“positioned”祖先元素。如果没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
记住一个“positioned”元素是指 position 值不是 static 的元素。

5、float & clear

float：在父元素中左、右浮动，例如用于图片位于左上角，文字环绕：

<img src="XXX" />
<p> 文字 </p>

img {
    float:left;
    width:20%;
}

clear：用于控制浮动，可以使文字不环绕，浮动到图片的下方。

clear : left;

清除浮动(clearfix hack)：当浮动元素高度溢出父元素时，父元素设置：

css.clearfix {
  overflow: auto;
  zoom: 1;   /*IE6需要加*/
}

6、响应式设计

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

7、inline-block

创建很多网格来铺满浏览器：inline-block 行内块，后面的div不受影响：

.box {
    display: inline-block;
    width: 20%;
    height: 5em;
    margin: 1em;
}

相当于下面float实现，但是float之后的要clear掉：

.box {
    float: left;
    width: 20%;
    height: 5em;
    margin: 1em;
}
.clear {
    clear: left;
}

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

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

8、column

列属性，使适用于ie10+,一下是三列的css：

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

9、flexbox

flex布局，详见：https://bocoup.com/blog/dive-into-flexbox
父元素布局方式设置为flex，子元素flex属性设置为数字则表示布局中占比的份额，如果设置为none则为固定宽度，如果设置为initial则初始化为设定的width（受最大最小宽度影响）。

.container {   //父元素
  display: -webkit-flex;
  display: flex;
}
.initial {      //正常情况宽度200px，若空间不足则变窄到100px，但不会再窄了。
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {     //无论窗口如何变化，宽度一直是200px。
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {    //占剩余空间的1/3
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {    //占剩余空间的2/3
  -webkit-flex: 2;
          flex: 2;
}

如果有一个侧边栏，有固定宽度，剩余正文部分补足宽度，则可以设置正文部分flex为1。
设置水平+垂直居中：

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

二、

参考链接： https://github.com/xn11/ife/tree/master/2015_spring/task/task0001

1、一些属性

• text-indent：首行缩进，可以为负值。
• text-transform：属性控制文本的大小写：
  
  • capitalize 文本中的每个单词以大写字母开头；
  • uppercase 定义仅有大写字母；
  • lowercase 定义无大写字母，仅有小写字母。
• text-decoration：添加到文本的修饰。（修饰的颜色由 “color” 属性设置）：
  
  • underline 定义文本下的一条线；
  • overline 定义文本上的一条线；
  • line-through 定义穿过文本下的一条线；
  • blink 定义闪烁的文本。
• text-align 元素中的文本的水平对齐方式：
  
  • left 把文本排列到左边。默认值：由浏览器决定；
  • right 把文本排列到右边；
  • center 把文本排列到中间；
  • justify 实现两端对齐文本效果。
• word-spacing 增加或减少英文单词间的空白（即字间隔），可以为负值。
• white-space 设置如何处理元素内的空白：
  
  • normal 空白和换行都不会显示，会自动换行（默认）；
  • pre 空白和换行都会显示，，不会自动换行，类似 HTML 中的 pre 标签；
  • nowrap 空白和换行都不会显示，也不会自动换行，直到遇到 br标签为止；
  • pre-wrap 空白和换行都会显示，会自动换行；
  • pre-line 除了会合并空白符，其他与pre-wrap一样。
• color 文本的颜色。设置元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
• line-height 设置行间的距离（行高），不允许使用负值。

• font 简写设置所有字体属性。
  按顺序包括：font-style（斜体italic，oblique倾斜），font-variant（small-caps小型大写字母），font-weight（bold粗体，bolder更粗体，lighter更细体，或者数字400–normal、700–bold），font-size/line-height，font-family。可以不设置其中的某个值，比如 font:100% verdana; 也是允许的，未设置的属性会使用其默认值。
  详见：http://www.w3school.com.cn/cssref/pr_font_font.asp

• @font-face CSS3中将字体文件存放到 web 服务器上，需要时被自动下载到用户的计算机上：

<style> 
@font-face{
    font-family : myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}

div{
    font-family : myFirstFont;
}
</style>