web前端学习笔记4

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" />
        <meta
          name="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: 1px
        margin-right : 2px
        margin-bottom : 2px
        margin-left : 1px
        margin :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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/583566.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在Docker中部署Java应用:Java版本隔离的实践案例

在Docker中部署Java应用&#xff1a;Java版本隔离的实践案例 人生就是一场又一场的相遇&#xff0c;一个明媚&#xff0c;一个忧伤&#xff0c;一个华丽&#xff0c;一个冒险&#xff0c;一个倔强&#xff0c;一个柔软&#xff0c;最后那个正在成长。 背景需求 在软件开发和部…

Debian 12 -bash: netstat: command not found 解决办法

问题表现&#xff1a; debian 12系统中&#xff0c;不能使用 netstat命令 处理办法&#xff1a; netstat 命令就的net-tools中&#xff0c;把net-tools工具安装上就好了。 apt-get install netstat 安装之后就可以使用netstat 命令了&#xff0c;如查询端口情况&#xff1a; …

基于SpringBoot+Vue高校宣讲会管理系统设计与实现

项目介绍&#xff1a; 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装高校宣讲会管理系统软件来发挥其高效地信息…

C# Web控件与数据感应之 Control 类

目录 关于数据感应 Control 类 范例运行环境 simpleDataListEx方法 设计 实现 调用示例 数据源 调用 小结 关于数据感应 数据感应也即数据捆绑&#xff0c;是一种动态的&#xff0c;Web控件与数据源之间的交互&#xff0c;诸如 ListControl 类类型控件&#xff0c;在…

pytest教程-35-钩子函数-pytest_unconfigure

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_configure钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_unconfigure钩子函数的使用方法。 pytest_unconfigure(config) 是一个 pytest 钩子函数&#xff0c;它在 pytest 退…

【linux运维】vim基础应用

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了学习基本的shell编程和linux命令&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于b站大学——linux运维课程进行的&#xff0c;…

【MHA】MySQL高可用MHA源码1-主库故障监控

1 阅读之前的准备工作 1 一个IDE工具 &#xff0c;博主自己尝试了vscode安装perl的插件&#xff0c;但是函数 、变量 、模块等都不能跳转&#xff0c;阅读起来不是很方便。后来尝试使用了pycharm安装perl插件&#xff0c;阅读支持跳转&#xff0c;自己也能写一些简单的测试样例…

[iOS]组件化开发

一、组件化开发基础 1.组件定义 在软件开发中&#xff0c;一个组件是指一个独立的、可替换的软件单元&#xff0c;它封装了一组相关的功能。组件通过定义的接口与外界交互&#xff0c;并且这些接口隔离了组件内部的实现细节。在Swift语言中&#xff0c;组件可以是一个模块、一…

CCF-CSP真题题解:201312-2 ISBN号码

201312-2 ISBN号码 #include <iostream> #include <cstring> #include <algorithm> using namespace std;string s;int main() {cin >> s;int num 0;for (int i 0, p 1; i < s.size() - 1; i)if (s[i] ! -) {num (s[i] - 0) * p;p;}num % 11;ch…

win11 自带分区磁盘管理,右键U盘 删除卷,显示不支持该请求

win11 自带分区磁盘管理&#xff0c;右键U盘 删除卷&#xff0c;显示不支持该请求&#xff0c;打开cmd 输入下面命令 1.diskpart 2.list disk 3.sel disk (U盘盘符编号) 4.clean

Linux vi\vim编辑器

vi/vim编辑器 一、vi\vim 编辑器的三种工作模式1.命令模式&#xff08;Command mode&#xff09;2.输入模式&#xff08;Insert mode&#xff09;3.底线命令模式&#xff08;Last line mode&#xff09; 二、参考 vi\vim 是 visual interface 的简称&#xff0c;是 Linux 中最经…

Tcp 协议的接口测试

首先明确 Tcp 的概念&#xff0c;针对 Tcp 协议进行接口测试&#xff0c;是指基于 Tcp 协议的上层协议比如 Http &#xff0c;串口&#xff0c;网口&#xff0c; Socket 等。这些协议与 Http 测试方法类似&#xff08;具体查看接口自动化测试章节&#xff09;&#xff0c;但在测…

大数据计算引擎中的Calcite

1.Calcite介绍 Calcite是一个动态数据库管理框架&#xff0c;具备数据库管理系统的功能 Calcite具备SQL解析、校验、优化、生成、连接查询等功能 Calcite能够为不同平台和数据源提供统一的查询引擎 2.Calcite能力 比如&#xff0c;对于HBase而言&#xff0c;没有SQL查询的能力…

Qt 6 开源版(免费) -- 安装图解

Qt6起&#xff0c;两项重大改变&#xff08;并非指技术&#xff09;&#xff1a; 必须在线安装&#xff0c;不再提供单独的安装包主推收费的商业版 当然的&#xff0c;为了引流、培养市场&#xff0c;提供了一个免费的开源版本。 开源版相对于收费的商业版&#xff0c;主体是…

PostgreSQL 14 向量相似度搜索插件 (pgvector) 安装指南

本文是关于在 PostgreSQL 14 中安装并使用向量相似度搜索插件(pgvector)的详细指南。此插件允许用户在数据库中执行高效的向量运算,特别适用于机器学习模型的向量数据存储与检索场景。 环境需求 已安装PostgreSQL 14或更高版本。安装了Visual Studio 2022,用于编译插件。安装…

微信小程序+esp8266温湿度读取

本文主要使用微信小程序显示ESP8266读取的温湿度并通过微信小程序控制LED灯。小程序界面如下图所示 原理讲解 esp8266 通过mqtt发布消息,微信小程序通过mqtt 订阅消息,小程序订阅后,就可以实时收到esp8266 传输来的消息。 个人可免费注册五个微信小程序账号,在微信小程序官…

渗透之sql注入---实战1

本期的sql注入实战在&#xff1a;BUUCTF在线评测 (buuoj.cn) 该网站上进行。 启动靶机&#xff1a; 1.进来后搜索web1 2.点击【SWPU2019】Web1启动靶机。 3.进来之后在此界面进行注入。 开始注入&#xff1a; 1.找注入点&#xff1a; 我们输入1 后查看广告详情发现报错&a…

利用kimi等大模型进行运维参数解析和调优

在运维时&#xff0c;经常遇到很多参数&#xff0c;有些参数不知道意义&#xff0c;知道意义的也有些不知道合理参考值是多少。利用kimi等大模型来当老司机&#xff0c;轻松解决运维难题。 例如在运维hive参数时&#xff0c;有些不知道作用&#xff0c;提示次如下 你的角色是…

vue根据输入n动态生成n个表单

我的构想&#xff1a;在输入框中输入一个数字n&#xff0c;然后点击一个按钮&#xff0c;弹出一个弹窗&#xff0c;里面有n个表单。 这是按钮的vue代码&#xff1a;数值保存在form.number里面&#xff0c;每次数字改变会触发numberChange //...略 <el-form-item prop"…

POCEXP编写—多线程

POC&EXP编写—多线程 1. 前言2. 多进程&多线程2.1. 多进程2.1.1. 案例 2.2. 多线程2.2.1. 案例&#xff1a; 2.3. POC的案例&#xff08;模板&#xff09; 3. UA头设置3.1. 随机UA头3.1.1. 案例3.1.2. 模板拼接 4. 代理Proxy4.1. 单代理案例4.2. 多代理案例4.2.1. 请求…