CSS盒子模型

原创 2015年11月20日 15:08:09

前言

       牛腩视频中讲到了CSS盒子模型,刚开始听就蒙了,后来就想着听听可能就明白了,但是觉得不总结,就是不行,所以还是总结一下吧!

CSS模型简介

       CSS盒子模型是网页设计中经常用到的。我们常听到的属性名有:content(内容)、padding(填充)、border(边框)、margin(边界)。因为这个模型加上这些属性很像我们日常生活中的盒子,所以我们就称之为盒子模型。如图: 

                                 

         特点:每个盒子都有边框、边界、填充、内容四个属性。

        每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里面有抗震辅料厚度,边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。

        边框(border):边框就是盒子本身。默认值是零。

        边界(margin):表示盒子摆放的时候不能全部堆在一起,要留一定的空隙保持通风,同时也是为了方便取出。也被称为是外边距。

        内容(content):在网页设计上,内容一般指的是文字、图片等元素,也可以是小盒子进行嵌套。CSS盒子模型与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑破,而CSS盒子具有弹性,里面的东西大过盒子本身的时候是把盒子撑大,但是不会损坏。这也就体现了CSS模型具有弹性的优点了。

       填充(padding):就是怕盒子里装的东西损坏而添加的泡沫或者是其他抗震的辅料。也被称为是内边距。

内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且外边距可以是负值,而且很多情况下都要使用负值的外边距。

                                                       

详解:

       根据上面的图我们可以知道:元素框的最内本部分是实际的内容呢,直接包围内容的事内边距(padding),内边距和外边距之间的边缘是边框(border),外边距默认是透明的,因此不会遮挡其后的任何元素,内边距呈现出了元素的背景。

       在CSS中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

总结 

       学习的时候蒙的东西,多多总结,总结多了,自然就慢慢回了,这就是我们开始要盲人摸象,囫囵吞枣,只要迈出了第一步,慢慢的就快了!加油!



版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1614

CSS盒子模型

假设 定义一个div  width=100px; height=100px; padding=10px; margin=20px; border=5px; 那么这个div的实际所占用的宽度width...
  • Fanbin168
  • Fanbin168
  • 2014年05月28日 20:59
  • 575

用css绘制各种形状(放松一下)

自适应的椭圆border-radius它可以单独指定水平和垂直半径。 用 / 分隔这两个值。并且该属性的值不仅可以接受长度值,还能接收百分比的值。百分比的值会基于元素的尺寸进行解析,宽是水平半径的解...
  • taotaomin99
  • taotaomin99
  • 2017年06月01日 19:41
  • 101

用CSS3画出一个叮当猫

用CSS3画出一个哆啦A梦
  • wzl505
  • wzl505
  • 2017年06月06日 16:09
  • 161

CSS如何画出一个三角形

这是一个普通的 div ,一个边长为 100px 的正方形,border 宽度为 10px, 没有任何技术含量,地球人都会画。 我们知道 border 是分为 top、right、bottom、...
  • zengchao2013
  • zengchao2013
  • 2016年07月28日 17:47
  • 341

纯CSS画图——哆啦A梦

最近突然想用前端代码画图,然后就去百度找了一张哆啦A梦的图片,用DIV+CSS画,虽然最后的结果还是有些差异,不过也就差不多可以看啦~ dlam.html 哆啦A梦 ...
  • qq_29326717
  • qq_29326717
  • 2017年06月24日 13:44
  • 458

css3 做一个漂亮的分割线

在网页中我们经常会用到分割线,但是原始的分割线并不太美观,我们可以用css3的skew属性做一个美观一点的分割线: 效果: 分辨率改变: ...
  • MajorMayer
  • MajorMayer
  • 2016年03月28日 11:13
  • 3864

纯css绘制 三角形 ,箭头

1.通过css可以绘制不同方向的三角形 通过更改不同方向的边框的大小,可以实现各种形状的三角形(等边,等腰,直角,不规则三角形) 三角形尖尖的方向那一边的边框设置可以省略:即朝下的三角形(下图中第一个...
  • u011344924
  • u011344924
  • 2015年08月27日 21:36
  • 1942

纯css书签导航按钮

最近在写个网站,发现导航栏怎么写都不好看。后来在看别人的网站的时候发现了一个不错的设计,于是乎就想自己去试试如何写出同样的效果。先贴别人网站导航的效果图。 类似书签式的立体导航,瞬间就觉得这...
  • xy_ggsddu
  • xy_ggsddu
  • 2015年08月02日 18:29
  • 1488

用CSS画出三角形

随着css3.0的出现,我们可以画出越来越多比较新颖的图形,这里我介绍一下用css3画出三角形。 首先我们给个div 下面就是我们的css代码, 先看个例子#triangle{ wi...
  • jession_lin
  • jession_lin
  • 2017年03月06日 16:47
  • 109
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS盒子模型
举报原因:
原因补充:

(最多只允许输入30个字)