當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css --- [读书笔记] 盒模型(边框、内外边距)

發布時間：2023/12/10 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 css --- [读书笔记] 盒模型(边框、内外边距) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說明

源代碼
學習

盒子模型(css重點)

css學習三大重點: css盒子模型、浮動、定位

目標:
- 能說出盒子模型由哪四部分組成: 內容、邊框、內外邊距
- 能說出內邊距的作用,設置不同數值分別代表的意思: 控制內部塊級元素和寬框的距離
- 能說出塊級盒子居中對齊需要的2個條件
- 能說出外邊距合并的解決辦法
應用:
- 能利用邊框復合寫法給元素添加邊框
- 能計算盒子的實際大小
- 能利用盒子模型布局模塊案例

1. 看透網頁布局的本質

看透網頁布局的本質:
- 首先利用CSS設置好盒子的大小,然后擺放盒子的位置
- 最后把網頁元素(文字、圖片等)放入盒子里面

2. 盒子模型(Box Model)

所謂盒子模型:
- 就是把HTML頁面中的布局元素看作是一個矩形的盒子,也就是一個盛裝內容的容器.

3. 盒子邊框 (border)

3.1 邊框重疊

兩個單元格之間的邊框會出現重疊,從而使邊框變粗

table{border-collapse: collapse; }

collapse 單詞是合并的意思
以上屬性表示相鄰的邊框合并在一起

table{border-collapse: collapse; }

4. 內邊距 (padding)

內容與邊框的距離
會改變盒子的大小

div{width: 200px;height: 200px;border: 1px solid red;padding: 10px 20px; }

此時的盒子高度是220px,寬度是220px
padding的值按順時針安利

4.1 要求盒子的左邊內邊距是5像素

padding-left: 5px;

4.2 要求簡寫的形式寫出一個盒子上下是25像素,左右是15像素

padding: 25px 15px;

4.3 簡寫的形式寫出一個盒子上內邊距是12像素下內邊距是0左內邊距是25右內邊距是10

paddding: 12px 10px 0 25px

4.4 字數不一樣的導航欄制作解決方案

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.nav {width: 100%;height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #ebeef0;background-color: #fcfcfc;}.nav a {text-decoration: none;color: black;display: inline-block;padding: 0 15px;height: 41px;line-height: 41px;font-size: 16px;}.nav a:hover {background-color: rgba(0, 0, 0, 0.2);}</style></head><body><div class="nav"><a href="#">一</a><a href="#">兩字</a><a href="#">三個字</a><a href="#">我是四字</a><a href="#">我有五個字</a><a href="#">我只有六個字</a></div></body> </html>

盒子的實際大小 = 內容寬度 + 內邊距 + 邊框

4.5 padding值不撐開盒子

如果盒子沒有指定寬度或者高度,那么padding值不會撐開寬度或高度

5. 外邊距 (margin)

盒子與盒子之間的距離

5.1 塊級盒子水平居中對齊

一般用于最外層的盒子,讓頁面的大部分信息始終在屏幕中心.

5.2 常見的行內塊

img
input
單元格

5.3 行內元素和塊級元素的居中對齊

text-align:可以讓行內元素,行內塊元素水平對齊
margin: 0 auto:可以讓塊級盒子水平居中

5.4 插入圖片和背景圖的位置移動

插入圖片: 通常用于產品展示,移動位置靠盒模型(padding margin)
背景圖片 : 一般是小圖標背景或超大背景圖, 移動位置只能靠 background-position

img {width: 200px;height: 210px;margin: 5px; } div {width: 400px;height: 400px;background: url(...) no-repeat;/* x方向移動30像素 y方向移動50像素 */background-position: 30px 50px; }

5.5 外邊距的合并

1)垂直外邊距合并(左右并不會出現)

.top{margin-bottom: 100px; } .bottom{margin-top: 50px; } <div class="top"> <div class="bottom">

此時,上面的盒子和下面的盒子距離為: 50px, 即上下外邊距會取較大值

2)兩個嵌套的塊級盒子模型

如果給父元添加上內邊距會是整個容器的高度變大

如果使用子元素的上外邊距.會使父元素和子元素全部向下移動對應的距離

正確做法如下:

.container{width: 500px;height: 500px;background-color: marron;border-top: 1px solid transparent; } .inner {width: 50px;height: 50px;background-color: skyblue;margin-top: 50px; }

補充: 盒子陰影的參數(CSS3)

box-shadow: x y 陰影虛實陰影尺寸陰影顏色內/外陰影

總結

以上是生活随笔為你收集整理的css --- [读书笔记] 盒模型(边框、内外边距)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：操作系统：高响应比优先调度算法（HRRN
下一篇：一个函数搞定无限层级分类