CSS盒子模型和盒子的边框

最新推荐文章于 2024-03-07 19:45:00 发布
最新推荐文章于 2024-03-07 19:45:00 发布
阅读量924 收藏 8
点赞数 4
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52984349/article/details/125679525
版权

一、盒子模型：

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型图片展示：


 

1、Margin(外边距) ：外边距是透明的，用来固定盒子的位置，指的是当前的盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置

（1）margin-top

上外边距，设置一个正直，元素回向下移动，设置一个负值，元素向上移动

（2）margin-bottom

下外边距，设置一个正直，自已不动，其下边的元素会向下移动，挤别人

（3）

最低0.47元/天 解锁文章
枕頭說他不想醒
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
CSS篇十六——盒子模型之边框
Regina_Cai的博客
11-16 3699
* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法 简写： *//* 注意 不能颠倒顺序 *//* 合并相邻的边框 */
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-16 4557
一、网页布局本质 二、盒子模型 三、盒子边框 Border 1、CSS 2.0 文档查询 2、边框设置语法 3、边框设置综合写法
css盒子模型（边框）
cs007711的博客
08-08 1045
边框
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-07 2136
一、CSS 盒子边框 1、盒子模型 2、盒子边框设置语法 单独设置语法 综合设置语法 3、盒子边框单独指定语法 4、盒子边框合并 二、CSS 盒子模型内边距 1、盒子模型内边距简介 概念 内边距设置语法 内边距设置效果 2、盒子模型内边距复合写法 3、盒子模型尺寸计算 4、内边距 对 盒子模型尺寸 的影响 三、CSS 盒子模型外边距 1、盒子模型外边距属性单独设置 2、外边距属性复合写法 3、盒子水平居中设置 4、图片位置改修 5、标签默认外边距 6、清除默认的外边距 7、上下相邻两个模型盒子 外边距塌陷
CSS盒子模型
From_Ezra的博客
09-13 336
CSS盒子模型
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型 css margin 外边框合并
09-25
刚刚看了css教程觉得很形象就贴出来了。想学习的朋友可以参考下。
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局...总的来说，深入理解CSS盒子模型能帮助开发者更好地控制网页元素的外观和交互，从而实现更精细的页面布局。了解和熟练运用盒子模型，可以提升CSS编码的效率和网页设计的质量。
CSS盒子模型是什么
09-24
CSS盒子模型是网页设计中一个基础且至关重要的概念，它帮助开发者理解和控制网页元素的布局。CSS（Cascading Style Sheet）是用来分离HTML或XML文档内容与其表现样式的一种语言，使得我们可以独立地调整内容的外观和...
CSS与CSS3基础知识（三）——盒子模型的边框属性
不加防腐剂的博客
11-28 845
CSS 英文全称为Cascading Style Sheet，中文译为“层叠样式表”。CSS以 HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。在(点击可复习)中学习了字体样式属性，在(点击可复习)中学习了CSS的文本外观属性，现在一起学习盒子模型边框属性吧！
CSS盒子模型和边框的使用
weixin_47556601的博客
02-05 617
大家好，今天给大家分享一下CSS背景图像 总的来讲，CSS就三个块： 盒子模型 、 浮动 、 定位，其它的基本上都是小细节而已，但是这三部分，无论如何也要学的非常精通。 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 网页布局的实质，就是将很多的网页元素放到一个盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 例如： 以下这样： 写一个原始登录页面： <!DOC
1、CSS 盒子模型，2、边框样式，3、CSS 轮廓（outline），
qq_15007601的博客
09-05 5785
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) ...
已定盒子大小，使盒子不因padding和border而撑大盒子
lu10505的博客
12-29 572
box-sizing:border-box;
HTML+CSS初学日常知识点-三
Gaoler7的博客
03-04 302
太难了 人麻了
我的前端学习笔记03-Layout
weixin_44698814的博客
02-27 359
文档流（normal flow） 网页是一个多层的结构，一层摞着一层 通过CSS可以分别为每一层来设置样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） 元素在文档流中有什么特点： 块元素 块元素会在页面中独占一行...
CSS盒子模型的边框设置
qq_43542346的博客
09-03 2103
CSS盒子模型的边框 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型之边框</title> <style> div{ width: 200px; height: 300px; border-width:
彻底弄懂CSS盒子模式
盖茨的专栏
08-25 573
理解CSS盒子模型　　什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。先看下面的代码：.box { width: 200px;border: 10px solid #99c;padding: 15px;margin: 2
css最后一个子集,css中使用:not()选择器为最后一个元素去除边框
weixin_39632057的博客
08-04 3955
CSS 否定伪类，:not(X)，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类，它不会增加选择器的优先级。:not() 伪类可以将一个或多个以逗号分隔的选择器作为其参数(实验性的，尚未广泛支持，目前Safari、IOS Safari支持)。选择器中不得包含另一...
css盒子模型边框圆角矩形
12-08
CSS盒子模型边框圆角矩形可以通过设置border-radius属性来实现。border-radius属性用于设置元素的圆角边框，其值可以是一个或多个长度或百分比值，用空格隔开。如果只指定一个值，则四个角都使用该值。如果指定两个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值