2. 程式人生 > 其它 >P23-前端基礎-CSS盒子模型

P23-前端基礎-CSS盒子模型

阿新 • • 發佈：2021-02-06

技術標籤：最美前端# 前端【H5+Css3】

P23-前端基礎-CSS盒子模型

1.概述

盒模型、盒子模型、框模型（box model）

  • CSS將頁面中的所有元素都設定為了一個矩形的盒子
  • 將元素設定為矩形的盒子後，對頁面的佈局就變成將不同的盒子擺放到不同的位置
    每一個盒子都由一下幾個部分組成：
  • 內容區（content）
  • 內邊距（padding）
  • 邊框（border）
  • 外邊距（margin）

2.盒子模型介紹

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <
 
title>盒子的模型</title>
   <!-- 
        盒模型、盒子模型、框模型（box model）
            - CSS將頁面中的所有元素都設定為了一個矩形的盒子
            - 將元素設定為矩形的盒子後，對頁面的佈局就變成將不同的盒子擺放到不同的位置
            - 每一個盒子都由一下幾個部分組成：
                內容區（content）
                內邊距（padding）
                邊框（border）
                外邊距（margin）
     -->
 


  <style>
    /* 
                內容區（content），元素中的所有的子元素和文字內容都在內容區中排列  
                    內容區的大小由width 和 height兩個屬性來設定
                        width 設定內容區的寬度
                        height 設定內容區的高度          
        */

    .box1 {
      background-color: sandybrown;
      width: 100px;
      height
 
: 100px;

      /* 
                邊框（border），邊框屬於盒子邊緣，邊框裡邊屬於盒子內部，出了邊框都是盒子的外部
                    邊框的大小會影響到整個盒子的大小
                要設定邊框，需要至少設定三個樣式：
                    邊框的寬度 border-width
                    邊框的顏色 border-color
                    邊框的樣式 border-style
        */
      border-width: 10px;
      border-color: springgreen;
      border-style: solid;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
</body>

</html>

3.效果預覽

在這裡插入圖片描述

相關推薦

P23-前端基礎-CSS盒子模型

技術標籤：最美前端# 前端【H5+Css3】 P23-前端基礎-CSS盒子模型 1.概述 盒模型、盒子模型、框模型（box model）

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

本教程案例線上演示 有路網PC端 有路網移動端 教程配套原始碼資源 教程配套原始碼資源

3.前端CSS—盒子模型和浮動

目錄一、CSS盒子模型1.1 content(內容區域)1.2 padding(內填充)1.3 border(邊框)1.4 margin(外邊距)二、塊級元素、行內元素和行內塊級元素的轉換關係2.1 display:inline 轉化為行內元素2.2 display:block 轉化為塊級

前端-自學第五天--CSS的三大特性和CSS盒子模型

一，CSS的三大特性分別是層疊性 繼承性 優先順序1 層疊性相同選擇器給設定相同的樣式，此時一個樣式就好覆蓋（層疊）另一個衝突樣式。層疊性注意解決樣式衝突的問題。。層疊性原則：①樣式衝突，遵循的原則就是就近

CSS盒子模型基礎屬性

一、基礎屬性 盒子模型：將HTML頁面中的元素看作是一個矩形盒子，也就是一個盛裝內容的容器。每個元素都由元素的內容（content）、內邊距(Padding)、外邊距(Margin)和邊框(Border)組成

CSS盒子模型

盒子是網頁佈局的關鍵點，首先利用CSS設定好盒子的大小，然後擺放盒子的位置。最後把網頁元素比如文字圖片等等，放入盒子裡面。

css盒子模型_css全域性設定border-box

box-sizing 屬性 1.content-box 是預設值。如果你設定一個元素的寬為100px，那麼這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。

前端基礎 | CSS

1. 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生.

CSS盒子模型與浮動

技術標籤：筆記css CSS盒子模型與浮動 CSS盒子模型說明內邊距（padding）外邊距（margin）邊框（border）練習小三角製作聖誕樹製作

CSS盒子模型 邊框的應用

技術標籤：JavaCSScss邊框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

2020年12月-第01階段-前端基礎-CSS初識

CSS層疊樣式表 理解 css的目的作用 css的三種引入方式 1.HTML的侷限性 說起HTML，這其實是個非常單純的傢伙， 他只關注內容的語義，

2020年12月-第01階段-前端基礎-CSS字型樣式

CSS字型樣式屬性除錯工具 應用 使用css字型樣式完成對字型的設定 使用css外觀屬性給頁面元素新增樣式

2020年12月-第01階段-前端基礎-CSS Day02

CSS Day02 複合選擇器 後代選擇器 並集選擇器 1. CSS複合選擇器 理解 理解css複合選擇器分別的應用場景

2020年12月-第01階段-前端基礎-CSS Day03

CSS Day03 盒子模型（CSS重點） css學習三大重點： css 盒子模型、浮動、定位 主題思路：

P9-前端基礎-CSS簡介

技術標籤：最美前端# 前端【H5+Css3】 P9-前端基礎-CSS簡介 1.概述 網頁分成三個部分：

P63-前端基礎CSS-電影卡片練習圖文佈局

技術標籤：最美前端# 前端【H5+Css3】 P63-前端基礎CSS-電影卡片練習圖文佈局 1.概述

P62-前端基礎CSS-背景圖片位移之雪碧圖效果

技術標籤：最美前端# 前端【H5+Css3】 P62-前端基礎CSS-背景圖片位移之雪碧圖效果

P53-前端基礎CSS-行高設定

技術標籤：最美前端# 前端【H5+Css3】 P53-前端基礎CSS-行高設定 1.概述 行高（line height）

P21-前端基礎-CSS顏色四種表示方式

技術標籤：最美前端# 前端【H5+Css3】 P21-前端基礎-CSS顏色四種表示方式 1.概述 顏色單位： 在CSS中可以直接使用顏色名來設定各種顏色 比如：red、orange、yellow、blue、green … … 但是在css中直接使用顏色

P18-前端基礎-CSS樣式的繼承

技術標籤：最美前端# 前端【H5+Css3】 P18-前端基礎-CSS樣式的繼承 1.概述 樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上 繼承是發生在祖先後後代之間的 繼承的設計是為了方便我們的開發，