• 【CSS学习】--- 盒子模型


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

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

     

    下面我们逐步学习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 外边距

    六、盒子模型中的计算

    七、最后

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

  • 相关阅读:
    VMware安装windows xp系统
    Linux socket编程中调用 inet_ntoa 函数产生的段错误 “Segmentation fault (core dumped)” 的原因及解决办法
    动态规划
    Hadoop中的setOutputKeyClass和setOutputValueClass
    C++ priority_queue的自定义比较方式
    BFPRT 算法(TOP-K 问题)
    map和unordered_map的区别
    关节点 与 重(双)连通图
    fd=open("./file1",O|CREAT,0666)中的0666是什么意思,它和chmod中的权限有什么区别?
    普通用户要用IPC_CREATE|0666才能运行代码
  • 原文地址:https://www.cnblogs.com/huwt/p/10540942.html
Copyright © 2020-2023  润新知