HTML & CSS Notes - woodyli7/woody-notebook GitHub Wiki

##CSS 排版重要概念 ####Positioning

relative 相对定位，相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。不影响自己，但影响子元素的absolute位置。

absolute 绝对定位，相对于最近一级的有relative或absolute position的父元素(没有就是body)来进行定位。元素在页面不占据位置。可以使用 top right bottom left 移动元素位置。 Absolutely positioned elements are moved in relation to their closest relatively positioned parent element. Should a relatively positioned parent element not exist, the absolutely positioned element will be positioned in relation to the element.

当一个元素的 position 值为 absolute 或 fixed 的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。

该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如，设置 absolute 之后发现它可以设置宽高了）。
如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。

延伸阅读： CSS 最核心的几个概念 | GeekPlux

####Float

假如某个div元素B是浮动的，如果B元素上一个元素A也是浮动的，那么B元素会跟随在上一个元素A的后边(如果一行放不下这两个元素，那么B元素会被挤到下一行)；如果B元素上一个元素是标准流中的元素，那么B的相对垂直位置不会改变，也就是说B的顶部总是和上一个元素的底部对齐。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

延伸閱讀： CSS浮动(float,clear)通俗讲解

####Z-index

No z-index or equal z-index = overlap determined by placement in DOM （後放的疊在先放的上面）

Higher values appear above lower values（ z-index 比較大的在比較上面）
Elements must be positioned for z-index to take effect. Use relative if you're not interested in moving the object （必須先被「定位」，才能使用 z-index)

延伸閱讀： Understanding CSS z-index

####其它

Collapsing Margin

多個 margin 疊在一起，會有 margin 重疊問題（ margin 會合併計算，取最大的。假設第一個 div margin-bottom: 40px，第二個 div margin-top: 20px。則他們的距離會是 40px ，而不是 60px）。

##CSS技巧

定位技巧

parent：relative，內部需要定位的元素 absolute，就不會超過邊界。

水平置中

text居中 text-align: center

Black居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
Absolute或Float之后再动态对母元素居中 Parent：relative; Child：absolute; left:25%;

垂直居中

text居中将line-height设置成和block height等高

block居中 Parent：relative; Child：absolute; top:25%;

CSS — Reset Style-sheet to border-box

*, *:after, *:before { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
 box-sizing: border-box;
}

图片宽度的自适应

img {max-width: 100%}

改变大小写

　p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize} p {font-variant: small-caps}

##BootStrap Grid##

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Bootstrap Documentation

##引用Google字体和连接CSS

<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', sans-serif;
}

##容易忘记的语法

div:nth-child(2n+1)   
border-radius: 5px

font: 16px/18px bold italic sans-serif; /* size/line-height weight style family */
background: #000 url(image.jpg) no-repeat center top; /* color image repeat x-pos y-pos */
list-style: disc inside none; /* style position image */
margin or padding: 0 10px 0 10px / 0 10px 0 / 0 10px; /* top right bottom left / top right&left bottom / top&bottom right&left */
border: 3px solid #ccc; /* width style color */

Background Image

background: url(bg.png) no-repeat top center;
background-size: cover;/auto 100%;
height: 500px;

##参考阅读 The stacking context - Web开发者指南 | MDN
CSS Positioning
[讀書筆記] CSS 基礎技巧懶人包
 CSS编写原则 | GeekPlux
CSS使用技巧 - 阮一峰的网络日志
 css层的定位position、absolute、relative层叠加的五条叠加法则

##Woody的试验

父子层级

See the Pen CSS Learning_#1_ParentChildLayer by woody (@woodyli) on CodePen.

HTML & CSS Notes - woodyli7/woody-notebook GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️