逆战!标准盒模型的理解

概述:

标准盒模型是我们网页布局的基石,从盒子的内容到盒子的外围。

分别是内容content,内填充padding,边框border,外边距margin。

盒模型具体的css属性:

1 内填充padding属性

2外边距margin

Padding用法:padding主要用于控制子元素在盒子内部的位置关系。

如上图,我们可以通过padding控制盒子1在盒子2里的位置。

通过padding我们能够控制子元素在父元素盒子中的位置。

padding属性四个值的时候: 上 ,右,下,左

padding属性三个值的时候:上,左右,下

padding属性两个值的时候‘:上下 ,左右

padding属性一个值的时候:四周都padding’

注:需要注意的是如果想让盒子保持原有的大小,需要在宽高的基础上减掉padding!因为padding会打盒子撑大!

padding不会对背景图的位置造成影响,且padding不能为负值。

margin的用法:控制当前元素与其他同级元素的位置关系。

如图,这样两个盒子我们可以用margin控制盒子1和盒子2的位置关系。

margin的设置方法的padding一样,不过这里需要注意的是margin可以设置为负值。

margin不会改变盒子的大小,所以我们在使用的时候也不需要在原本的宽高上减去margin值。

对于盒模型的理解就到此为止了 欢迎大家补充。

原文地址:https://www.cnblogs.com/wew3/p/12344103.html

时间: 2024-10-21 11:17:38

逆战!标准盒模型的理解的相关文章

关于盒模型的理解

关于盒模型的理解 1.什么是盒模型 盒模型是网页布局的基石,从盒子的内部到盒子的外围. 盒子的内容主要包过:内容 congtent(图片.文本.视频.小盒子...) 内填充(补白)padding (让文本和盒子的周围产生间距相当于盒子里面的泡沫) 具体的css属性 盒子本身(border) 外边距 margin. 下图为标准的盒模型: 2.关于盒模型css相关属性的介绍与使用 (1)content:在整个盒模型中存放相关内容,主要包过图片.文本.视频.小盒子... (2)padding:让内容和

盒模型的理解

转眼已经是2020年的二月下旬了,一场疫情,改变了我之前的生活节奏.年过完了,疫情任然没有结束.在家隔离的这段时间,对我来说也是一个机会,因为不能出门反而使我能够静下心来安心认真的学习,学习充实了我的生活.最近我学习了盒模型,想和大家分享下对盒模型的理解,希望通过和大家的交流来补充自己的不足之处. 盒模型是css中一个重要的概念,是网页布局的基石,想要写好一个web项目,那就必须深入了解盒模型. 盒模型主要是由: 内容(content).内填充(padding).边框(border).外填充(m

标准盒模型与IE盒模型

1. 盒模型的组成 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容.盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 盒模型是CSS中一个重要概念,文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性.盒模型属性有: margin:外边距 padding:内边距 border:边框 content:内容 2. 标准盒模型 标

padding标准盒模型和怪异盒子模型

我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意思,第二讲不明白 标准盒模型: 我们先摆出HTML和CSS代码: 1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--&g

IE盒模型和标准盒模型

标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是w3c标准盒模型    ie5极其以下都是ie盒子模型,ie6.ie7.ie8在混杂模式下ie盒模型,在标准模式下是w3c标准盒模型(注意:ie6在混杂模式下一定是Ie盒模型,而ie7.ie8在混杂模式下不一定是ie盒模型) css3中的box-sizing content-box w3c标准盒模型

CSS盒模型重新理解篇

最近比较闲,思索着怎么提高下JS技术,于是找到了昵称为豪情的这哥们的一篇文章,应该是哥们吧,详细了解了下,发现其中的试题CSS部分有些做起来很吃力,于是乎各种google恶补盒模型,找到了这哥们的一文章<纯CSS无hacks的跨游览器多列布局>,应该是算是中文版吧,翻译辛苦了,这个是原文出处equal height columns article.重新理解了下盒模型.以前出现的等高布局是通过JS来进行解决的,看来CSS还是没吃透,这回算是彻底悟透了.各种布局尽管来吧,在被前端搞中不断提升.:D

对css盒模型的理解

介绍一下标准css的盒子模型?低版本IE的盒子模型有什么不同的? 1.有两种:IE盒子模型(怪异模式).W3c盒子模型(标准模式). 2.盒模型组成:内容(content).填充(padding).边界(margin).边框(border).3.区别:IE的content部分把border和padding计算了进去 应用场景: (1)表单:表单中有一些input元素其实还是展现的是传统IE盒模型,带有一些默认的样式,而且在不同平台或者浏览器下的表现不一,造成了表单展现的差异.此时我们可以通过bo

CSS盒模型深入理解

前言 所有文档元素都生成一个矩形框,这称为元素框(element box),它描述了一个元素在文档布局中所占的空间大小.而且,每个框影响着其他元素框的位置和大小 宽高 宽度width被定义为从左内边界到右内边界的距离,高度height被定义为从上内边界到下内边界的距离 在CSS中,可以对任何块级元素设置显式高度.如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样:如果指定高度小于显示内容所需高度,则会向元素添加一个滚动条.如果元素内容的高度大于元素框的高度,

认识W3C标准盒子模型,理解外边距叠加

概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里. 每个矩形框都是一个盒模型. 每个盒模型都由内容区域(content).边框(border ).内填充(padding)和外边距(margin)组成. 这四个属性都可以独立存在.也就是说,一个盒子可以只有content,也可以只有border,也可以只有padding,也可以只有margin. (图片来自网络) 关于margin: 可以有负值 Negative v