盒子模型的内容总结

知识引入

1.认识盒子模型

在浏览网站时我们会发现内容都是按照区域划分的。这使得网页很工整、美观。在页面中,每一块区域分别承载不同的内容,使得网页的内容虽然零散,但是在版式排列上依然清晰有条理。如图1

图1

*承载内容的区域称为盒子模型。盒子模型就是把HTML页面中的元素看作是一个方形的盒子,也就是一个盛装内容的容器。每个方形都由元素的内容、内边距(padding)、边框(border)、外边距(margin)组成。

注意:虽然每个元素都有内边距、外边距、边框、宽高这些基本属性,但是并不要求一定要全部设置这些属性。

2.div标签

(1)div的全英文是division,中文意思是“分割、区域”。<div>标签就是一个块标签,可以实现网页的规划和布局。在HTML文档中,页面会被划分为很多区域。不同区域显示不同的内容,例如导航栏、内容区等,这些区块一般都由<div>标签进行分隔。

(2)可以在<div>标签中设置外边距、内边距、宽和高,同时内部可以容纳段落、标题、表格、图像等各种网页内容,也就是说绝大多数HTML元素都可以被嵌套在<div>标签中,<div>标签还可以嵌套很多个<div>标签。

(3)<div>标签非常强大,通过与id、class属性结合设置CSS样式,可以替代大多数块级的文本标签。下面通过一个案例来演示一下<div>标签的使用方法。

先写代码,如图2

图2

保存并运行如图3

图3

*注意:(1)<div>标签最大的意义在于与浮动属性float属性结合,实现网页的布局,即常说的DIV+CSS网页布局。

(2)<div>可以替代块级元素<p>、<h>等,但它们在语义上有很大的区别是。例如<div>只是一个通用的块级标签,主要用于布局,而<h>具有特殊的含义,语义较重,代表着标题。

3.边框属性(border)

(1)为了分割页面中不同的盒子,常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框的属性、边框的综合属性,如表4-1.

表4-1 CSS边框属性

设置内容

样式属性

常用属性值

上边框

border-top-style:样式;

border-top-color:颜色样式;

border-top-width:宽度样式;

border-top:宽度样式颜色;

下边框

border-bottom-style:样式;

border-bottom-color:颜色样式;

border-bottom-width:宽度样式;

border-bottom:宽度样式颜色;

左边框

border-left-style:样式;

border-left-color:颜色样式;

border-left-width:宽度样式;

border-left:宽度样式颜色;;

右边框

border-right-style:样式;

border- right -color:颜色样式;

border- right -width:宽度样式;

border- right:宽度样式颜色;

样式综合设置

border-style:上边 [右边 下边  左边];

none(默认)、solid、dashed、dotted、double

宽度综合设置

border-width:上边 [右边 下边  左边];

像素值

颜色综合设置

border-color:上边 [右边 下边  左边];

颜色英文单词、#十六进制颜色值、rgb(r,g,b)、rgb(r%,g%,b%)

边框综合属性

border:四边宽度,四边颜色,四边样式;

.下面对表中一些样式进行分析。

(2)边框样式

用于定义页面中边框的风格,在CSS属性中,border-style属性用于设置边框样式,其常用属性值如下。

none:没有边框,即忽略所有的边框宽度(默认值)。

solid:边框为单实线。

dashed:边框为虚线。

dotted:边框为点线。

double:边框为双实线。

例如:想要边框为双实线,可以写以下代码。

border-style:double;

在设置边框样式时,可以对盒子的单边进行设置,具体格式如下:

border-top-style:上边框样式;

border-right-style:右边框样式;

border-left-style:左边框样式;

border-bottom-style:下边框样式;

当然也可以综合设置四条边的样式,具体格式如下。

border -style:上边框样式 右边框样式  下边框样式 左边框样式;

border-style:上边框样式  左右边框样式 下边框样式;

border-style:上下边框样式   左右边框样式;

border-style:上下左右边框样式;

*注意:观察上面的代码我们可以发现综合样式属性可以设置1~4个属性值,设置后边框样式会按照上、右、下、左的顺序依次排列。当省略某个属性值时,边框样式会按照上、左右、下的顺序依次排列。当省略掉两个属性值时,边框样式会按照上下、左右的顺序依次排列。当只设置一个属性值时,边框样式会按照上下左右的顺序依次排列。

下面我们通过一个案例来演示一下border边框样式的属性方法。

先写代码,如图4

图4

保存并运行如图5

图5

(3)边框宽度

border-width属性用于设置边框的宽度,其常用取值单位为像素(px)。与边框样式一样,边框宽度也可以对四条边进行设置或者综合设置四条边的宽度,具体代码如下。

border-top-width:上边框宽度;

border-right-width:右边框宽度;

border-bottom-width:下边框宽度;

border-left-width:左边框宽度;

border-width:上边框宽度 [右边框宽度  下边框宽度 左边框宽度];

综合设置四边宽度必须按照上右下左的顺序采用值复制,即一个值为四边,两个值为上下和左右,三个值为上、左右、下,四个值为上、右、下、左。

