> 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stb11816.gitbook.io/python_note/web-framework/css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.