http://sweeteason.pixnet.net/blog/post/42130394#c1
1.
css gird方式
float:left
或
inline-block
或
Flexbox layout
上面要配media query
或
bootstrap
2.fluid layout
主要就是把原本用 px 單位製作的版面改成用 %
div {
width:360px;
/* 改成下面 */
width:35.15625%;
}
3.
div內文字垂宜置中
text-align:center
line-height高度跟divheight高度一樣
4. line-height
文字行的間距
4.
div區塊中的div垂水置中
4.1 div父要設position :relative
子要設absolute
margin:auto
top:0px
bottom:0px
left:0px
right:0px
4.2
用flex 模式在父div
用
display:flex;
align-items:center;
justify-content:center;
5.
div隨內元素撐大加
height: auto;
overflow: hidden;
6.
visibility:hidden與display:none 不同
visibility會保留空間
7.
word-spacing:10px;單詞
letter-spacing:10px; 字與字距離
8.
div + p指的是直接影響到div後的p，而div和p是屬於同一層的。
div~p 影響div後所有P
9.
white-space: pre; 和pre
會保留句子空白，html預設再多的空格也顯示一個而已
white-space:nowrap 強不換行
10.
要看到float效果要先設div 寬
11.
三個float
要撐開container 要用clearfix style {container:after{display:ta}ble,content:"" clear:both}
12.
max-width
在不同的@media 寬度 container設定不同max-width 防爆出
container
max-width: 800px; 表示你螢幕再大最後寬度都維持800px ，螢幕寬度小於800px會自動調整
然後可以設定grid某大小會width100% 觀念 drop column
13.
div要設寬度才能限制 裡面放的h1 h2 圖片的大小
14.
div設定寬度才有margin可以平分置中
margin 0 auto
15.
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
16.圖片要rwd
max-width 100%
height:auto
17.
要讓多個div水平置中，包box的父親要text-align:center
div.container container{text-align:center}
div.box
div.box
div.box
18.
nav li {float:left 能消除用inlineblock的空格
19.
nav{li{a: padding 會撐大li 且空白處也可點
20.
div裡的產品img h2 p
要img定在idv邊界
有兩方法
20.1 position relative 可移動
top:
left:
這方法只調img
20.2div裡img用margin-top:-10整個div內的都會移
21.
img 不要有底線
img{
display:block;
// +block因為img預設inline 所以會有底線
width:100%;
}
22.img圖片爆出容器
img{
width:100%讓他完全服貼容器
heigt:auto 讓他依照原本放大縮小
23.absolute relative
要讓div子元素跑到父元素的左上角位置
要先定義div子位素的position是absolute
會先對到body左上角
要讓他找到父元塑就要父元素 position relative
再讓子元素跟父元素相同大小要展開 width:100% height:100%
要讓他的案牛文字移動到中間text-align:center
調整垂直 padding-top :-50
的話會凸出來
要用box-sizing:border-box
會自動變 width 100%=本體+padding
24.扁平化設計
sans-serif 無稿線
25.
imgbox
一定要在Img外包imgbox 限制他的padding
26.
垂直置中兩個方法
26.1
flex align-item justify-content center
26.2
父:display:table
子:display:table-cell
vertical-align:middle
27
.c{
&:after{
display:block; // 要block底線才會從h2出來
content:'';
transform:scaleX(0);
transition: transform 250ms ease-in-out;
border-bottom:red 1px solid;
}
&:hover{
&:after{
transform: scaleX(1);
transform-origin:100% 70%; x ,y位置
}
}
}
留言列表
