CSS 紀錄

發表於 | 更新於 | 分類於 | 評論數：

紀錄常用的
CSS -> Cascading Style Sheet 層疊樣式表

CSS - 塊級元素(block) & 行內元素(inline)

  • 塊級元素
    • 自動換行
    • 能設置寬高
    • margin 和 padding 上下左右的值都可以設定
    • <div>、<p>、<ul>、<table>
  • 行內元素
    • 不自動換行
    • 設置寬高無效
    • padding 上下左右都可以設置；但 margin 左右值有效，上下值無效
    • <a>、<span>、<img>、<button>、 偽元素、label

CSS - 選擇器

選擇器 表示方式
子孫 空格
孩子 >
兄弟姊妹 ~/+
元素 a{}
偽元素 ::before{}
class .link{}
屬性 [type=radio]{}
偽類 :hover{}
id #id{}
組合 [type=checkbox]+label{}
否定 :not(.link){}
通用 *{}

CSS - 選擇器優先級

!important(10000) > 行內樣式(1000) > id 選擇器(100) > class 選擇器(10) > tag 選擇器(1)

CSS - 前綴詞

  • Chrome與Safari正是用webkit核心
  • -moz-則是Mozilla公司的縮寫(Gecko核心)，代表瀏覽器為Firefox
  • -o-是Opera瀏覽器的縮寫(Presto核心)
  • -ms-微軟的縮寫代表瀏覽器是ie
