概述

关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。

盒子模型

元素框的最内部分是实际的内容(element),直接包围内容的是内边距(padding),内边距呈现了元素的背景,内边距的边缘是边框(border),外边距(margin)默认是透明的,因此不会遮挡其后的任何元素,对于这个图边框外的部分就是margin,边框内内容外地部分就是padding。

在CSS中我们一般习惯性的将外边距和内边距设置为0,即

* {
margin: 0;
padding: 0;
}

element元素

在CSS中,width和height是element区域的宽度和高度,对padding、border、margin增加尺寸不会影响element的宽度和高度,只会增加整个框的尺寸。

下面我们看个例子:假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素

#box {
width: 70px;
margin: 10px;
padding: 5px;
}

这样的话对于element、padding、border、margin的尺寸就更加的一目了然了,这里需要注意下的是,padding、border、margin即可以应用于一个元素的所有边,也可以应用于单独的边,还有一点就是,margin可以是负值。

内边距(Padding)

元素的内边距是再边框和内容区之间,padding属性设置用长度值或者百分比值,但不允许用负值。关于用百分比的话,有一点需要注意是,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

对于padding的设置,可以设置它的上下左右这四个边距。

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
 h1 {padding: 10px0.25em 2ex 20%;}   

上述这两种方法实现的效果是一致地,如果我们的四个边距是一样的话可以用下面这句话。

h1 {padding: 10px;}

边框(border)

元素的边框(border)是围绕元素内容和内边距的一条或多条线,可以规定元素边框的样式、宽度和颜色,这样可以创建出效果更佳出色的边框。

样式

样式是边框的最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。

border可以先设置样式,设置样式的顺序为op-right-bottom-left,设置样式的属性为border-style;

如果想设置单边样式则为:

border-top-style

border-right-style

border-bottom-style

border-left-style

宽度

边框宽度属性设置用border-width设置;

如果想单独设置各边的宽度则用:

border-top-width

border-right-width

border-bottom-width

border-left-width

对于同一个边框宽度我们可是用三种方式来设置如下,效果是一样的。

p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
p {border-style:solid; border-width: 15px 5px 15px 5px;}
p {border-style:solid; border-width: 15px 5px;}

颜色

设置边框颜色的原理与设置设置边框宽度的原理是相同的,设置颜色用border-color;

如果设置个边宽度则用:

border-top-color

border-right-color

border-bottom-color

border-left-color

外边距(margin)

margin围绕在元素边框外地空白区域就是margin,设置margin会在元素外创建额外的“空白”,margin属性接收任何长度单位、百分数值甚至负值。

在这里先讲解一个值复制的规则,就是如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值;如果缺少右外边距的值,则使用上外边距的值。

换句话说,如果为外边距指定了 3个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

如果我们想设置单边外边距属性,可以用下面的属性

margin-top

margin-right

margin-bottom

margin-left

下面这两种方式效果是一致地

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
p {margin: 20px 30px30px 20px;}

总之

在这里我也是简单将盒子模型的基础知识进行了基础的总结,这些知识只有我们经常用,慢慢的轻车熟路了,对于盒子模型的知识的讲解我可能有太不全面的地方,也请大家多多指正。

CSS学习篇核心之——盒子模型的更多相关文章

  1. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  2. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  3. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  4. CSS基础深入之细说盒子模型

    Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况 每一个盒子都有一个内容区域(con ...

  5. CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

    CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...

  6. CSS魔法(一) 盒子模型

    序言 盒子模型(橘子橘子皮) 一个盒子,包括:外边距(margin).边框(border).内边距(padding)以及最中间的内容(content). margin.padding <styl ...

  7. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  8. CSS(六):盒子模型

    一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...

  9. CSS 样式、布局、盒子模型

    Css内容: 常用样式: 字体    颜色   背景 布局: 浮动   定位   标签特性 标签盒子模型:  边距   边框 动画: 旋转 渐变 注意:Css引路径从css文件里找   Html和js ...

随机推荐

  1. Web Api 在线参考文档

    参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API

  2. selinux --chcon命令

    chcon命令:修改对象(文件)的安全上下文.比如:用户:角色:类型:安全级别. 命令格式: Chcon [OPTIONS…] CONTEXT FILES….. Chcon [OPTIONS…] –r ...

  3. devexpress GridControl 行指示列图标绘制

    Row Indicator Panel The row indicator panel represents a region displayed at the left edge of the Vi ...

  4. hdu 4381(背包变形)

    题意: 给定n个块,编号从1到n,以及m个操作,初始时n个块是白色. 操作有2种形式: 1 ai xi : 从[1,ai]选xi个块,将这些块涂白. 2 ai xi:从[ai,n]选xi个块,将这些块 ...

  5. Yii与表单交互的三种模式2

    在yii的标签中加入css或js方法:echo $form->textField($model,'starttime',array(        'onclick'=>'alert(&q ...

  6. 企业高并发的成熟解决方案(一)video(笔记&知识点)

    知识点 答案 什么是高可用(HA) 高并发发生在哪两处 app服务器会出现什么问题,有哪些解决方案? 数据库并发有什么要求? hadoop集群的作用 负载均衡的功能有哪些 负载均衡的分类 哪种负载均衡 ...

  7. lua Date和Time

    time和date两个函数在Lua中实现所有的时钟查询功能.函数time在没有参数时返回当前时钟的数值.(在许多系统中该数值是当前距离某个特定时间的秒数.)当为函数调用附加一个特殊的时间表时,该函数就 ...

  8. Laravel不同数据库的模型之间关联

    假设ModelA和ModelB之间是BelongsTo的关系 如果同属于一个数据库连接 那么 public function a(){ return $this->belongsTo(" ...

  9. 高级正则表达式技术(Python版)

    正则表达式是从信息中搜索特定的模式的一把瑞士军刀.它们是一个巨大的工具库,其中的一些功能经常被忽视或未被充分利用.今天我将向你们展示一些正则表达式的高级用法. 举个例子,这是一个我们可能用来检测电话美 ...

  10. mvc中@RenderSection()研究

    一.@RenderSection定义 HelperResult RenderSection(string name) 但是当如果使用了_Layout.cshtml做母版页的页没有实现Section的话 ...