整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一张图读懂CSS核心概念-盒子模型

一张图读懂CSS核心概念-盒子模型

天我要给大家介绍一下CSS里面的一个核心概念:盒模型,box model。视频讲解

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


CheatSheet

Box model 盒子模型CheatSheet 链接:https://pan.baidu.com/s/1yJCmqpBVQKelITDgO2BCsA 提取码:8wtv 复制这段内容后打开百度网盘手机App,操作更方便哦

一个web页面是由众多html元素拼凑而成的,而每一个html元素,都被解析为一个矩形盒,而CSS盒模型就是这种矩形盒的解构模型。无论是div、span、还是a都是盒子,在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键。

什么是CSS盒模型呢?盒模型由margin、border、padding、content组成。如图就好像快递盒子一样

  • Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

标准盒模型

在标准模型中,如果你给盒设置 width 和 height,实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

替代(IE)盒模型

你可能会认为盒子的大小还要加上边框和内边距,这样很麻烦,而且你的想法是对的! 因为这个原因,css还有一个替代盒模型。

默认浏览器会使用标准模型。如果需要使用替代模型,您可以通过为其设置 box-sizing: border-box 来实现。

简单来说,box-sizing的作用就是告诉浏览器:CSS属性width和height是用于设置哪一种box的尺寸,在W3C标准中,box-sizing的值仅有content-box和border-box

么理解盒子模型?

盒子模型是样式表(css)控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法,才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子,占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置。盒子模型是由内容、边框、间隙(padding)、间隔(margin)组成,他们的关系如下图所示:

盒子实际宽度(高度)=内容(content)+边框(border)+间隙(padding)+间隔(margin)。对于任何一个元素设置width和height控制内容大小,也可以分别设置各自的边框(border)、间隙(padding)、间隔(margin)。灵活设置这些盒子的这些属性,可以实现各自排班效果。

border

border是元素的外围,计算元素的宽和高要把border加上特别是特殊网站页面(比如说活动专题页面等)上,这一点是很多新手忽略的地方。border有三个主要属性,color(颜色)、width(粗细)和style(样式)。

1、color主要是指定border的颜色,一共有256的3次方种颜色供我们选择。通常是16进制的值,比如红色是“#FF0000”。

2、width是border粗细程度,可以设置为thin、thick和length,length为具体数值,比如说border:1px #CCC solid;其中1px指的是border的width,默认值是medium,一般浏览器解析为2像素。

3、style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等,其中none和hodden是不显示border,hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style,IE会出现兼容问题,使用时一定要注意。

padding

padding用于控制content与border之间的距离,同时设置上下左右的padding时,可以这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding,逆时针排序,margin属性也可以这样书写。

margin

margin用于控制块与块(可以理解成块级元素)之间的距离。为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离。需要注意的是IE和firefox在处理margin时有一些差别,倘若设定了父元素的高度height值,如果此时子元素的高度超过了父元素的height值,二则显示结果完全不同,IE浏览器会自动扩大,而firefox(火狐浏览器)就不会,这一点是需要注意的。

关于盒子模型先聊到这,上面总结都是最简单的,一定要熟练掌握。每天学习一个知识点,每日寄语-“不妄求,则心安,不妄做,则身安.”

关注,不迷路,每天分享大量前端知识

css中的盒子模型 css处理网页时,他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区,内边距(padding),边框,外边距(margin)组成

在浏览器中,其默认样式中存在一些body等元素存在的默认样式,比如一些外边距,内边距等,它的这些默认样式

所以在编写样式之前我们需要将默认样式取消掉,在书写代码时在style中引入下面的reset.css文件即可,下面的效果不好的话,可以百度reset.css粘贴进去。

内联元素的盒模型,设置width和height无效,水平方向的内边距可以用,内联元素可以设置 垂直方向的外边距,不会影响页面的布局,即不影响其他元素的位置,仅仅是其显示效果发生变化 可以使用边框,外边距,两个内联元素的相邻外边距会相加,垂直外边距不支持!

css中的display,通过display可修改元素类型,比如块元素转化为内联元素,内联元素转化为块元素,还可以设置为内联块元素,拥有他们的共性,可以设置宽高,但又

不独占一行,比如img标签。display:none 元素不显示,也不在页面占有位置。

visiblity visiblity:none 元素不显示,但在页面占有位置。

css盒子模型中的overflow 如果子元素大小超过父元素的大小,超出父元素的内容

会在超过父元素的区域显示,父元素默认是将溢出的内容,在父元素外边显示,通过overflow可以处理溢出的内容。比如overflow:scroll/auto,添加滚动条,来查看所有内容。

文档流 文档指的是HTML的页面,每个页面都是一个文档,文档流就是处在网页中的底层表示一个页面的位置,我们创建的元素默认处在文档流中

元素在文档流中的特点。

1.块元素在文档流中会默认独占一行,默认自上往下排列,默认宽度是父元素的100%

块元素的高度默认被内容撑开。

2.内联元素在文档流中只占自身的大小,默认从左向右排列,如果一行内容纳不了所有元素则会另起一行,接着自左向右。

在内联元素,宽度和高度默认被内容撑开。

浮动(float)

块元素在文档流中默认垂直排列,如果希望块元素水平排列,可以使其脱离文档流。

百度reset.css即可搜到去除浏览器默认样式的css文件