CSS笔记：简析margin，padding，border

原創 Super_Tiger_Lee 2018-09-05 03:59

body 有一个默认的margin：8px，如果没有reset的话一定要小心

打个比方：字（等内容）是货物div，塑料泡沫是padding，背景图片是存在于货物和塑料泡沫中的空气，border是纸箱，margin是距离（当然是纸箱与纸箱之间的距离）

外面一层的div是以内层的border外侧相切的（如这里body和div的border相切）
这里写图片描述

这里写图片描述

所谓的div容器，是字（内容的容器）
这里写图片描述

这里写图片描述

代码，由于是实验功能用的代码，所以很乱
这里写图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

children和childNodes的区别

children 獲取當前元素的子節點元素（不包含文本元素） childNodes 獲取當前元素的子節點元素（包含文本元素） 有的時候不一定有children屬性 爲了兼容可以把childNodes中的元素過濾出來 functio

ynd_sg 2020-07-08 09:20:23

base64图片上传，并显示图片，

<a href="javascript:;" class="file">選擇文件 <input type="hidden" id="files-button" /> <input type="file" name="fil

qq_28761593 2020-07-08 02:31:49

HTML+CSS相对宽度和绝对宽度冲突时的div解决方法

相對寬度和絕對寬度衝突時的div解決方法 摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎麼辦呢？ 我們通過一道例題來講解今天的內容： 1.完成圖片上的題目要求 2.嘗試提

Super_Tiger_Lee 2020-07-07 17:52:15

移动web开发学习整理

移動web flex彈性 案例 彈性攜程首頁 效果： .base.css body, div, span, p, ul, li, a, img, input, h1, h2, h3, h4, i { margin: 0;

Silent Land 2020-07-06 20:14:43

【CSS】CSS之层叠性，继承性，优先级

層疊性 樣式發生衝突的時候，總是執行後邊的樣式，和調用順序無關。 繼承性 文字的所有屬性都可以被繼承 -特殊：h1-h6 文字大小不能被繼承 a標籤文字顏色不能被繼承 優先級 默認樣式<標籤選擇器<類選擇器<id選擇器<行內樣式

乌鲁托拉曼 2020-07-06 18:44:51

发送http请求过程所经历的阶段

先上一張圖給大家看看 http請求流程圖 相信看完這張圖後大家對一次請求也有了大致的瞭解了，當前其中還有很多細節小編沒有畫出來，然後我們來看看部分過程的細節 所以其流程大致如下： 1：DNS解析域名得到IP地址 2：客戶端

沐春风这个名 2020-07-06 05:01:24

SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）

一、SVG概念 1.什麼是SVG? SVG英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖 2.位圖和矢量圖 在計算機中有兩種圖形, 一種是位圖, 一種是矢量圖 2.1 位圖: 傳統的 j

Cao_Mary 2020-07-05 23:02:37

SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程

一、動畫 1.SVG動畫 在SVG中提供了三種常用動畫標記 animate：基礎動畫 animateTransform：形變動畫 animateMotion：路徑動畫 2.SVG動畫屬性 attributeType: CS

Cao_Mary 2020-07-05 23:02:37

详细了解flex布局的相关属性

flex佈局相信大家已經不陌生了，越來越多的人在開發中使用flex進行自適應的佈局。但是呢，有些flex的屬性代表什麼意思你真的瞭解嗎？下面我就着重說一說不常用的flex屬性吧（可能只是我個人不常用  (⊙﹏⊙)） 包含元素設置displ

百岁如流富贵冷灰 2020-07-05 17:35:36

怎么对阿里iconfont两个项目中的字体图标合并

1.把下載下來的2個文件夾都放入項目中 2.如要把iconfont2文件夾中的字體圖標合併到iconfont文件夾中,則如下圖，修改iconfon2文件夾下左側該圖標的五個文件名，同時修改這個文件夾中iconfont.css中@fon

weixin_38203203 2020-07-05 12:49:29

多行文本文本输入框 textarea 可点击任意地方输入文字而不是只能在开头输入的问题

   問題如圖:textarea可以點擊任意地方編輯 原因:textarea標籤之前有空隙 改成下圖這樣就可以了:

weixin_38203203 2020-07-05 12:49:19

flex布局(弹性布局、伸缩布局)

flex是CSS3中的一種佈局方式 主要介紹下彈性佈局的常用的一些屬性 當一個盒子設置爲display:flex的時候,盒子會變爲一個彈性盒子,盒子內部的子元素會默認沿着主軸方向排布,此時會引出主軸和側軸的概念。 主軸:默認水平向

weixin_45674894 2020-07-04 23:35:04

外边距的BUG及解决方式

1.相鄰塊元素垂直外邊距的合併 當上下相鄰的兩個元素相遇的時候,上面元素的有margin-bottom,下面的元素有margin-top時,兩者之間的間距並不是上下邊距之和,而是取兩者之間的較大者,這種現象稱之爲外邊距的塌陷。 如

weixin_45674894 2020-07-04 23:35:04

字体小图标使用与优缺点

之前對換膚就是改變css與img中的路徑來進行切換，但是效果與打包後的文件都不理想。使用字體小圖標只要改變CSS中的font-size和color就可以。 現結合其他資料對其進行小總結下： 優勢 輕量級：一個圖標字體要比一系列的圖

零零历险记 2020-07-04 22:36:40

前端配色

常用色彩 【優設網】中國傳統色彩 【優設網】日本傳統色彩 【中國色】中國傳統色彩 【百圖匯】顏色表大全 【oschina在線工具】RGB顏色常用對照表 配色方案 【小影的工具箱】配色表 【COOLORS】配色工具 色彩工具

Cookie_fzx 2020-07-04 01:52:50