1
2
3
4
5
6
7
.class{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

CSS - reset & normalize

  • reset
    • 使用時機 - 設計師針對畫面樣式的規定不一定會與瀏覽器的預設相符的時候
    • 把所有瀏覽器最不一致的地方強制歸 0
    • 優點是統整、重置了各個瀏覽器的樣式設定
    • 缺點是必須全部重新做設定，比較沒有彈性
  • normalize
    • 最大的特色就是保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整
    • 修正瀏覽器的 Bug 與不一致

CSS - 語法

display - 常用的元件顯示類別屬性

block inline inline-block
flex grid table
none initial - 讓屬性恢復預設值 inherit

black - 佔據一整行的方塊有自己的寬高，其他內容都會被擠走

title

1
2
3
.block {
    display :block; 
}

inline - 內容有多大就多大 沒辦法設定長寬 (符合內容長寬)

title

1
2
3
4
5
6
<div class="block">Lorem ipsum dolor</div>

.block {
  display: inline;
  border: 1px solid red;
}

inline-block - 可以設定寬高但又不會佔據一整行

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="block">Lorem ipsum dolor</div>
<div class="block2">Lorem ipsum dolor</div>

.block {
  display: inline-block;
  border: 1px solid red;
  width:50px;
  height:50px;
}
.block2 {
  display:inline-block;
  border: 1px solid red;
  width:50px;
  height:50px;
}

display:none & visibility:hidden & overflow:hidden 差異

  • display:none - 使用此屬性之後元素不存在了，元素佔據的位置也不存在
  • visibility:hidden - 使用此屬性之後元素不存在了，元素佔據的位置依然存在
  • overflow:hidden - 對行內元素無效，必須是塊級元素，並且設置寬度高度，隱藏之後元素依然佔據著位置

display: flex 下 overflow: hidden 失效

  • 在父元素設定 
1
2
min-width: 0;  或 min-height: 0;
overflow: hidden;

position - 用來設定”位子”的特性

statice 定位元素 - 元件按照自然排列無法調整位置

title

1
position: static;

relative 相對定位元素 - 可調整元件的位置

title

1
2
3
position: relative;
top: 40px; 
left: 40px;

absoult 絕對定位元素 - 找最近有設定過 position 的祖先 , 若沒有則去找 body

title

1
2
3
position: absolute; 
top: 40px; 
left: 40px;

fixed 固定定位 - 元件會固定在畫面上，不會隨捲軸滾動而移動

title

1
2
position: fixed; 
top: 20px;

sticky 黏性定位 - relative + fixed 混合

title

1
2
3
position: -webkit-sticky; 
position: sticky; 
top: 20px;

float - 文繞圖

可參考 -> https://developer.mozilla.org/zh-CN/docs/CSS/float

title

1
float: none;

title

1
float: left;

title

1
float: right;

CSS - 清除浮動元件

codePen -> https://codepen.io/Jimmywei01/pen/vwxzxE?editors=1100

float 浮動元素的父元素高度塌陷問題

  • clearfix 作法
    • 建立假的元素，設定塊級元素(table or block)，左側和右側均不允許出現浮動元素
  • BFC (Block Formatting Contexts 塊級格式化上下文) 作法 (W3C CSS2.1 規範中的一個概念)
    • 具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器所沒有的一些特性
    • 可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何設定都不會影響到外部元素
  • 觸發BFC 特性：
    • body 根元素
    • 浮動元素：float 除 none 以外的值
    • 絕對定位元素：position (absolute、fixed)
    • display 為 inline-block、table-cells、flex
    • overflow 除了 visible 以外的值(hidden、auto、scroll)

title

BFC 作法 與 clearfix 擇一使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class=“content clearfix">
  <div class="box">box</div>
  <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

.content{
  background-color:black;
  width:500px;
/* BFC 作法 */
  overflow:hidden;
}

/* clearfix 作法 */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

CSS - margin collapsing(崩塌)

  • 兩個元件之間的 margin 重疊
  • 讓父元素形成 BFC來接管自己的高度
    • 在父元素增加 overflow:hidden 或在子元素增加 display:inline-hidden 等等

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.towBox{
  /* overflow:hidden; */
}

.box4 {
  /* display:inline-block; */
  margin:50px;
  background-color: pink;
  width: 100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
.box5 {
  margin:50px;
  background-color: yellow;
  width: 100px;
  height:100px;
  text-align:center;
  line-height:100px;
}

CSS - z-index 疊層樣式

  • 設定 HTML 元素定位屬性和 z-index 屬性創建一個層疊上下文 (opacity 值不為1 也會創建疊層)
  • Root
    • DIV #1
      • DIV #2
      • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

DIV #2、DIV #3 是 DIV #1 的子元素，它們的層疊和渲染完全在 DIV #1 中處理
處理完成，DIV #1 元素作為一個整體並與 DIV #4、DIV #5 、DIV #6 元素進行層疊處理

title

CSS - box-model

box-sizing: content-box

  • 元素的寬為 160px，那麼這個元素的內容區會有 160px 寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中

box-sizing: border-box

  • 元素的 width 設為160px,那麼這160px 會包含其它的 border 和 padding，內容區的實際寬度會是width 減去 border + padding 的計算值
  • 表示盒子模型的寬度和高度將包含其內邊距和邊框
  • 更容易去設定元素的寬高

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="content-box">Content box</div>
<div class="border-box">Border box</div>

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}
.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px */
}
.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px */
}

CSS 提問

  1. CSS 的 class 和 id 差異？
  • id 權重 > class 權重
  • 同一個頁面上的兩個元素不能有相同的 id 屬性值
  1. 怎麼實現水平置中 & 垂直置中
1
2
text-align: center;
line-height: 100px;
  • 塊級元素
1
margin: 0 auto;
  • 未知高度和寬度元素的水平垂直居中
    • 被置中的元素是 inline 或者 inline-block 元素
1
2
3
4
5
6
7
.container{ 
    width: 600px;
    height: 600px; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle;
}
  • CSS3 的 transform 屬性
1
2
3
4
5
6
7
8
9
10
11
.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  • flex
1
2
3
4
5
6
7
.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  1. 實現左邊定寬，右邊自適應佈局
  • 左盒子左浮動，右盒子 width=100%
  • 左盒子左浮動，右盒子 margin-left=左盒子寬度
  • 左盒子左浮動，右盒子右浮動，設置 width: calc（100 % - 左盒子寬度）
  • 父容器設置 display：flex，右盒子 flex：1
0%