當前位置: 摩鑫平台 >> 知識庫 >> 軟件閑敘 >> 正文
【CSS3詳解】四、盒子模型
發布時間:2024-04-26       編輯🧑‍🦼‍➡️:網絡中心       瀏覽次數📙:

四、盒子模型

4-1、概念

在這裏插入圖片描述

  • margin:外邊距

  • padding:內邊距

  • border🙍‍♂️:邊框

4-2、邊框

  1. 邊框的粗細

  2. 邊框的樣式

  3. 邊框的顏色

/*border:粗細,樣式,顏色*/#box{
   width:300px;
   border: 1px solid red;}

4-3、內外邊距

<!--外邊距的妙用:居中元素-->
<style>
#box{
   width:300px;
   border: 1px solid red;
   margin: 0 auto;}h2{
   font-size: 16px;
   background-color: aquamarine;
   line-height: 30px;
   /* margin四個參數時🕕𓀐,為 上右下左 */
   margin: 0 1px 2px 3px;}form{
   background: aquamarine;}input{
   border: 1px solid black;}</style>

盒子的計算方式👷🏼:margin + border + padding + 內容寬度

4-4🧎🏻‍♂️🙋、圓角邊框

<!--
左上 右上 右下 左下, 順時針方向
-->
<!--
圓圈🧑🏽‍🍼:圓角 = 半徑
-->
<style>
div{
   width: 100px;
   height: 100px;
   border: 10px solid red;
   border-radius: 20px;}</style>

4-5🧖‍♀️、陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- margin: 0 auto;居中     要求🕴🏼:塊元素,塊元素有固定的高度
     -->
    <style>
        img{
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 10px 10px 100px blue;
        }
    </style>
</head>
<body>
    <div style="width: 500px; display: block; text-align: center">
        <img src="images/1.png" alt="">
    </div>
</body>
</html>

https://blog.csdn.net/clover_page/article/details/130100672

作者🤠👰🏽‍♂️:姜伯約

關閉本頁

摩鑫平台教育技術與網絡中心版權所有

©GDAFC Education Technology & Network Center, All Rights Reserved.

摩鑫平台专业提供:摩鑫平台🙇🏿‍♀️、摩鑫摩鑫娱乐等服务,提供最新官网平台、地址、注册、登陆、登录、入口、全站、网站、网页、网址、娱乐、手机版、app、下载、欧洲杯、欧冠、nba、世界杯、英超等,界面美观优质完美,安全稳定,服务一流,摩鑫平台欢迎您。 摩鑫平台官網xml地圖