web前端学习笔记4

ops/2024/9/23 7:00:27/

4. 盒子模型

4.0 代码地址
  • https://gitee.com/qiangge95243611/java118/tree/master/web/day04

4.1 什么是盒子模型(Box Model)

  • 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距,边框,内填充和实际内容。

  • 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  • 下面的图片说明了盒子模型(Box Model):

  • 盒子模型各部分的说明:

    • Margin(外边距) - 边框以外的区域,外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 内容与边框之间的区域,内边距是透明的。
    • Content(内容) - 盒子的内容,显示文本和图像。
  • 元素的宽度和高度

    • 当您设置一个元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。

    • 要知道元素占据页面范围完整大小,还应该包括 内边距、边框、外边距

  • 下面的例子中的元素的总宽度为 450px:

    div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
    }
    

    div占据页面的总宽度 = 内容宽度 + 2*内边距 + 2*外边距 + 2*边框宽度,所以计算结果如下:

    300px (宽)
    + 50px (左 + 右填充)
    + 50px (左 + 右边框)
    + 50px (左 + 右边距)
    = 450px

  • 如果页面的宽度只有250px,那么如何设置div的样式呢?

    div {width: 220px;padding: 10px;border: 5px solid gray;margin: 0px; 
    }
    

    220px (宽)
    + 20px (左 + 右填充)
    + 10px (左 + 右边框)
    + 0px (左 + 右边距)
    = 250px

4.2 边框

​ 边框一般包括3个方面:border-color边框颜色, border-width边框宽度, border-style边框样式。

4.2.1 边框颜色
  • broder-color 样式的设置如下表所示:

  • 可以使用top、right、bottom、left等属性可以设置指定方向的颜色值,如:border-top-color:#369;

    div{border-top-color:#369;border-right-color:#409eff;border-bottom-color:#f00;border-left-color:#000;
    }
    
  • 如果使用border-color设置边框颜色,不同的数量值,表示不同的含义:

    div{border-color:#000; 						/*四个边框都相同值是#000*/border-color:red blue;					/*前面是上下red,后面是左右blue*/border-color:red green blue;			/*上red,左右green,下blue*/border-color:red green blue yellow;		/*上red,右green,下blue,左yellow*/
    }
    
4.2.2 边框粗细
  • border-width 设置元素边框粗细。

  • 为边框指定宽度有两种方法:

    • 可以指定数字值,比如 2px 或 0.1em(单位为px, pt, cm, em 等)
    • 使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin
  • 可以使用top、right、bottom、left等属性可以设置指定方向的边框宽度,如:border-top-width: 5px;

    div{border-top-width:1px;border-right-width:2px;border-bottom-width:3px;border-left-width:4px;
    }
    
  • 如果使用border-width设置边框的宽度,不同的数量值,表示不同的含义:

    div{border-width:1px; 				/*四个边框都是相同的值都是1px*/border-width:1px 2px;			/*前面一个是上下1px,后面的是左右2px*/border-width:1px 2px 3px;		/*前面一个是上1px,中间是左右2px,后面一个是下3px*/border-width:1px 2px 3px 4px;	/*顺序是上1px,右2px,下3px,左4px*/
    }
    
4.2.3 边框样式
  • border-style 设置元素边框样式,其常用的值如下所示:

    • none:不显示边框
    • hidden:和关键字 none 类似,不显示边框
    • dotted:显示为一系列圆点
    • dashed:显示为一系列短的方形虚线
    • solid:显示为一条实线
    • double :显示为一条双实线
  • border-style 默认值是 none,这意味着如果你只修改 border-width 和 border-color 是不会出现边框的。

  • 可以使用top、right、bottom、left等属性可以设置指定方向的边框样式,如:border-top-style: solid;

    div{border-top-style:none;			/*没有边框*/border-right-style:solid;		/*实线*/border-bottom-style:dotted;		/*点虚线*/border-left-style:dashed;		/*横虚线*/
    }
    
  • 如果使用border-style设置边框样式,不同的数量值,表示不同的含义:

    div{border-style:none; 						/*四个边框都相同值是none*/border-style:none solid;				/*前面是上下none,后面是左右solid*/border-style:none solid dotted;			/*上none,左右solid,下dotted*/border-style:none solid dotted dashed;	/*上none,右solid,下dotted,左dashed*/
    }
    
  • 代码

    <table><tr><td class="b1">none</td><td class="b2">hidden</td><td class="b3">dotted</td><td class="b4">dashed</td></tr><tr><td class="b5">solid</td><td class="b6">double</td><td class="b7">groove</td><td class="b8">ridge</td></tr><tr><td class="b9">inset</td><td class="b10">outset</td></tr>
    </table>
    
  • css样式表

    /* 定义表格外观 */
    table {border-width: 3px;background-color: #52e396;
    }
    tr,
    td {padding: 2px;
    }/* border-style 示例 */
    .b1 {border-style: none;
    }
    .b2 {border-style: hidden;
    }
    .b3 {border-style: dotted;
    }
    .b4 {border-style: dashed;
    }
    .b5 {border-style: solid;
    }
    .b6 {border-style: double;
    }
    .b7 {border-style: groove;
    }
    .b8 {border-style: ridge;
    }
    .b9 {border-style: inset;
    }
    .b10 {border-style: outset;
    }
    
  • 效果图

