盒子模型的内容总结

news2024/11/19 23:29:14

知识引入

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.coloradmin.cn/o/1418829.html

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

相关文章

Next.js 学习笔记(八)——优化

优化 Next.js 提供了多种内置优化&#xff0c;旨在提高应用程序的速度和核心网络生命指数。本指南将介绍可用于增强用户体验的优化功能。 内置组件 内置组件抽象化了实现常见 UI 优化的复杂性。这些组件包括&#xff1a; 图像&#xff1a;基于本地 <img> 元素构建。图…

Flink问题解决及性能调优-【Flink rocksDB读写state大对象导致背压问题调优】

RocksDB是Flink中用于持久化状态的默认后端&#xff0c;它提供了高性能和可靠的状态存储。然而&#xff0c;当处理大型状态并频繁读写时&#xff0c;可能会导致背压问题&#xff0c;因为RocksDB需要从磁盘读取和写入数据&#xff0c;而这可能成为瓶颈。 遇到的问题 Flink开发…

STM32 有源蜂鸣器

模块介绍: 结构&#xff1a;有源蜂鸣器通常由一个振膜和一个驱动电路组成。振膜是负责产生声音的部分&#xff0c;而驱动电路则负责控制振荡频率和幅度。 工作原理&#xff1a;有源蜂鸣器的驱动电路会向振膜施加电压&#xff0c;使其振动产生声音。驱动电路可以根据输入信号的…

centos7安装mysql5.7 或者mysql8

1、centos7安装mysql8 mysql官网 https://dev.mysql.com/downloads/mysql/ 示例2个版本的下载地址 #5.7.30下载地址 wget https://cdn.mysql.com/archives/mysql-5.7/mysql-5.7.30-1.el7.x86_64.rpm-bundle.tar #8.0.22下载地址 wget https://cdn.mysql.com/archives/mysql-8…

网络防御保护——课程笔记

一.防火墙 防火墙的主要职责&#xff1a;控制和防护 --- 安全策略 --- 防火墙可以根据安全策略来抓取流量之后做出对应的动作。 防火墙的分类 防火墙的发展进程 防火墙的控制 带内管理 --- 通过网络环境对设备进行控制 --- telnet&#xff0c;ssh&#xff0c;web --- 登录设备…

【node】Node.js的常用内置模块:

文章目录 一、os模块&#xff1a;【1】常用的OS模块方法包括&#xff1a;【2】案例&#xff1a; 二、path模块&#xff1a;【1】常用的path模块方法包括&#xff1a;【2】案例&#xff1a; 三、url模块&#xff1a;【1】常用的url模块方法包括&#xff1a;【2】案例&#xff1a…

【Apache POI】百万级数据导出Excel,并含有折线等图表

需求概要 最近接到一个需求&#xff0c;概要来讲就是实现百万级数据导出Excel&#xff0c;并根据其中的数据项自动生成折线图等图表。经技术调研&#xff0c;针对内存、性能等要素&#xff0c;Apache POI此技术可完成此需求。 Apache POI是Apache软件基金会的开放源码函式库&am…

《教我兄弟学Android逆向15 xpose改机开发03-写一款自己的改机软件》

上一篇 《教我兄弟学Android逆向14 xpose改机开发02-改机代码基础编写》我带你熟悉了一下改机的流程,搭建了改机的基础代码,改机参数数据储存方面我们用的是SharedPreferences存储数据,界面方面写了一个一键新机的按钮,点一键新机的时候会随机生成imei数据存储到xml数据中,然后…

isctf---re

crackme 解压得到crackme.exe 运行得到flag babyRe 先猜e65537的rsa 先用Z3强行求出p、q&#xff0c;算出常规rsa中的phi&#xff0c;然后套用公式求出m exp #babyre wp from z3 import * import libnum from Crypto.Util.number import * p,q,cInts(p q c) S Solver() S…

【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签

文章目录: 1.HTML图片标签 1.1 图像标签-基本使用1.2 图像标签-属性1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 1.HTML图片标签 1.1 图像标签-基本使用 作用:在网页中插入图片。 <img src"图片的URL">src用于指定图像…

前端框架---Vue2学习教程(上)

从HTML到现在一路跟过来的小伙伴们&#xff0c;坚持固然不容易&#xff0c;但我相信大家已经学到了不少&#xff0c;那么我们开始马不停蹄的进入前端的框架吧&#xff0c;下面讲的是Vue2&#xff0c;大家继续加油鸭&#xff01;&#xff01;&#xff01;&#xff01; Vue2 Vu…

遗传算法优化最大化效应的某些需求点可不配送的vrptw问题

标题&#xff1a;遗传算法优化最大化效应的某些需求点可不配送的vrptw问题 摘要&#xff1a; 在可不配送的车辆路径配送问题&#xff08;VRPTW&#xff09;中&#xff0c;我们面临着优化路径规划以最大化效用的挑战。本文提出了一种基于遗传算法的方法&#xff0c;旨在解决具…

【Shell实战案例面试题】输入网卡的名字,来输出网卡的IP

1.问题 参数后判断要加"" 名字为空时显示ip 2.分析 把本机的所有网卡名列出来&#xff0c;来引导用户输入 使用命令列出所有网卡信:ifconfig/ip a 设计一个函数&#xff0c;把网卡名作为参数&#xff0c;函数返回网卡的IP 在获取某个网卡IP时&#xff0c;考虑网…

Redis面试(三)

1.Redis报内存不足怎么处理 Redis内存不足的集中处理方式&#xff1a; 修改配置文件redis.cof的maxmemory参数&#xff0c;增加Redis的可用内存通过命令修改set maxmemory动态设置内存上限修改内存淘汰策略&#xff0c;及时释放内存使用Redis集群&#xff0c;及时进行扩容 2…

基于springboot的美发管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

让Unity迭代器性能提升5倍

最近在研究Unity il2cpp的代码生成和编译优化&#xff0c;结合之前遇到过的一个优化案例&#xff0c;给大家讲讲在Unity中迭代器相关代码生成的底层原理&#xff0c;以及在写代码过程中需要注意的一些特殊情况。 案例 首先我们来看一个非常简单的案例&#xff0c;代码如下&am…

3338 蓝桥杯 wyz的数组IV 简单

3338 蓝桥杯 wyz的数组IV 简单 //C风格解法1&#xff0c;通过率50% #include<bits/stdc.h>int main(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);std::cout.tie(nullptr);int n; std::cin >> n;int ans 0;std::vector<int>a(n);for(auto &am…

Docker本地部署APITable结合内网穿透实现公网访问

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c;是一款面向 API 的智能多维表格。它将复杂的可视化数据库、电子表格、实时在线协同、低代码开发技术四合为一&am…

【C语言】socket编程接收问题

一、recv()函数接收到的返回值为0表示对端已经关闭 在TCP套接字编程中&#xff0c;通过recv()函数接收到的返回值为0通常表示对端已经关闭了套接字的发送部分。这是因为TCP是一个基于连接的协议&#xff0c;其中有定义明确的连接建立和终止流程&#xff1b;当对端调用close()或…

C语言指针进阶(1)(超详细)

前言&#xff1a; 指针其实就是地址&#xff0c;而凡是存储在内存中的值都会有属于自己的地址&#xff0c;指针指向地址&#xff0c;这样我们就能通过指针间接操作变量。我们在指针初阶中介绍了指针的基本概念&#xff1a;如指针大小、野指针问题、指针间的关系运算等&#xff…