zoukankan      html  css  js  c++  java
  • 盒子模型

    (编程新手)

    每个html元素(标签)可以看作一个盒子。从里到外分别是:内容, 内边距, 边框, 外边距.

    01内容区

     

    最原始的width和height设置的是内容的大小。

    子元素只会出现在内容区里面。

    02边框

    设置边框接触到了三个属性。分别是:border-style,border-width,border-color。

    为这三个属性设置值的时候,可以设置1-4个不等。

    不同值使用空格分隔。

    4个值,按照从前到后的顺序分别是上,右,下,左(顺时针)。

    3个值,按照从前到后的顺序分别是: 上, 左右, 下。

    2个值,按照从前到后的顺序分别是: 上下, 左右。

    1个值,表示上下左右。

    03内边距

    背景,图片的范围是内容+内边距。

    padding-top padding-right  padding-bottom padding-left

    04外边距

    外边距是当前盒子与盒子的距离

    margin-top

    margin-right

    mergin-bottom

    margin-left

    值可以设置负数。

    值可以是auto

    注意:外边距的设置会影响其他盒子的位置。

    比如一个盒子向上移,这个盒子下面的元素也会跟着这个元素向上移动。

    垂直外边距的重叠。

    元素之间相邻外边距取最大值。而不是双方外边距之和。

    比如一个盒子下外边距设置为100px,这个盒子下面相邻盒子的上外边距也设置为100px

    这两个盒子的边距取最大值,即100px而不是这两个边距的和,即200px。

  • 相关阅读:
    广佛肇城轨年内通车 佛山西站预计2017年中通车
    MTK+Android编译
    电量检测芯片BQ27510使用心得
    放大电路的分析方法
    放大电路的分析方法
    模拟电子放大电路分析
    模拟电子技术二极管
    unsigned 整型实现无溢出运算
    hdu 5317 RGCDQ(前缀和)
    CodeForces 429 B Working out(递推dp)
  • 原文地址:https://www.cnblogs.com/JuniorProgramer/p/12814451.html
Copyright © 2011-2022 走看看