CSS（八）——CSS盒模型

最新推荐文章于 2024-09-12 19:55:46 发布

程序员的时光

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量275

点赞数

分类专栏： ● Web前端基础篇 Web前端基础文章标签： CSS盒模型盒子模型

本文链接：https://blog.csdn.net/qq_37084904/article/details/88421590

版权

Web前端基础同时被 2 个专栏收录

14 篇文章 11 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

● Web前端基础篇

33 篇文章 3 订阅

订阅专栏

本文详细介绍了CSS盒模型，包括基本概念、边框、内边距、外边距和网页布局。重点讨论了标准文档流、块级元素与行内元素的区别，以及在标准流中盒子的定位，特别是margin的使用，包括负值margin导致的元素重叠现象。

摘要由CSDN通过智能技术生成

1.盒模型基本概念

我们可以好好看一下这张图；

盒模型：相框边框 - > border ；画和相框边框的距离（内边距） -> padding；相框之间的距离（外边距） -> margin

2.边框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员的时光

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

CSS样式——盒子模型

qq_42828394的博客

04-01

1169

盒子模型 一、什么是盒模型 每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成二、组成三、怪异盒模型

css盒模型——标准盒子、怪异盒子

帥潔的博客

07-11

1196

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。1、网页中所有元素都具备以下四个属性（用来对元素进行布局）：2、盒子模型分为两种：1、标准盒模型中、指的是内容区域的宽高 2、怪异盒模型中的、指的是的宽高 1、作用：属性是用来切换盒模型2、的常用属性：...

参与评论您还未登录，请先登录后发表或查看评论

CSS3——CSS3盒模型

流楚丶格念的博客

07-15

4137

像手腕上散发的香水味CSS3盒模型案例 CSS3盒模型 CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况： 1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 2、box-sizing: border-box 盒子大小为 width

css布局——盒子模型

aimnr的博客

11-26

1127

前言： 1.看透网页布局的本质网页布局的过程：先准备相关的网页元素，网页元素基本都是盒子Box 利用css设置好盒子样式，然后摆到相应位置向盒子里面装内容网页布局核心：利用css摆盒子 2.盒子模型（Bxo Model）组成所谓盒子模型九十八HTML页面中的布局元素看作是一个承装内容的容器 css盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框，内边距，外边距和实际内容 ...

CSS（八）——CSS盒子模型 和CSS Border（边框）

m0_62701594的博客

07-25

1038

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

CSS基础知识(二）——盒子模型

weixin_54799350的博客

06-21

7878

CSS盒子模型相关属性介绍

CSS——弹性盒模型(Flex)

qq_60361946的博客

08-06

1022

本文大部分参考自阮一峰老师和B站UP主后盾人的Flex布局教程。

CSS——盒子模型

最新发布

m0_73557953的博客

09-12

479

margin : auto => 让target元素左右两边的margin都占据尽可能多的空间，就会各占一半，使元素居中。水平方向：margin-left : auto => 让target元素左边的margin占据尽可能多的空间，使元素靠右。首先CSS将所有的元素都看成一个盒子。

CSS篇十六——盒子模型之边框

Regina_Cai的博客

11-16

3838

* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法简写： *//* 注意不能颠倒顺序 *//* 合并相邻的边框 */

CSS盒子模型之边框——border

m0_64480873的博客

12-03

859

（常用的边框样式有：无边框none、实线边框solid、点线边框dotted、虚线边框dashed、双线边框double）就是把HTML页面中的布局元素看作是一个矩形盒子，也就是装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，2、如果测量的时候包含了边框，则需要wideh/height减去边框的宽度。边框由三部分组成：边框的宽度（粗细）、边框的样式、边框的颜色。border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。是定义边框的粗细，单位是px。

CSS之盒子模型与背景属性————每天一遍小知识

01-08

边框样式——Border style5.CSS的边宽和高度——width height三.背景——background1.背景颜色——background color2.背景图像—— background image3.背景重复—— background repeat4.背景的附件（固定与滚动）...

动态调用css文件——jquery的应用

10-31

标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...

前端CSS基础——行盒模型与行块盒模型

木的又

04-08

1537

文章目录行盒模型行盒模型的盒子属性行块盒什么是行块盒行块盒的简单应用实现网页的分页行盒模型 行盒模型是display属性为inline的元素，常见的行盒元素有a、span、strong、em、video、audio、img等。行盒模型与块盒模型的不同特点有：行盒模型不独占一行，块盒模型独占一行。块盒模型可对上下左右方向进行填充，行盒模型只能对水平方向进行填充。行盒模型无法设置宽高，只能...

HTML（七）——html容器

程序员的时光

03-05

6781

1.DIV HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 DIV当做容器使用，本身没有实际效果，可以独占一行； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here&lt

HTML（二）——用html设置文本

程序员的时光

03-02

5538

目录 1.HTML文件基本结构； 2.文本排版： 2.1 段落标签 2.2 换行标签（这个是单标签，只有一个） 2.3分割线标签（这个是单标签，也只有一个） 2.4标题标签 2.5文字居中标签 2.6文字段落缩进标签 3.设置文字列表： 3.1无序列表 3.2有序列表 4.HTML标记与HTML属性 4.1用align属性控制段落的水平位置 4.2用bgcolor属性...

CSS（七）——设置背景颜色和背景图像

程序员的时光

03-12

3671

目录 1.设置背景颜色 2.设置背景图片 3.设置背景图像位置 4.设置背景图片位置固定 1.设置背景颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head&a

微信小程序（一）——开发环境介绍

程序员的时光

06-09

2201

目录 1.注册账号 2.获取APPID 3.微信开发者工具 1.注册账号访问注册页面：微信公众平台 2.获取APPID 这里的AppID先要记住，后期会用到。 3.微信开发者工具下载安装之后，就可以使用了。 ...

HTML（四）——建立超链接

程序员的时光

03-03

1928

1.文字超链接文字链接是最简单的一种，我们在html文件中，用<a></a>标签就可以实现； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title&g

CSS（三）——简单的网页制作

程序员的时光

03-07

1884

通过前面的HTML和CSS的学习，我们现在可以做一个简单的网页；预览效果： 1.首先新建一个.html文件（wangye.html）: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java之父</title> <link

CSS从入门到精通——盒模型

09-11

CSS（层叠样式表）是一种用于描述网页上元素样式的语言。在CSS中，盒模型是一个...了解盒模型的概念对于理解和掌握CSS布局和样式非常重要。可以通过设置元素的宽度、高度、内边距、边框和外边距来实现不同的布局效果。