首页 技术 正文
技术 2022年11月21日
0 收藏 986 点赞 3,258 浏览 1068 个字

一、前言:这篇只作为本人的笔记,以后慢慢再补充。

  页面中的所有元素都可以被看作一个一个的“盒子”。这些盒子都包含了:内容(content)、内边距(padding)、边框(border)以及外边距(margin)。盒子的最内部分是实际的内容,直接包围内容的是内边距,内边距的边缘是边框,边框以外是外边距。其中内边距和外边距是透明的,内边距会显示该元素的背景色,外边距显示的是父元素的背景色。如下图所示:

【CSS学习】— 盒子模型

下面我们逐步学习CSS中的盒子模型。

二、内容

  盒子中的物品即是内容,可以是文本、图片等各种信息。内容的大小由width和height定义,增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加盒子的总尺寸。

注意:

行内非替换元素将会忽略width和height属性。具体用法请查看:CSS 尺寸

三、内边距:padding

  内边距(padding)是内容区和边框之间的空间,也称为填充,width和height属性不会改变填充和外边距的大小。填充的大小使用padding属性设置。padding 属性接受长度值或百分比值,但不允许使用负值。

   百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

   可以给padding指定1个值,2个值或4个值。

/*四个方向的内边距都设置为10px*/
h3{padding: 10px;}
/*上下内边距为10px,左右内边距为5px*/
h3{padding: 10px 5px;}
/*顺时针设置各方向的内边距,即上右下左内边距,依次为10px 8px 7px 6px*/
h3{padding: 10px 8px 7px 6px;}

四、边框:border

  元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。

注意:

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

如果希望边框出现,就必须声明边框样式,否则border-style默认为none。

具体可参考:CSS 边框

五、外边距:margin

  外边距是围绕着元素边框的空白区域。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

注意:

margin属性对于

具体参考:CSS 外边距

六、盒子模型中的计算

七、最后

  这篇只作为本人的笔记,以后慢慢再补充。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,997
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,356
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,139
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848