> For the complete documentation index, see [llms.txt](https://stb11816.gitbook.io/python_note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stb11816.gitbook.io/python_note/web-framework/css.md).

# CSS

物件位置

<https://sites.google.com/site/coolteazhuanti/css/qiang-zhi-shui-ping-pai-lie-bu-huan-xing>

<http://css-teach.7happy.com.tw/css-position.php>

<https://muki.tw/tech/css-div-center/>

文字效果

[https://blog.xuite.net/jason\_kuso/kuso/37092113-%E3%80%90html%E3%80%91%E6%96%87%E5%AD%97%E5%90%84%E5%BC%8F%E6%95%88%E6%9E%9C](https://blog.xuite.net/jason_kuso/kuso/37092113-【html】文字各式效果)

import方式

[https://blog.xuite.net/han31079/b747/13869483-CSS%E5%9F%BA%E7%A4%8E%E8%AA%8D%E8%AD%98](https://blog.xuite.net/han31079/b747/13869483-CSS基礎認識)

滑動確認按鈕

<https://www.wfublog.com/2018/01/css-slide-on-off-swith.html>

\[CSS] 圖片在div內水平置中

<http://stockwfj3.pixnet.net/blog/post/116998882>

超連結語法

[https://blog.xuite.net/han31079/b747/13940573-%E5%9F%BA%E6%9C%AC%E9%80%A3%E7%B5%90%E8%AA%9E%E6%B3%95](https://blog.xuite.net/han31079/b747/13940573-基本連結語法)

[https://www.wibibi.com/info.php?tid=CSS\_a\_%E9%80%A3%E7%B5%90%E6%A8%A3%E5%BC%8F%E6%95%88%E6%9E%9C%E8%A8%AD%E8%A8%88](https://www.wibibi.com/info.php?tid=CSS_a_連結樣式效果設計)

常用語法

```
<!-- 使div有超連結 -->
<div id="header" style="cursor:pointer;" onclick="location.href='http://www.blog.moocss.com/';"> 

<a href="#" style="text-decoration:none;">隱藏超連結底線範例</a>

文字css
text-align:left;　//向左對齊
text-align:right;　//向右對齊
text-align:center;　//置中
text-align:justify;　//使左右對齊本文
text-align:inherit;　//繼承父元素的 text-align 屬性
```

至底區域

<https://www.w3schools.com/howto/howto_css_fixed_footer.asp>

## DIV內元素置底

第一層DIV設定\
：position:relative;

第二層DIV設定

```
      position:absolute;

      bottom:0px;

      right:0px;
```

<http://zackwang.blogspot.com/2015/10/cssdiv.html>

## margin vs padding

```
margin-top：設定上邊界距離。
margin-left：設定左邊界距離。
margin-right：設定右邊界距離。
margin-bottom：設定下邊界距離。

padding:上距離 右距離 下距離 左距離;
四個方位的內距都不一樣，分開設定。
padding:上方與下方距離 左方與右方距離;
上下兩個方位的內距相同，左右兩的方位的內距相同。
padding:四個方位的距離;
四個方位的內距全部相同，一次設定。
padding:上方距離 左方與右方距離 下方距離;
左右兩邊的內距相同，分別設定上方與下方的內距。
```

內距：元素與邊框的距離

外距：元素間的間距

<https://pinkyvivi.pixnet.net/blog/post/1131260>

## display:block 與 display:inline

display:block - 區塊，元素會以區塊方式呈現，除非設定 position 或 float。 block 的特性是可以設定高度（height）、寬度（width）、上方與下方距離，像是 div、p、ul、li 均屬 block。

display:inline - 所有文字或圖片均不換行，也就是全部都會是同一行的意思。inline 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度，像是 span、a、input、img、em 均屬 inline。

<http://www.webtech.tw/info.php?tid=37>