前端入门——CSS盒子模型

最新推荐文章于 2024-07-27 10:01:45 发布
最新推荐文章于 2024-07-27 10:01:45 发布
阅读量758 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41684657/article/details/87656767
版权

在这里插入图片描述

盒模型——内边距 padding

属性描述
padding设置所有内边距
padding-left设置左内边距
padding-right设置右内边距
padding-top设置上内边距
padding-bottom设置底部内边距

盒模型——边框

描述属性
边框样式border-style
单边框样式（上）border-top-style
边框颜色border-color
单边框颜色（上）border-top-color
边框宽度border-width
单边框宽度（上）border-top-width

CSS新增属性

描述属性
圆角边框border-radius
阴影效果box-shadow
边框图片border-image
<!--HTML-->
 <body>
    <p id="p1">Hello World!</p>
    <br><br>
    <div id="div1"></div>
  </body>
  
<!--CSS-->
#p1{
	border-radius:30px;
	width:150px;
	background-color:#ccccff;
	border:2px solid #ccbbaa;
}

#div1{
	width:150px;
	height:150px;
	background:#abcdef;
	box-shadow:10px 10px 5px #fcdddd;     /*前两个为偏移量 清晰度  颜色*/
}

在这里插入图片描述

外边距合并

不会叠加，而是 以多的一方为边距的长度
在这里插入图片描述

舟轻未惊。
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一文入门 —— CSS
余识-
01-06 1768
本文主要内容为一文快速入门前端三大基石之一的CSS
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) – 清除边框外的区域，外边距是透明的。 Border(边框) – 围绕在内边距和内容外的边框。 Padding(内边距) – 清除内容周围的区域，内边距是透明的。 Content(内容) –
CSS-盒子模型介绍（以标准盒子模型为例）
Yannnnnm的博客
07-01 809
目录盒模型的定义“盒子”的类型"盒子"的组成部分-以块级盒子为例内容 conter内边距 padding边框 Border外边距 margin总结 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 盒模型的定义 CSS盒模型(Box Model)：盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容content 、 内边距padding、边框border、外边距margin。 下面的图片展示了标准的盒子
CSS盒子模型
最新发布
weixin_64294248的博客
07-27 960
盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)。我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。
CSS学习摘要-盒子模型
夏虫不可语冰
06-01 2171
注：全文摘要自网络开发者网站，当然间隔也会整理一些思路和格式排版添加进去。 CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。在理解如何创建 CSS 布局之前，你需要理解框模型。 ...
css的盒子模型介绍,CSS盒模型详解
weixin_42107561的博客
08-04 513
盒模型基本概念盒模型本质是一个盒子，包括边距，边框，填充，和实际内容。标准盒模型和IE盒模型不同在于高度和宽度计算的不同，标准模型width和height只是指content，IE盒模型的width和height是content、padding、border的和。获取盒模型的宽高JS：dom.style.width/height但是页面中样式有三种设置方式：设置元素中style属性head标签中s...
CSS盒子模型详解
热门推荐
baolingye的博客
06-19 2万+
CSS盒子模型 一、什么是盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明...
前端学习——CSS入门
qq_45727209的博客
05-02 197
前端学习——CSS入门，包括：CSS引入方式、常用选择器、背景(background)、文本常用样式、盒模型、定位、图文组合、浮动等，持续更新中
【HTML】CSS入门教程——盒子模型+列表属性+display+图像精灵 常用页面布局操作
hnspystqxskzlqc的博客
03-23 1411
目录 一、盒子模型 练习一 二、列表属性 练习二 三、display 练习三 四、图像精灵 五、总结 (接上一期知识，咱们继续讲解。) 一、盒子模型 1. 盒子模型：外边距+边框+内边距+内容 2. padding：内边距：内容与父元素边框四周的距离 3. margin：外边距：内容与浏览器边框的距离 练习一 <!DOCTYPE html> <html> <head> <meta charset="...
Web入门——css
qq_57357292的博客
05-27 1825
一、定义 简单来说，css就是在html上的代码将在web界面上如何呈现出来。举个例子： 如果不用css进行排版，仅仅用html文件代码，所生成的页面上会是如下这样，将内容依次向下排列。 如果用上css进行样式排版，生成的网页将会让人看起来比较舒服，如下图： 二、css的相关语法 一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。 如： /* 这是CSS的注释 */ /* 建议每条申明占一行 */ p{ color:red; text-align:center; /*
前端简单入门第五讲 CSS基础(二)——盒子模型、浮动与位置
李阿昀的博客
01-03 1258
盒子模型 CSS里面有句话叫万物皆盒子，所以在这一小节要简单介绍一下CSS中的盒子模型。 盒子模型的基本要素 以下图中的按钮为例， 在Chrome浏览器中查看这个元素，结果是这样的： 蓝色部分（28 x 32 ）是button的content，绿色的是padding，黄色的是border，深黄色是margin。盒子模型很简单，其实就这4个概念。因此，一个元素在页面上的宽高就是由这四个部分共同影...
CSS盒子模型概述
xinghuo0007的博客
04-25 688
知识点一：模型的作用 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 知识点二：CSS 框模型概述 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。提示：背景应用于由内容和内边距、边框组成的区域。。内边距、边框和外边距都是可
css_盒子模型
子龙修仙的博客
05-14 1064
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。    元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。盒子示意图示：  l border元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允...
简述对CSS的盒子模型理解？
泠泠似水
12-29 1万+
CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性： border:元素的边框（可能不可见），用于将框的边缘与其他框分开； margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白； padding:内边距，表示框内容和边框之间的空间。 width
CSS盒子模型的介绍
qq_43776742的博客
07-30 240
盒子模型 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 标准盒子模型 IE盒子模型 返回盒子模型目录 ...
介绍CSS盒子模型
luckyhmm的博客
06-03 81
今天是学习web前端的第三天，之前简单了解了HTML，都是为接下来的学习打基础。 什么是盒子模型？我们可以把所有HTML元素看作盒子，在CSS“”
简要介绍css的盒模型,CSS盒模型的介绍
weixin_32484541的博客
08-03 2045
CSS盒模型的概念与分类CSS盒模型就是一个盒子，封装周围的HTML元素，它包括内容content、边框border、内边距padding、外边距margin。CSS盒模型分为标准模型和IE模型；标准模型和IE模型的区别标准模型：width = 内容content 的宽度；(默认)设置方式： box-sizing:content-box;IE模型：width = 内容content + 边框bo...
CSS盒模型简单介绍
m0_64634466的博客
06-22 3050
css盒模型
CSS盒模型的介绍
xiaoxicccc的博客
03-16 117
CSS盒模型的介绍 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。 盒模型的特点 每个盒子都有：边距（margin），边框（border），填充（p...
前端开发：CSS盒子模型与排版详解
本文将深入探讨前端开发技术中的CSS盒子模型以及相关的排版方法。CSS盒子模型是理解网页布局的基础，它将页面上的每个元素视为一个包含内容、边框、内边距和外边距的盒子。通过调整这些组件的样式，我们可以实现复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值