置中

解説

  1. margin預設為0,有些元素預設有margin
  2. 以元素區塊右上角為中心,置中
    position: absolute;
    top: 50%;
    left: 50%;
    父元素position: relative;
    *此時置中中心點是元素右上角,非元素中心,所以看起來會不均衡。
  3. 將置中中心換成元素中心
    transform: trasnlateX(-50%)  trasnlateY(-50%)

transform: trasnlate

以元素中心為基準點,做偏移
【transform: trasnlateX(-50%)】以水平軸為基點,向左偏移元素長一半

範例

<h3>title</h3>
h3{
 margin: 0px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
}

Display

title

flex法

display: flex
justify-content: center  水平置中
align-items: center 垂直置中

<h3>title</h3>
body,html{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

Display

title

text-align & line-height 法(寫在母元素)

【母元素】

  • 水平置中:text-align
  • 垂直置中:line-height

【子元素】

display: inline-block
※即使子元素只有1個,也要設inline-block。
因為預設的display: block右邊的margin會很長

情況一:子元素裡面沒有東西

line-height的數値:母元素的height + 子元素的height

#parentBox
 .child
 .child
#parentBox //母元素height=500px
  width: 300px
  height: 300px
  background-color: #eee
  text-align: center
  line-height: 330px //300px+30px=330px

  
 
 .child //子元素height=100px
  width: 30px
  height: 30px
  display: inline-block //
  background-color: #beddcd

Display

情況二:子元素裡面有東西

【母元素】
line-height:母元素的height
【子元素】
line-height:子元素的height

#parentBox
 .child A
 .child B
#parentBox
  width: 300px
  height: 300px
  background-color: #eee
  text-align: center
  line-height: 330px

  
 
 .child
  width: 30px
  height: 30px
  display: inline-block
  background-color: #beddcd
  line-height: 30px

Display

A
B

常用mixin

用色定義

$bg-color: #f2f2e9
$main-color: #24260f
$sub-color: #90a955
$light-sub-color: #c1d7ae

内距外距設零

html,body
  padding: 0px
  margin: 0px

絶對定位

@mixin abso
  position: absolute

垂直水平置中

@mixin center
  position: absolute
  top: 50%
  left: 50%
  transform: translateX(-50%) translateY(-50%)

動畫效果

@mixin trans($s)
  transition: $s

尺寸

@mixin size($w,$h)
  width: $w
  height: $h

塞滿

@mixin fill
  width: 100%
  height: 100%

調整文字

@mixin text($size,$spacing,$color)
  font-size: $size
  text-spacing: $spacing
  color: $color

RWD寬度定義

$break-large: 1024px
$break_midium: 768px
$break-small: 400px

 

SASS

範圍界定

以換行縮排取代{}包覆概念,不用加【;】

.namecard
  width: 350px
  height: 200px
.namecard {
 width: 350px;
 height: 200px;
}

包覆

.namecard
  width: 350px
  height: 200px
  & h2
    font-size: 25px
    font-weight: 300
.namecard {
 width: 350px;
 height: 200px;
}
.namecard h2 {
 font-size: 25px;
 font-weight: 300;
}

變數

原生CSS變數寫法

$bgcolor: #243010

.namecard
 width: 350px
 height: 200px
 background-color: $bgcolor
.namecard {
 width: 350px;
 height: 200px;
 background-color: #243010;
}

MIXIN

@mixin block
  border: solid 1px

.block1
  +block
  width: 70px
  height: 70px

.block2
  +block
  width: 120px
  height: 12px
.block1 {
 border: solid 1px;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px;
 width: 120px;
 height: 12px;
}

MIXIN+參數

@mixin block($length: 50px)
  border: solid 1px
  width: $length
  height: $length

.block1
  +block(70px)

.block2
  +block(120px)
.block1 {
 border: solid 1px;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px;
 width: 120px;
 height: 120px;
}

MIXIN+多參數

@mixin block($length: 50px,$color: black)
  border: solid 1px $color
  width: $length
  height: $length

.block1
  +block(70px,red)

.block2
  +block(120px,green)
.block1 {
 border: solid 1px red;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px green;
 width: 120px;
 height: 120px;
}

JADE

屬性

a(href="https://goo.gl/AQjiva")
<a href="https://goo.gl/AQjiva"></a>

元素内文

a this-is-link
<a>this-is-link</a>

有些跟EMMET差不多

div+class

.namecard
<div class="namecard"></div>

div+多class

.circle1.circle2
<div class="circle1 circle2"></div>

比較需要注意的是

包覆:縮排

.namecard
  .circle.circle1
  .circle.circle2
  h2
   span
<div class="namecard">
 <div class="circle circle1"></div>
 <div class="circle circle2"></div>
 <h2><span></span></h2>
</div>

文字太多,程式碼換行

找到換行處,按Enter換行,再按Tab確保換行後的東西包覆在父元素下,然後加上【|】

p this is a paragraph with a lot of
 |text and we would like to cut them so that we cat
 | view it more clearly.
<p>
 this is a paragraph with a lot of text and we would like to cut them so that we cat view it more clearly.
</p>

EMMET

EMMET大全

輸入多元素

h2+hr+p+TAB button

<h2></h2>
<hr />
<p></p>

包覆

div>h2+hr+p+TAB button

<div>
 <h2></h2>
 <hr />
 <p></p>
</div>

div省略

.card>h2+hr+p+TAB button

<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>

重複

.card*2>h2+hr+p+TAB button

<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>
<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>

内有文字

.card>h2{標題}+hr+p{内文}+TAB button

<div class="card">
 <h2>標題</h2>
 <hr />
 <p>内文</p>
</di

重複 + 顯示數字

ul>li{選項$}*6+TAB button

<ul>
 <li>選項1</li>
 <li>選項2</li>
 <li>選項3</li>
 <li>選項4</li>
 <li>選項5</li>
 <li>選項6</li>
</ul>

img内部屬性

img[src=”https://goo.gl/AQjiva”]+TAB button

<img src="https://goo.gl/AQjiva" alt="" width="500" />

跳出上面的父元素

h2>span^h5

<h2><span></span></h2>
<h5></h5>

Percentage Circle

結構

percentage-circle-min

75%圓弧

<div class="outter">
   <div class="sq1"></div>
   <div class="sq2"></div>
   <div class="inner">
     <h4>75%</h4>
   </div>
</div>
.outter{
 width: 150px; height: 150px;
 background: #c1d7ae;
 border-radius: 100%;
 position: relative;
 overflow: hidden;
}

.sq1{
 width: 150px; height: 150px;
 position: absolute;
 left: 75px;
 background-color: #90a955;
}

.sq2{
 width: 75px; height: 75px;
 position: absolute;
 top: 75px;
 background-color: #90a955;
}

.inner{
 width: 140px; height: 140px; 
 border-radius: 100%;
 position: absolute;
 top: 5px;
 left: 5px;
 background-color: white;
 overflow: hidden;
}

.inner h4{
 text-align: center;
 line-height: 35px;
 font-size: 40px;
 font-family: Verdana, Geneva, sans-serif;
 font-weight: 300;
 color: #6A7152;
}

Display

75%

補充:傾斜效果

transform-origin: 傾斜後不要位移的地方(bottom, top等);
transform: X偏移skewX(度數30deg);
<div></div>
div{
 width: 75px; height: 75px;
 background-color: #90a955;
 transform-origin: bottom;
 transform: skewX(30deg);
}

Display

90%圓弧:左上方放一個傾斜的正方形

<div class="outter-2">
  <div class="sq1-2"></div>
  <div class="sq2-2"></div>
  <div class="sq3-2"></div>
  <div class="inner-2">
   <h4>90%</h4>
  </div>
</div>
.outter-2{
 width: 150px; height: 150px;
 background: #c1d7ae;
 border-radius: 100%;
 position: relative;
 overflow: hidden;
}

.sq1-2{
 width: 150px; height: 150px;
 position: absolute;
 left: 75px;
 background-color: #90a955;
}

.sq2-2{
 width: 75px; height: 75px;
 position: absolute;
 top: 75px;
 background-color: #90a955;
}

.sq3-2{
 width: 75px; height: 75px;
 background-color: #90a955;
 transform-origin: bottom;
 transform: skewX(30deg);
}

.inner-2{
 width: 140px; height: 140px; 
 border-radius: 100%;
 
 position: absolute;
 top: 5px;
 left: 5px;
 background-color: white;
 overflow: hidden;
}

.inner-2 h4{
 text-align: center;
 line-height: 35px;
 font-size: 40px;
 font-family: Verdana, Geneva, sans-serif;
 font-weight: 300;
 color: #6A7152;
}

Display

90%

範例

CODEPEN

box-sizing

問題

外框框線不算在外框尺寸之內,所以整個框框比預期來得大

原因

box-sizing: content-box→預設,外框框線在框元素之外。
box-sizing: border-box→外框框線包在框元素之內。

範例

<div></div>
<div class="b2"></div>
div{
 border-top: solid 20px #243010;
 border-bottom: solid 20px #243010;
 border-right: solid 2px #243010;
 border-left: solid 2px #243010;
 width: 350px; height: 200px;
 display: inline-block;
 margin-right: 20px;
 text-align: center;
 line-height: 200px;
}

.b2{
 box-sizing: border-box;
 position: relative;
 top: 20px;
}
&nbsp

Display

box-sizing: 無調整

 

box-sizing: border-box

box-shadow

參數設定

box-shadow: X偏移px Y偏移px 模糊的程度px 外擴或内縮px 指定顏色rgba;

範例

<div>這是陰影框</div>
div{
border: solid 1px;
width: 350px; height: 200px;
background-color: #243010;
color: white;
text-align: center;
line-height: 200px;
box-shadow: 10px 10px 20px -5px rgba(0,51,0,0.5);
}

Display

這是陰影框

OVERFLOW應用

産生卷軸

原理:超出元素範圍内的東西,用卷軸方式呈現

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: scroll;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

隱藏框外的東西

原理:超出元素範圍内的東西,給隱藏掉

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: hidden;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.