4.2.4 border简写
  • border可以同时设置边框的颜色、粗细和样式,没有顺序要求。

    div{border: 1px solid #3a6587;		/*宽度1px, 样式solid, 颜色#3a6587*/border: 2px red dashed;			/*宽度2px, 样式dashed, 颜色red*/
    }
    
  • 代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"/><title>边框样式</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>.box {width: 300px;border: 1px solid #3a6587;margin: 0 auto;}h2 {font-size: 16px;background-color: #3a6587;height: 35px;line-height: 35px;color: #fff;}form {background: #c8ece3;}.username {border: 3px solid black;}.email {border: 2px dotted red;}.tel {border: 1px dashed red;}</style></head><body><div class="box"><h2>会员登录</h2><form action="#" method="post"><div><strong class="name">姓名:</strong><input type="text" name="username" class="username" /></div><div><strong class="name">邮箱:</strong><input type="text" name="email" class="email" /></div><div><strong class="name">电话:</strong><input type="text" name="tel" class="tel" /></div><div><input type="submit" value="登录" /><input type="reset" value="重置" /></div></form></div></body>
    </html>
  • 效果图

4.3 margin外边距

  • margin 属性为给定元素设置所有四个(上右下左)方向的外边距属性。也就是 margin-top、margin-right、margin-bottom 和 margin-left 四个外边距属性设置的简写。

  • 示例

    div{margin-top: 1pxmargin-right : 2pxmargin-bottom : 2pxmargin-left : 1pxmargin :3px 5px 7px 4px; /*上右下左*/margin :3px 5px; /*上下, 左右*/margin :3px 5px 7px; /*上, 左右,下*/margin :8px; /*四个方向相同*/
    }
    
  • 代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv

http://www.ppmy.cn/ops/22916.html

相关文章

使用mmdetection来训练自己的数据集(visdrone)(一)

环境&#xff1a; 创建虚拟环境 conda create -n mmdet python3.8 -y安装torch https://pytorch.org/get-started/previous-versions/ pip install torch2.1.0 torchvision0.16.0 torchaudio2.1.0 --index-url https://download.pytorch.org/whl/cu121torch …

OpenHarmony语言基础类库【@ohos.util.HashMap (非线性容器HashMap)】

HashMap底层使用数组链表红黑树的方式实现&#xff0c;查询、插入和删除的效率都很高。HashMap存储内容基于key-value的键值对映射&#xff0c;不能有重复的key&#xff0c;且一个key只能对应一个value。 HashMap和[TreeMap]相比&#xff0c;HashMap依据键的hashCode存取数据&…

Midjourney与waifu2x双剑合璧:完美打造超高清动漫图像

在追求完美的动漫图像时&#xff0c;质量和分辨率是两个关键因素。Midjourney&#xff08;一个神秘而强大的AI图像生成工具&#xff09;与waifu2x&#xff08;一个专门用于放大动漫风格图像的AI工具&#xff09;的结合使得创造超高清的动漫图像变得触手可及。本文将引导您如何使…

2024.4.28力扣每日一题——负二进制转换

2024.4.28 题目来源我的题解方法一 进制转换方法二 模拟进位 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1017 我的题解 方法一 进制转换 对于以-2为基数的系统&#xff0c;可以这样理解&#xff1a;在-2进制中&#xff0c;每一位的权重是-2的幂。这与传统的二进制表…

Web前端开发之CSS_1

CSS选择器字体属性背景属性文本属性表格属性 1. CSS 1.1 CSS简介 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;又叫级联样式表&#xff0c;简称样式表。CSS文件后缀名为 .css 。CSS用于HTML文档中元素样式的定义。使用CSS可以让网页具有美观一致…

linux运行jar

安装Java环境 下载Java安装包 首先&#xff0c;需要从Oracle官网或其他可信渠道下载适用于Linux系统的Java安装包。根据系统架构&#xff08;32位或64位&#xff09;选择合适的安装包。 安装Java 下载完成后&#xff0c;通过终端进入安装包所在目录&#xff0c;使用tar命令…

第三部分 Vue讲解(22-25)(代码版)

22.自定义指令 22.1 自定义指令基本语法 22.1.2 自定义指令.vue <template><div id"app"><!-- v-model相当于:value"XXX" input"msgXXX"--><input v-model"msg" type"text"><input :value…

Mac环境安装任意版本的node

背景 由于在使用node的时候需要频繁的切换node的版本。在windows上可以通过安装不同版本的软件进行实现&#xff0c;在mac上可以更加方便快捷的实现这个过程哦&#xff01; 全局安装n npm install -g n选择不同的版本 # 安装最新稳定版 node n stable # 安装最新版本 node …