*下面通过一个案例演示border-width的使用方法。

先写代码,如图6

图6

保存并运行如图7

图7

(4)边框颜色

border-color属性用于设置边框的颜色,其常用取值为颜色的单词、#十六进制颜色值、RGB模式、rgb(r%,g%,b%)。与边框宽度、边框样式一样,边框颜色也可以对四条边进行设置或者综合设置四条边的颜色,具体代码如下。

border-top-color:上边框颜色;

border-right- color:右边框颜色;

border-bottom- color:下边框颜色;

border-left- color:左边框颜色;

border-width:上边框颜色 [右边框颜色  下边框颜色 左边框颜色];

综合设置四边颜色必须按照上右下左的顺序采用值复制,即一个值为四边,两个值为上下和左右,三个值为上、左右、下,四个值为上、右、下、左。

*下面通过一个案例演示border-color的使用方法。

先写代码,如图8

图8

保存并运行如图9

图9

*注意:设置边框颜色的时候必须设置边框样式,如果未设置边框样式或者设置为none,会导致边框的其它属性无效。使用RGB模式时,如果括号里面的数值为百分比,必须把0也加上百分号,即0%。

(4)综合设置边框

使用border-style、border-width、border-color虽然可以实现丰富的边框效果。但是代码太过繁琐,不方便阅读,因此我们可以将它进行综合设置,简化代码,方便阅读。

具体设置方法为:

border-top:上边框宽度样式颜色;

border-right:右边框宽度样式颜色;

border-bottom:下边框宽度样式颜色;

border-left:左边框宽度样式颜色;

border:四边宽度样式颜色;

***注意:1.如果单独定义某一侧的边框属性时,代码如下:

p{border-top:2px solid red;}

2.如果想分别定义上边框的属性,代码如下:

p{ border-top-style:solid;

  border-top-width:2px;

  border-top-color:red;

}

3.当四条边的边框样式都相同时,代码如下:

p{border:3px solid red;}

4.像border、border-top等这样能够用一个属性定义元素的多种样式,在CSS中称为复合属性。常用的复合属性有:font、border、margin、padding、background等。实际工作中常使用复合属性可以让代码简化,方便阅读,提高代码运行的速度,但是如果只设置一个样式值,最好不要使用复合属性,以免不兼容。

下面写一个案例演示一下综合设置的方法。

先写代码,如图10

图10

保存并运行如图11

图11

4.以上就是盒子模型的内容了,下期我们讲用盒子模型内容实现的案例。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

镀锌板行业分析:我国市场消费量约为527万吨

镀锌板是指表面镀有一层锌的钢板。镀锌钢板为了防止钢板表面遭受腐蚀延长其使用寿命&#xff0c;会在钢板表面涂以一层金属锌&#xff0c;这种涂锌的钢板称为镀锌板。镀锌是一种经常采用的经济而有效的防锈方法&#xff0c;世界上锌产量的一半左右均用于此种工艺。 中国的迅…

数字护盾:深度探讨Sentinel的三大流控策略

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 数字护盾&#xff1a;深度探讨Sentinel的三大流控策略 前言快速失败策略&#xff1a;数字守卫的拦截术快速失败策略的基本原理&#xff1a;示例场景演示&#xff1a; Warm Up策略&#xff1a;数字城堡…

编程笔记 html5cssjs 067 JavaScrip String数据类型

编程笔记 html5&css&js 067 JavaScrip String数据类型 一、String数据类型二、类型运算三、代码示例小结 Javascript语言中的String数据类型详解。JavaScript 中的 String 数据类型用于表示文本数据。字符串是不可变的&#xff0c;这意味着一旦创建了一个字符串&#x…

如何安装配置HFS并实现无公网ip远程访问本地电脑共享文件

文章目录 前言1.下载安装cpolar1.1 设置HFS访客1.2 虚拟文件系统 2. 使用cpolar建立一条内网穿透数据隧道2.1 保留隧道2.2 隧道名称2.3 成功使用cpolar创建二级子域名访问本地hfs 总结 前言 在大厂的云存储产品热度下降后&#xff0c;私人的NAS热度快速上升&#xff0c;其中最…

HiveSQL题——窗口函数(lag/lead)

目录 一、窗口函数的知识点 1.1 窗户函数的定义 1.2 窗户函数的语法 1.3 窗口函数分类 1.4 前后函数:lag/lead 二、实际案例 2.1 股票的波峰波谷 0 问题描述 1 数据准备 2 数据分析 3 小结 2.2 前后列转换&#xff08;面试题&#xff09; 0 问题描述 1 数据准备 …

使用mkcert生成服务证书和客户端证书并导入到java中

github下载mkcert https://github.com/FiloSottile/mkcert 服务器ip地址为192.168.1.1 生成服务器证书 mkcert 192.168.1.1获取到192.168.1.1.pem和192.168.1.1.key.pem文件 将文件配置到服务器中 本地安装证书 mkcert -install在其他客户端手动导入证书到java中 执行两…

Pytest中doctests的测试方法应用

