css的盒子模型

時間 2020-02-01

標籤 css 盒子模型欄目 CSS 简体版

原文原文鏈接

width和height是指content內容的寬高css

當width的值小於min-width時，則寬度爲min-widthhtml

當width的值大於max-width時，則寬度爲max-width瀏覽器

min-width和max-width存在兼容性問題，在IE6如下不支持字體

哪些元素能夠設置寬高屬性spa

塊級元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>、<dl> 、<dt> 、<dd>等code

替換元素
<img>、<input>、<textarea>等htm

若是圖片既經過width來設置寬度，又經過css樣式來設置寬度，最終寬度爲css樣式中設置的寬度blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         /*實際尺寸爲200px*/
        img{width:200px;}
    </style>
</head>
<body>
    <img src="cat.jpg" alt="cat" width="100px">
    
</body>
</html>

border-style的值繼承

none 定義無邊框。默認值
hidden 與「none」相同。除非在表格元素中解決邊框衝突時
dotted 定義點狀邊框。在大多數瀏覽器中呈現爲實線
dashed 定義虛線。在大多數瀏覽器中呈現爲實線
solid 定義實線
double 定義雙線
groove 定義 3D 凹槽邊框
ridge 定義 3D 壟狀邊框
inset 定義 3D inset 邊框
outset 定義 3D outset 邊框
inherit 規定應該從父元素繼承邊框樣式圖片

border能夠四個邊分開設置

border-left

border-right

border-top

border-bottom

    <style>
         p{width:200px;height:100px;border-top:1px solid blue;}
    </style>

padding縮寫：

padding : 值1； //4個方向都爲值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值4

margin值能夠爲負值，padding值不能夠爲負值

垂直方向上，兩個相鄰元素都設置外邊距，外邊距會發生合併

合併高度=兩個外邊距高度中的最大值

標準盒子模型

寬度=內容寬度

高度=內容高度

盒子在頁面中所佔的寬度=左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距

盒子在頁面中所佔的高度=上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距

盒子的實際寬度是：左邊框+左內邊距+內容寬度+右內邊距+右邊框

盒子的實際高度是：上邊框+上填充+內容高度+下填充+下邊框

IE盒子模型

寬度=左邊框+左填充+內容寬度+右填充+右邊框

高度=上邊框+上填充+內容高度+下填充+下邊框

盒子在頁面中所佔的寬度=左邊距+寬度+右邊距

盒子在頁面中所佔的高度=上邊距+高度+下邊距

若是有DOCTYPE文檔聲明，則全部瀏覽器會統一按照標準盒子模型來解析

display:inline; 內聯，先後沒有換行符

行內元素沒法設置寬和高，外邊距只能設置左右的，沒法設置上下的

display:block; 塊，先後帶有換行符

內聯元素之間有縫隙，是由於存在換行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{border:1px solid;}
    </style>
</head>
<body>
    <span>內聯元素1</span>
    <span>內聯元素2</span>
    <span>內聯元素3</span>
</body>
</html>

解決方法一：取消換行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{border:1px solid;}
    </style>
</head>
<body>
    <span>內聯元素1</span><span>內聯元素2</span><span>內聯元素3</span>
</body>
</html>

解決方法二：在外層加div，設置字體爲0，給子元素單獨設置字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{font-size:0px;}
        span{border:1px solid;font-size:16px;}
    </style>
</head>
<body>
    <div>
        <span>內聯元素1</span>
        <span>內聯元素2</span>
        <span>內聯元素3</span>
    </div>
    
</body>
</html>

display:none 不顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{color:#000;text-decoration: none;}
        span{display: none;;}
        a:hover span{display: inline-block;}
    </style>
</head>
<body>
    <a href="#">指我……<span>和你捉迷藏</span></a>
    
</body>
</html>

1. CSS盒子模型
2. CSS-盒子模型
3. 【CSS】盒子模型
4. css盒子模型
5. css盒子模型、
6. CSS 盒子模型
7. CSS---盒子模型
8. CSS——盒子模型
9. CSS - 盒子模型
10. CSS"盒子模型"
更多相關文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 委託模式
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。