CSS盒子以及簡單的數值設置

時間 2019-11-13

標籤 css 盒子以及簡單數值設置欄目 CSS 简体版

原文原文鏈接

塊元素與內聯元素區別
通常狀況作佈局用塊元素 div。在一行上就用<span>
塊元素又名塊級元素（block element）和其對應的是內聯元素(inline element),都是html規範中的概念
block元素的特色
1.老是在新行上開始
2.高度，行高以及外邊距和內邊距均可控制
3.寬度缺省是它的容器的100%，除非設定一個寬度
4.它能夠容納內聯元素和其餘塊元素css

div就是一個塊元素
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<hr>-水平分隔線
address-地址
blockquote-塊引用
center-居中對齊塊
dir-目錄列表
filedset-form控制組html

inline內聯元素的特色
1.和其餘元素都在一行上
2.高，行高以及外邊距和內邊距不可改變
3.寬度就是它的文字或圖片的寬度，不可改變
4.內聯元素只能容納文本或者其餘內聯元素瀏覽器

spa是行元素佈局

CSS的盒子模型
盒子模型是CSS的基石之一i，它指定元素如何顯示以及（在某種程度上）如何相互交互
頁面上的每一個元素都被瀏覽器當作是一個矩形的盒子，這個盒子由元素的內容、填充、邊框和邊界組成。
網頁就是由許多個盒子經過不一樣的排列方式（上下排列、並列排列、嵌套排列）堆積而成。網站

網頁佈局主要是div+css佈局
網頁是由多個小盒子組成，其中設置盒子的大小，位置，邊框，填充，間距。spa

每一個HTML元素均可以看做是一個裝了東西的盒子
盒子裏面的內容到盒子的邊框之間的距離即填充（padding）,盒子自己有邊框(border)
而盒子邊框外和其它盒子之間還有邊界(magin)
默認狀況下盒子的邊框是無，背景色是透明，因此咱們在默認狀況下看不到盒子。orm

賦值能夠單獨設置一個元素也能夠組合起來編寫。上右下左能夠分開寫也能夠總體寫。
margin 上右下左
border
padding 上右下左
contenthtm

元素盒子大小的計算
一個元素實際寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界
例 #a1{width:200px;height:200px;background-color:green;padding:20px;border:10px red solid;margin:20px;}圖片

CSS盒子嵌套
若是盒子裏面嵌套有盒子，且兩個盒子都有邊框，那麼兩個盒子邊框之間的距離等於外面盒子的填充值+裏面盒子的邊界值
盒子模型的margin和padding屬性比較簡單，只能設置寬度值，最多分別對上、右、下、左設置寬度值，而border則能夠設置寬度、顏色
和樣式。
分別是border-width(寬度)、border-color(顏色)和border-style(樣式)其中border-style屬性能夠將邊框設置爲實線（solid）、虛線（dashed）、
點劃線（dotted）、雙線（double）等效果element

盒子模型的特性
邊界值margin可爲負，填充padding不可爲負
邊框border默認值爲0，即不顯示
行內元素，如a,定義上下邊界不影響行高
邊框是實的，咱們能夠看到實實在在的邊框，而填充和邊界是虛的，咱們只能看到他們對元素的影響
盒子模型中只能設置兩類顏色，即邊框顏色和背景顏色
盒子模型能夠設置三類距離，即邊界距離margin,填充距離padding和邊框值border

若是網站有空白說明填充和間距不爲0 須要手工去除：body{margin:0px;padding:0px;}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #a1
        { width: 200px;
         height: 200px;
         background-color: green;
         border: 10px black solid;
           padding-top: 80px;
            margin: 20px;
           text-align: center;
        }
        #a2
        {
            width: 200px;
            height: 200px;
            background-color:red;
            border: 10px green dashed;
        }
        #a3
        {
            width: 300px;
            height: 300px;
            background-color: gray;
            padding: 30px;
            border: 10px black solid;
        }
        #a4
        {
            width: 200px;
            height: 200px;
            background-color:brown;
            border: 5px red solid;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="a1">盒子1</div>
<div id="a2">盒子2</div>
<div id="a3">
    <div id="a4">盒子3</div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

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