1. 程式人生 > >給body加上border屬性後border為什麼會變大(算上了margin)?

給body加上border屬性後border為什麼會變大(算上了margin)?

  • 程式碼如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>linear-gradient()_CSS參考手冊_web前端開發參考手冊系列</title>
    <meta name="author" content="Joy Du(飄零霧雨), [email protected], www.doyoe.com" />
    <style>
        *{
            margin
: 0
; padding: 0; }
body { border: 1px solid yellow; } div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd; }
</style> </head> <body> <div class="test"
>
</div> </body> </html>

給body加上border: 1px solid yellow;樣式後,body的高度為div的高度加上margin-top,不加border: 1px solid yellow;時body的高度和div的高度一樣。
為什麼呢?

大盒子套小盒子

  • 程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title
>
<style> * { margin: 0; padding: 0; } div { display: inline-block; } .big { border: 1px solid #000; cursor: pointer; } .small { width: 200px; height: 200px; background-color: blue; padding: 10px; margin: 10px; } </style> </head> <body> <div class="big"> <div class="small"></div> </div> </body> </html>

大盒子沒有border屬性時,高度為220px,即height加padding,但是當大盒子加上border屬性時,會包括小盒子的margin,所以變大。

相關推薦

body加上border屬性border為什麼margin

程式碼如下: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="

java過濾器Cookie加上HttpOnly屬性

網上擼下來的程式碼登入不了… 公司安全掃描出的漏洞之一,看到的第一步就是各種百度,但是簡單複製貼上過來的程式碼連登入都登入不上了… 尷尬;然後發現貌似cookie的Name和value沒有對應上,需要改一點點… 而且原始碼的doFilter(request,

dvajs的一個大坑:使用BrowserHistory路由模式仍然出現hash哈希

targe http 手動 修改 發現 一個 ash 就會 browser 在dvajs中,如果你在初始化dva對象的時候不作任何處理,那麽你就會發現即使你是用了BrowserRouter來作為Router url中也是會出現#/。解決方法也很簡單: 使用前先手動安裝下

【問題分析】 為什麼設定android:windowIsTranslucent屬性Activity的退出動畫就不生效

問題概述 當為Activity設定了android:windowIsTranslucent=true的style屬性後, 該Activity會變成一個透明視窗, 隨之而來的問題是Activity的退出動畫會不生效了, 哪怕在finish回撥中使用類似下面的程式碼為Activity配置自定義進

jQuery批量修改Name值,批量增加name綴,非each不需要循環

jquery 批量修改name背景表單字段,配置where屬性自動刷新到可查詢區域,查詢字段需增加_where後綴,響應後臺規則問題批量設置的查詢字段,必須批量增加_where後綴方可正常查詢。each循環有點麻煩,有沒有更方便的批量修改方法。調查方向就是jquery批量修改name,整個互聯網充斥的都是.a

【探路者】第二周立報告3總第9次

.com 食堂 食物 框架 ext ima 博客 可能 能說 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:http://www.

【探路者】第三周立報告1總第13次

工作 logs cor str 內容 實現 產品 問題 cnblogs 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:http:/

【探路者】第三周立報告6總第18次

str 視頻 ext kanban list es2017 版本控制 成績 今天 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:h

【探路者】第四周立報告1總第20次

今天 報告 要求 歡迎界面 style line 開始 貢獻 https 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:http:

【探路者】第五周立報告5總第31次

探路者 制作 reads 照片 1-1 修改 視頻拍攝 target dsn 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:htt

【探路者】第六周立報告2總第35次

imm 組成 功能 不顯示 ora bsp 上傳 bin 今天 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:http://www

【探路者】第六周立報告3總第36次

過程 through 組成 添加 腳本 地址 2017年 mage ati 【探路者】組成員及各位博客地址。 1藺依銘:http://www.cnblogs.com/linym762/ 2張恩聚:http://www.cnblogs.com/zej87/ 3米赫:http

如何一個動態的網頁加個固定的底部如:備案號

網頁<html><head><title></title><meta charset="UTF-8"><style type="text/css">*{padding: 0;margin:0;lis

maven打包flash檔案,無法正常執行

最近一個老專案重構,前臺使用了swfupload來實現多檔案上傳,這是一個用flash實現的外掛。 開發階段,打包測試時均無問題。測試階段,在伺服器部署後,該外掛就莫名失效了。 經過排查最終確認是maven打測試包時,加上了資源過濾導致swfupload.swf檔案變大。  

XAML屬性賦值轉換之謎WPF XAML語法解密

XAML與XML類似,就是XML延伸過來的。為了更好的表達一些功能,WPF對XML做了擴充套件,有些功能是WPF在後臺悄悄的替你做了。有時候,雖然實現了某個功能,但是對實現原理還是很茫然。今天就講講XAML中賦值操作。 1 通過型別轉換賦值 賦值是最簡單最常見的操作,舉例: <Button

ubuntu首次安裝必裝的軟體by 星空武哥

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

JQuery應用例項學習 —— 13 點選邊框不斷

通過操作節點css屬性來控制邊框不斷變大 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

檔案流初識------筆記len是int 型的怎麼和string使用的?有佬可以回覆下謝謝

import java.io.*; public class newcollection {     public static void main(String args[])      {         File file=new File("D://1//WORLD.

1.棧新增一個獲取最小值的方法元素為Integer型,要求時間複雜度為O(1)

分析:在資料結構與演算法中,當要求時間複雜度最小時基本都是要犧牲空間複雜度。棧是先進後出,此處要求用棧實現一個獲取最小值的方法且時間複雜度為O(1),首先考慮的方向就是再借助一個棧來實現,這個棧主要用來儲存最小值序列(這個地方可以思考一下為什麼不能用一個變數來儲存最小值)。 下面直接附上程式碼:   

編寫函式,求出並設定y年m月d日的前一天或一天的日期能正確判斷閏年

#include <stdio.h> int irn; //判斷是閏年還是平年,閏年返回1,平年返回0 int isRunNian(int *y) { //判斷是否為閏年 if((*y%4==0 && *y%100!=0) || *y%400