盒子模型（div标签）以及其属性

最新推荐文章于 2024-10-09 11:02:04 发布
最新推荐文章于 2024-10-09 11:02:04 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： Web前端CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwjdj/article/details/104060687
版权
本文介绍了CSS中的盒子模型，包括div标签在网页布局中的应用，以及盒子模型的组成部分：内容区域、边框、内边距和外边距。详细探讨了边框属性，如设置边框样式、宽度和颜色，并提供了边框属性的联写方式。此外，还讲解了如何设置圆角边框，以及取消边框的方法。
摘要由CSDN通过智能技术生成

盒子模型（div标签）

作用：
用于网页布局[画盒子]
组成：
内容区域
边框
内边距：内容区域与边框之间的距离
外边距：盒子与盒子之间的距离
在这里插入图片描述

盒子模型相关属性

边框属性（border）

设置边框的样式(没有|实线|点线|虚线|双实线)

border-style:none(默认)|solid|dotted|dashed|double;

设置边框宽度

border-width:~~px;

设置边框颜色

border-color:red;

边框属性的联写：

border:样式 宽度 颜色；    顺序和个数任意，省略的部分取默认值

在这里插入图片描述
也可以单独设置某一条边框的样式
在这里插入图片描述
或者单独指定每一个边框的样式
在这里插入图片描述
去掉边框的方法：