在 Python 的测试生态中,Pytest 提供了多种灵活且强大的测试工具。其中,doctests 是一种独特而直观的测试方法,通过直接从文档注释中提取和执行测试用例,确保代码示例的正确性。本文将深入介绍 Pytest 中 doctests 的测试方法,包括基本用法和实际案例,以帮助你更好地利用…

Habitat环境学习一:导航任务概述

导航任务 概述&#xff1a; Agent需要导航到环境中的指定位置&#xff0c;而该位置可以由特定的目标形式指定。 PointGoal Navigation&#xff1a;导航到环境中相对于初始位置特定的点&#xff1b; Object Navigation&#xff1a;Agent需要在环境中找到特定的物体&#xff1…

【C++】类和对象(一)

前言&#xff1a;在前面我们带大家初步步入了C&#xff0c;让大家大概知道了他的样子&#xff0c;那今天就可以说我们要正式步入C的大门了&#xff0c;这一章内容的细节比较多各位学习的时候一定要仔细。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f…

leetcode 27.移除元素(python版)

需求 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度…

如何多好一个FMEA——SunFMEA软件

尽管FMEA的理念和流程相对简单&#xff0c;但在实际操作中&#xff0c;许多企业发现FMEA的实施并不容易&#xff0c;往往无法达到预期的效果。今天SunFMEA软件和大家一起 SunFMEA软件 首先&#xff0c;FMEA的实施需要跨部门、跨领域的团队合作。然而&#xff0c;在很多企业中&a…

C# Newtonsoft.Json解析json笔记

最近在做数据传报的工作&#xff0c;有解析一个巨复杂的json的需求&#xff0c;所以又学了下 Newtonsoft.Json&#xff0c;感觉挺方便的。 参考思路如下&#xff1a; 1、对象的格式为 名称:值。其中&#xff0c;值可以为对象&#xff08;大括号&#xff09;&#xff0c;也可以…

RX-8564 LC实时时钟模块

.内置 32.768 kHz 晶体单元(频率精度调整完毕) .接口类型&#xff1a;I2C-Bus 接口 (400 kHz) .工作电压范围&#xff1a;1.8 V ~ 5.5 V .计时&#xff08;保持&#xff09;电压范围 &#xff1a;1.0 V ~ 5.5 V / -20 ˚C ~70 ˚C .低待机电流 &#xff1a;275 nA / 3.0…

Acrel-2000MG微电网能量管理系统在工商业储能行业中的应用

一、概述: 在新型电力系统中新能源装机容量逐年提高&#xff0c;但是新能源比如光伏发电、风力发电是不稳定的能源&#xff0c;所以要维持电网稳定&#xff0c;促进新能源发电的消纳&#xff0c;储能将成为至关重要的一环&#xff0c;是分布式光伏、风电等新能源消纳以及电网安…

超强预测模型:二次分解-组合预测

1 长时间序列预测模型Informer Informer是一种基于自注意力机制的序列预测模型&#xff0c;专门用于时间序列预测任务,在时间序列预测领域取得了显著的性能Informer主要特点&#xff1a; 注意力机制与多层编码器-解码器结构 Informer模型引入了全局自注意力和局部自注意力机…

大模型技术关于硬件和操作系统的要求

引言 在人工智能的快速发展中,大模型技术逐渐成为了研究和应用的热点。本文将探讨在大模型技术中,硬件和操作系统的重要性以及具体的要求。 硬件与操作系统要求 一、硬件与软件的平衡 在大模型微调技术的落地应用中,硬件和软件同等重要。用户需要根据具体的应用场景和需求…

Linux操作系统权限相关问题(一站式速通权限)

一、sudo命令 sudo yum install -y sl sudo命令的作用 不切换用户&#xff0c;就想让普通用户以root的身份&#xff0c;执行对应的指令 输入密码时&#xff0c;输入的是自己普通用户的密码&#xff0c;而不是root的密码&#xff01;&#xff01;&#xff01; sudo可以进行…

移动端深度编辑产品技术解决方案

视频编辑已经成为企业宣传、教育、娱乐等多个领域的重要工具。美摄科技凭借其深厚的技术积累和对市场需求的敏锐洞察&#xff0c;开发出业界领先的移动端深度编辑产品&#xff0c;为企业提供高效、专业的视频编辑解决方案。 美摄科技移动端深度编辑产品方案&#xff0c;基于多…

【Vue】2-5、Vue 过滤器

过滤器&#xff08;Filters&#xff09;是 vue 为开发者提供的功能&#xff0c;用于文本的格式化。 【Vue2 可用&#xff0c;Vue3 已经弃用】 过滤器可以用在两个地方&#xff1a; 插值表达式 v-bind 属性绑定 过滤器应该被添加在 JavaScript 表达式的尾部&#xff0c;由“管…

小程序脚本语言——SJS 语法参考

SJS&#xff08;safe/subset javascript&#xff09; 是小程序的一套脚本语言&#xff0c;结合 tyml&#xff0c;可以构建出页面的结构。 注意事项 SJS 的运行环境和其他 JavaScript 代码是隔离的&#xff0c;SJS 中不能调用其他 JavaScript 文件中定义的函数&#xff0c;也不…