zoukankan      html  css  js  c++  java
  • CSS系列:CSS中盒子模型

      盒子模型是CSS控制页面时一个很重要的概念。所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。

    1. 盒子的内部结构

      在CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边接)和margin(外边距)4个部分组成。

      一个盒子实际所占的宽度(或高度)是由“内容 + 内边距 + 边框 + 外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin。

    2. 边框(border)

      border一般用于分隔不同元素,border的外围即为元素的最外围,在计算元素实际的宽和高时,需要将border纳入,即border会占据空间。

      border的属性主要有3个,分别是color、width和style。在使用CSS设置边框的时候,可以分别使用border-color、border-width和border-style来设置。

      对不同的边框设置不同的属性值方法:按照规定的顺序,给出2个、3个或者4个属性值。

      ◊ 如果给出1个属性值,表示上下左右4条边框的属性值,同为一个值。

      ◊ 如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性。

      ◊ 如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性。

      ◊ 如果给出4个属性值,依次是上右下左边框的属性,即顺时针排序。

      示例:

    border-style: solid;
    border-style: solid dashed;
    border-style: solid dashed dotted;
    border-style: solid dashed dotted double;

      对于border-width,border-color的属性值设置与border-style类似,支持相同的缩写形式。

    border: 1px solid #ff0000;

    3. 内边距(padding)

      padding内边距用于控制内容与边框直接的距离。

    padding: 5px;
    padding: 5px 10px;
    padding: 5px 10px 2px;
    padding: 5px 10px 2px 3px;

    4. 外边距(margin)

      margin是元素与元素之间的距离。

    margin: 5px;
    margin: 5px 10px;
    margin: 5px 10px 2px;
    margin: 5px 10px 2px 3px;
  • 相关阅读:
    Sql server 2005 restore failed
    使用Windows Live Writer发布到cnblogs
    IE7 Tab problem
    转: 编码,charset,乱码,unicode,utf8与net简单释义(续)
    移动12.1号动感地带寻宝答案
    转: 各种 lightbox 实现
    Cannot connect windows 2003 server remotely by mstsc
    boost asio 网络编程案例简单改写
    读书笔记之《程序员的自我修养链接、装载与库》
    基于OpenSSL简单实现Shamir基于身份的数字签名算法
  • 原文地址:https://www.cnblogs.com/libingql/p/4185295.html
Copyright © 2011-2022 走看看