CSS BOX 回顾

最新推荐文章于 2023-06-21 06:45:00 发布
最新推荐文章于 2023-06-21 06:45:00 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 笔记-HTML4&5/CSS2.1&3 文章标签： CSS盒子模型 CSSBOX解析 CSS盒子剖析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crper/article/details/20549559
版权


盗用一张图..少花点时间 



做个思维导图,




盒子的计算:不管是添加border,还是padding,margin ,只要不是单一方向参数的(单一只加一边)..

CSS BOX 实际大小 = 双倍增加参数 + 原来的大小
比如: 长宽400px的盒子,添加20px的border,那实际占用的宽度是440X440,,
若是一个盒子包含border ,margin, padding , 那么实际大小 = 原来的图 + 双倍添加的border,双倍添加的padding,双倍添加的margin
比如:border,padding,margin各全局添加30px,原图是400px ,那么实际占用 = 400 + 60 + 60 +60 = 580X580

crper
关注
专栏目录
CSS温习回顾—CSS浮动
ImmortalSYM的博客
05-26 156
CSS温习回顾 CSS浮动 浮动简介 浮动主要作用是让页面中的元素可以水平排列，通过浮动可以进行水平方向布局； —通过浮动可以使一个元素向其父元素的左侧或者右侧移动，使用 float 属性设置子元素的浮动； —可选值 ​ —none： 默认值，元素不浮动； ​ —left： 元素向左浮动； ​ —right： 元素向右浮动； —注意元素设置浮动后，水平布局的等式就不需要强制成立； —元素设置浮动以后，会完全从文档流中脱离，不在占用文档流的位置，所以其下边的元素（
CSS回顾
qq_42199147的博客
09-11 1227
CSS3概述 1.什么是CSS Cascading style sheets 层叠样式表、级联样式表.简称样式表 2.CSS的作用 设置HTML网页中元素的样式 3.HTML与CSS的关系 HTML：负责网页的搭建，内容展示-----一个页面骨架 CSS：负责网页的修饰，样式的构建-----给网页化妆 4.HTML属性与CSS的使用原则 W3C建议我们尽量使用css的方式来取代HTML属性 CSS...
cssBox包 java
10-30
做截取网页并保存成方法中最完美的办法必须的包
CSS3实践之路(二):盒子模型(box Model)和边框(border)
11-02 325
.border1{ width:150px; height:80px; background-color:#6699ff; border:2px solid; border-radius:20px 5px 20px 5px / 10px 5px 10px 5px; } .circel{ background-color:#0066ff; widt...
CSS-Box
weixin_44036444的博客
10-19 822
box padding：内边框 margin：外边框 多个盒子连接在一起 靠在一起的时候，外边距只去最大的那个外边距，作为相邻的两个盒子之间的外边距。所以说外边距只会有一份不会有两份，称之为外边距重叠。 padding、margin的使用： 方法一： p{ margin-top:5px; margin-bottom:5px; margin-right:10px; ...
CSS--盒子模型(box)--使用/教程/实例
IT利刃出鞘的博客
12-19 4713
说明 本文介绍CSS中的盒子模型的用法。 盒子模型介绍 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
css的box模型_CSS Box模型
cungui5726的博客
08-17 499
css的box模型On a webpage, every element is treated as a box. The body element is a box, with other element boxes inside it. Paragraphs, headings and links are all boxes. 在网页上，每个元素都被视为一个框。 主体元素是一个盒子，里面还有...
谈谈对css属性box-sizing的了解
12-13
在了解box-sizing之前，让我们来稍稍回顾一下盒子模型，模型分为：标准盒模型+IE盒模型。那这有什么区别呢？见图所示： 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1187
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
Basic-exemples:简单的项目，回顾html和css的基本内容
03-06
CSS布局技术包括盒模型（Box Model），浮动（Floats），定位（Positioning）以及现代的Flexbox和Grid系统，它们使得创建响应式和自适应的页面布局变得简单。 JavaScript，作为这个项目中的标签关键词，是实现网页...
cssBox 包 java
06-03
java做截取网页并保存成图片方法（包括包和源码）
CSS深入剖析box（混杂盒模型、弹性盒模型）
xun__xing的博客
07-18 1194
IE6混杂盒模型、弹性盒模型一、IE6混杂盒模型1.正常盒模型2.IE6混杂盒模型二、overflow和resize1.overflow2.resize四、flex弹性盒模型1.flex和inline-flex的区别2.flex1. flex-direction2. flex-wrap3.justify-content4.align-items5.order6.align-self7.flex-grow8.flex-basis9.flex-shrink10.flex应用 一、IE6混杂盒模型 1.正常盒模型
关于CSS——box盒子
qq_27628085的博客
10-27 745
我们打开的任何一个网页，所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。 盒子模型的种类可以分为两大类： 标准盒子：一个盒子块的总宽度= width + margin(左右) + padding(左右) + border(左右) 怪异盒子：一个盒子块的总宽度=width + margin(左右)（即width已经包含了p...
CSS之盒子（Box）模型
小菜鸟的初学之路
06-04 768
Css盒子模型 学习Css盒子模型，首先就要知道Css块级元素和内连元素 块级元素：就是我们写的各个的代码块，...、、等。 内连元素：、、等 内连元素是可以包含于块级元素里面的，也就是成为一个子元素。   盒子模型的本质上是一个盒子，封装着周围的HTML元素，他包括：边框，边距，填充和实际内容。   外边框（Margin）：清除边框外的区域，外边框是透明的； 边框（Border
CSS基础知识(二）——盒子模型
最新发布
weixin_54799350的博客
06-21 7906
CSS盒子模型相关属性介绍
CSS_Box
dolola的博客
01-23 102
先偷个图 border可以加颜色显示出来比如 border: 10px solid red;
【 盒模型】css盒模型学习
我有满天星辰的博客
11-11 557
box:盒子，每个元素在页面中都会生产成一个矩形区域（盒子）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crper

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值