CSS Learning-1

2018-10-14

前端学习记录

发现一个极好的网站，http://zh.learnlayout.com,第一页就吸引了我，各位看官可移步一看(-_-)

display 属性

每个元素都有一个默认的dispaly属性，与元素类型有关，通常是block(块级元素)或inline(行内元素)

block

一个块级元素会新开一行并且尽可能撑满容器，比如div，p等.

inline

一个行内元素可以在段落内包裹一些文字并且不打乱段落的布局，比如a,span等.

none

display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素.

display属性可以随时重写，一个常见的例子是把li元素改为inline,从而制作水平菜单

width&&margin

width设置块级元素的宽度，可以防止撑满容器，然后设置左右外边距为auto,则可以使元素左右居中．
但是如果浏览器窗口宽度小于元素宽度时，便会出现一个横向滚动条，用户体验极差，方法是使用max-width替代width,如下:

#main {
  max-width: 600px;
  margin: 0 auto;
}

box-sizing: border-box

一个块级元素，使用padding属性和border-width属性后，会撑开元素，box-sizing属性就是用来解决此问题，设置box-sizing:border-box属性后，元素的内边距和边框便不会撑开元素，一般将此属性设为通用样式

* {
  -web-kit-box-sizing: border-box; 
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

box-sizing 是个很新的属性，所以还需要像上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性．

布局常用的属性有position,float,相比而言各有优劣．

position

static 默认值，不会被特殊定位
relative 相对布局，通过top,bottom,left,right来使元素偏离位置

.relative {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

fixed 相对于视窗来定位，即使页面滚动，它还是会停留在同样的位置，使用top,bottom,left,right确定位置

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

absolute absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素,如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动.

float

float是css布局常用属性，用于实现文字环绕图片．

img {
  float: right;
  margin: 0 0 1em 1em;
}

clear

clear用于控制浮动．

clearfix hack

使用浮动属性时，包含图片的元素比图片要小时，无法浮动，此时需要清除浮动，才能正常显示．

.clearfix {
  overflow: auto;
  zoom: 1;
}

flex-box

flex-box可以实现很多布局
常规用法：

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

高级用法

.container {
  display: -webkit-flex;
  display: flex;
}
＃空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
＃无论窗口如何变化，我的宽度一直是200px。
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
＃我会占满剩余宽度的1/3。
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
＃我会占满剩余宽度的2/3。
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

居中布局

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