border<
最低0.47元/天 解锁文章
杏黄的三叶草
关注
专栏目录
css基础(3)——盒子模型，标签分类
qq_51913153的博客
05-16 697
1.盒子模型 css处理网页时，会认为每个标签都包含在一个不可见的盒子中 把每个标签看做一个盒子，那么定义布局实质上就是将每个盒子摆放到网页中相应的位置种，即可完成布局 一个盒子分为四部分，假如将一个教室看做一个盒子 ——内容区：存放标签中的内容与标签,width与height的实际设置的区域（就相当于教室中桌椅的位置） ——内边距：内容区与边框之间的距离（可看做教室过道） ——边框：内边距与外边距之间的距...
【JavaWeb】CSS_盒子模型（div块标签）
午后红茶
01-17 1357
盒子模型 1.标签格式： 块标签 2.作用：对页面进行分区 3.在css语法中对盒子属性进行操作： （1）盒子容量： ①width ②height （2）盒子边框： ①border-color ②border-style ③border-width （3）盒子边距： ①内边距：padding —— 盒子边框和盒子内容之间的距离 ②外边距：margin —— 盒子与盒子之间
div盒子标签
huaz_md的博客
08-28 928
div本身是没有任何含义的，它一般是作为划分区域的标签，是一个很单纯的标签，可塑性很强，一般用来做容器，所以称为盒子。把对应的内容放在div盒子里面（分割区域，div本身没有宽高、颜色属性）DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 练习 < style > * {margin : 0;//清除外边距 padding : 0;
第五章 css盒模型
最新发布
2301_80634189的博客
10-09 860
概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。盒模型的组成：（1）content（内容区）（2）padding（填充区）（3）border（边框区）（4）margin（外边界区）
＜div＞盒子标签
qq_34771938的博客
08-13 394
div标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更加清晰。 标签结构： <div>xxx<div> 示例： 代码示例。 <!-- 该标签相当于是一个容器，只有结合css才可以充分的显示出它的作用，这里的简单示例无法看出其效果。--> <div > 第一个盒子 </div> <div> 第二个盒子 </div> ...
#css 盒子div属性
weixin_43097301的博客
09-29 3375
盒子属性 1. 宽度 width 属性用于设置元素的宽度，你需要注意的是，通过该属性设置的宽度有的时候未必就是元素真实的宽度，这是由于盒子模型类型的影响，IE盒子模型的 width = content + padding + boder，而标准盒子模型的 width = content。 width 属性最常用的两种设置方式为“像素（px）”设置和“百分比（%）”设置。他们的特点如下： 像素设...
【DIV 盒子模型】
ITher的博客
01-05 3163
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 盒子模型 1、什么是盒子模型？ 2、border边框 3、padding内边距 4、margin外边距 5、盒子的塌陷与合并 总结 一、盒子模型 1、什么是盒子模型 效果如图 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as...
标签分类，div和span，盒子模型
m0_62140068的博客
09-29 1079
1. 块级标签 无论内容多少，都会占一行，即自动换行。（p，h1，ul，ol） 默认尺寸：宽——与父级标签一致 高——为0 还可以通过width，height设置宽高。 主要用于网页布局。 2. 行级标签 只占自身内容大小，不会占一行。（a，b，i） 设置宽高是无效的。 多用于选中文本文字。 3. 行级块标签 不占一行，可以设置宽高。（input，image） 4. 注意事项 1.一般情况下，使用块级标签包含行级标签。 2.a标签可以包含除自身外的任何标签。 3.p标签不可包含
DIV+CSS-----盒子模型
weixin_61561066的博客
04-28 1282
一、DIV标签 块级标签(容器)，在没有设置高度、宽度属性时，和p标签相似(会自动换行)。作为容器可以包含其他标签。（注：p、span虽然是块级标签,但是不能作为容器使用） 二、盒子模型的属性 以下是用盒子作为页面的布局时会用到的属性 1、宽度：width 2、高度：height 3、边框属性： ...
盒子模型、浮动属性及定位属性
thwr1881的博客
04-22 1802
1、什么是盒子模型 进行网页布局的重要属性，一个页面由可以由多个盒子组成。 盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin) 2、div标签 div标签是块级标签，在没有设置高度、宽度时，和文本标签p功能类似，也可以自动换行。但和p标签不同的是，div标签可以作为容器包含其他标签，而p标签则不能作为容器使用。 3、盒子模型的属性：用盒子作为页面的布局时会用到的属性 3.1、border边框属性 边框属性 作用 border 边框基本属性 bod
HTML盒子标签
qq_43633879的博客
05-12 827
盒子标签 HTML代码： <!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.0"> &l
CSS知识小结2-DIV+CSS页面属性（盒子模型）
myj1870501的博客
10-02 555
6.背景色半透明： background: rgba(0,0,0,0.3) 最后一个参数是alpha透明度，区间在0~1之间，半透明指盒子颜色，里面内容不受影响。（背景附着）background-attachment: scroll（滚动） | fixed（固定）图像位置固定，不随页面滚动而滚动。：background-position: left/right/center center/top(水平靠左，垂直居中)2.背景平铺：background-repeat:repeat(默认平铺)；
面试小汇总-(盒模型)
weixin_39658215的博客
03-16 244
CSS 盒子模型CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框...
盒模型1.1-基本标签和属性
lizhipeng110的博客
03-03 143
外边距: 改变元素外边的间距 内边距: 改变元素与内容的间距 padding:一个值; 一个值,改变四个方向 padding:上下 左右; padding:上 左右 下; padding:上 右 下 左;顺时针方向变化 padding-top:顶部内边距; padding-right:右内边距; padding-...
html_常用标签_盒子标签_图片标签_超链接_列表标签（2）
稳稳C9的博客
03-24 964
html_常用标签_盒子标签_图片标签_超链接_列表标签（2）
认识HTML的盒子模型/＜div＞标签/通过css设置边框的样式与属性/css对边框的颜色设置与综合写法/学习笔记
No1banana的博客
01-24 3432
一、认识盒子模型 盒子模型：在网页中，承载内容的区域 网页中盒子模型拥有内边距、边框、外边距、宽和高 盒子模型用于划分区域和承载内容，使网页的元素清晰的排列 二、div标签 div标签是一个块容器标签（可以设置宽度和高度） div标签可以把网页分割为独立的部分，用来实现网页的规划和布局 大多数HTML标签都可以嵌套<div>标签中可以嵌套多层<div> 可以替代大多数块容器标签，如：<h3>或<p> 示例代码 <!doctype html&gt
html-3 盒子标签 图像标签
fly_ship的博客
08-06 433
盒子标签 布局 <div> <span> <div>独占一行 <span>一行可以放多个 图像标签 <h4>图像标签的使用</h4> <img src="1.png"/> 属性：src alt title <h4>alt 替换文本 图像显示不出来是用文字替换</h4> <img src="11.png" alt="替换文字"/> &lt...
3.6div标签与盒子模型
BossHAO的博客
09-18 347
3.6div标签与盒子模型 描述：针对特定标签的定位(可以对body以内所有的标签) 1.定位的分类 绝对定位：absolute 和 fixed 统称为绝对定位 相对定位：relative 默认值：static 2.定位属性名称 position（位置） 四个值: static relative absolute fixed 3.在发开当中，发现对于块级元素/行级元素，都能够...
09-常用标签之盒子标签 ＜div＞、＜span＞
qq_36352716的博客
01-19 1312
1、div标签 可以理解为大盒子，独自占一行 2、span标签 可以理解为小盒子，一行可以有多个span标签
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值