CSS盒子模型 （盒子模型 上）

时间：2024-04-21 12:38:23

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！????）

目录

一、盒子模型

1.1  看透网页布局本质

1.2  盒子模型(Box Model)组成

1.3  边框(border) 

课堂小练习

目标:

  • 能够准确阐述盒子模型的4个组成部分
  • 能够利用边框复合写法给元素添加边框
  • 能够计算盒子的实际大小
  • 能够利用盒子模型布局模板案例
  • 能够给盒子设置圆角边框
  • 能够给盒子添加阴影
  • 能够给文字添加阴影

目录： 

  1. 盒子模型
  2. PS基本操作
  3. 综合案例
  4. 圆角边框
  5. 盒子阴影
  6. 文字阴影

一、盒子模型

页面布局要学习三大核心:盒子模型，浮动和定位，学好盒子模型能非常好的帮助我们布局页面。 

1.1  看透网页布局本质

  1. 先准备好相关的网页元素，网元素基本都是盒子Box。 
  2. 利用CSS设置好盒子样式，然后摆放到相应位置。 
  3. 往盒子里面放内容。

 网页布局的核心本质:就是利用CSS摆盒子。

1.2  盒子模型(Box Model)组成

 所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。（<p> ,<div> ......）

CSS盒子模型本质上是一个盒子，封装周围的HIML元素，它包括边框、外距、内边距和实际内容。 

1.3  边框(border) 

border 可以设置元素的边框，边框有三部分组成: 边框宽度(粗细)，边框样式，边框颜色。

语法：

 border:border-width ||  border-style  ||  border-color 

属性 作用
border-width 定义边框粗细
border-style 边框样式
border-color 边框颜色

style：none  |  hidden  |  dotted  |  dashed  |  solid  |  double  |  groove  |  ridge  |  inset  |  outset。

none:无边框。

hidden:隐藏边框、IE不支持。

dotted:在MAC平上IE4+与Windows和UNIX平台上IE5.5+为点线，否则为实线。(☆) 

dashed:在MAC平上IE4+与Windows和UNIX平台上IE5.5+为虚线，否则为实线。(☆) 

 solid:实线边框。(☆) 

double:双线边框。两条单线与其间隔的和等于指定的border-width值。

groove:根据broder-color的值画3D凹槽。

ridge:根据broder-color的值画菱形边框。

 inset:根据broder-color的值画3D凹边。

outset:根据broder-color的值画3D凸边。

代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之盒子模型边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* 1.border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* 2.border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            /* border-style: solid; */
            /* border-style: dashed; */
            border-style: dotted;
            /* 3.border-color 边框的颜色  */
            border-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 边框简写:

border:1px solid red;   /*没有顺序*/ 

边框分开写法：

border-top ： 1px solid red;  /*只设定上边框   其余同理 */

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之边框的复合写法</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
                border-style: solid;
                border-color: pink; */
            /* 边框的复合写法 简写:  */
            border: 5px solid pink;
            /* 上边框 */
            border-top: 5px solid skyblue;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

课堂小练习

要求：请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色。

方法一：

分别定义上边框，下边框，左边框，右边框的颜色。

方法二：

先定义全边框的颜色，然后利用层叠性定义上边框的颜色。

代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型边框小案例</title>
    <style>
        /* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
           /* 方法一 */
            /* border-top: 1px solid red;
                border-bottom: 1px solid blue;
                border-left: 1px solid blue;
                border-right: 1px solid blue; */
           /* 方法二 */
            /* border包含四条边 */
            border: 1px solid blue;
            /* 层叠性 只是层叠了 上边框 */
            border-top: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（今日分享暂时到此为止啦！为不断努力的自己鼓鼓掌吧。今日文案分享：常常阻碍我们的，是为畏难心。） 

相关文章