欢迎访问欧博网址!

大庆信息网:深入明白CSS盒子模子

欧博网址2个月前14

盒模子

盒模子是CSS的基石之一,它指定元素若何显示以及(在某种程度上)若何交互。页面上每一个元素都被看做一个矩形框,框由元素的内容,内边距 (padding),边框 (border)和外边距 (margin)组成,如下图所示。

内边距泛起在内容区域周围,若给元素上添加靠山,靠山将会应用于由内容和内边距组成的区域。添加边框,会在内边距的区域外加一条线,这些线有多种样式,后面会有所先容。在边框外边是外边距,外边距是透明的,一样平常使用它控制元素之间的距离

CSS2.1还包罗outline属性,绘制在元素框之上,不影响元素的巨细或定位。大多数现代浏览器(包罗IE8)都支持outline,但IE7和更低版本不支持。

内边距、边框、外边距都是可选的,默认值为零。但许多元素将由用户署理样式表设置外边距和内边距,以是将元素的margin和padding设置为零,对写整个样式有辅助,这项事情一样平常由全局reset举行。

1. IE和盒模子

IE的早期版本,包罗IE6,在混杂模式中使用自己的非尺度盒模子。浏览器的width属性不是内容的宽度,而是内容,内边距和边框的总和。添加的内边距越多,给内容预留的空间就越少。

在CSS3中,可通过box-sizing属性界说使用哪种盒模子,但除了一些异常特殊的场所很少使用该属性。

现在最好的解决方案是回避这个问题。也就是,不给元素添加指定宽度的内边距,而是实验将内边距或外边距添加到父元素或子元素。

2. box-sizing

box-sizing属于CSS3内容,属性值包罗:content-box, border-box, inherit。该属性用于更改预设的CSS盒模子宽度和高度的盘算方式,可使用该属性模拟不正确支持CSS盒模子规范的浏览器行为。

  • content-box
    • 凭据CSS尺度的起始值和预设值(尺度盒模子,现在浏览器默认支持该属性)。width和height只包罗内容自己的宽度和高度。元素框的巨细=width/height+padding+border+margin
  • border-box
    • 该属性值下,width和height属性包罗内容(content),内边距(padding)和边框(border)。
  • inherit。指定 box-sizing 属性的值,应该从父元素继续

**浏览器支持:**IE8及以上,Chrome 10.0以上,FireFox 29.0 以上,Safari 5.1以上,Opera 9.5以上。

示例:

div	{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Opera */
    width:50%;
    float:left;
}

3. margin

margin属性用于设置外边距,下面我们将讲述margin一些对照有意思的知识点

3.1 margin与容器尺寸

在尺度盒模子中,border-box部门,即包罗border,padding,content的方框代表可视尺寸(clientWidth)。外边距加上可视尺寸则是“占有尺寸”(张鑫旭大神自命名)。

在一些条件下,通过设置margin属性可以改变可视尺寸和“占有尺寸“的巨细。

1. margin改变可视尺寸

​ 适用范围:

  • 适用于没有设定width/height的通俗block水平元素(float,absolute/fixed,inline水平,table cell元素。..)

  • 只适用于水平偏向尺寸

    可利用该特征实现一侧定宽自适应结构和两头对齐结构效果。

2. margin改变”占有尺寸“

​ 适用范围:

  • block/inline-block水平元素均适用

  • 与有无设定width/height值无关

  • 适用于水平偏向和垂直偏向

    可利用该效果实现转动容器上下留白及等高结构效果。

3.2 margin与百分比单元

  1. 通俗元素的百分比margin都是相对于容器(父级元素)的宽度盘算。

  2. 绝对定位元素的百分比margin都是相对于第一个界说祖先元素(relative/absolute/fixed)的盘算宽度

    1. 在IE中,绝对定位元素的百分比margin是相对于第一个界说祖先元素的宽度盘算
    2. 在Chrome/FireFox/Opera中,绝对定位元素的百分比margin是相对于第一个界说祖先元素的border-box的宽度盘算的。Opera浏览器由于作者是windows系统,安装的windows版本,感受显示得很新鲜。没有显示出数值,不方便得出结论,希望有读者能够测试了在谈论区反映一下,配合探讨之,谢谢!

3.3 margin重叠

margin重叠,即外边距叠加,是一个对照简朴的观点。然则,在实践中对网页举行结构时,它会造成许多混淆。简朴地说,当两个或更多垂直外边距相遇时,它们将形成一个外边距。这个外边距的高度即是两个发生重叠的外边距的高度中的较大值。

1.3. 1 margin重叠特征
  1. 只有通俗文档流中的块框的垂直外边距才会发生外边距叠加(不包罗float框和absolute框以及行内框)
  2. 不思量writing-mode,只发生在垂直偏向(margin-top/margin-bottom)
1.3.2 margin重叠的3种情境

margin重叠3种情境

  1. 相邻的兄弟元素
  2. 父级和第一个/最后一个子元素
    1. margin-top重叠其他条件
      • 父元素非块状格式化上下文元素
      • 父元素没有border-top/padding-top设置
      • 父元素和第一个子元素之间没有inline元素分开
    2. margin-bottom重叠其他条件
      • 父元素非块状格式化上下文元素
      • 父元素没有border-bottom/padding-bottom值
      • 父元素和最后一个子元素之间没有inline元素分开
      • 父元素没有height,min-height限制
    3. 干掉margin-top重叠
      1. 在父元素加属性,overflow:hidden;
      2. 父元素设置border-top/padding-top值
      3. 父元素与第一个子元素之间插入inline元素,如空格
    4. 干掉margin-bottom重叠
      1. 在父元素加属性,overflow:hidden;
      2. 父元素设置border-bottom/padding-bottom值
      3. 设置height相关声明(min-height以及height。max-height不起作用)
  3. 空的block元素(自己的上下外边距叠加)
    • 重叠其他条件
      • 元素不能有border/padding值
      • 内里没有inline元素
      • 没有height,或者min-height
1.3.3 margin重叠盘算规则
  1. 正正取大值
  2. 正负值相加
  3. 负负最负值
1.3.4 margin重叠的意义
  1. 延续段落或列表之类,若是没有margin重叠,首尾项间距会和其他兄弟标签1:2关系,排版不自然
  2. web种任何地方嵌套或直接放入任何裸div,都不会影响原来的结构
  3. 遗落的空随便多个p元素,不会影响原来的阅读排版

1.4 margin auto

作用机制:自动填充元素占有空间的剩余空间,可利用其实现水平居中:

div{
	width:300px;
	margin:0 auto;
}

注重:margin实现居中,必须盘算后的距离不能是负值。

margin 若何实现垂直结构?

  1. 改变流(但水品不再居中)
.father{height:200px; width:100%; writing-mode:vertical-lr;}
.son {height:100px; width:500px; margin:auto;}

2.绝对元素的margin:auto居中(IE8+)

.father{ height:200px; position:relative;}
.son{ position:absolute; top:0; right: 0; bottom:0; left:0;
	width:500px; height:100px; margin:auto;} 

1.6 CSS margin失效情形

1.inline水平元素的垂直margin无效

条件:

  • 非替换元素(如img)
  • 正常誊写模式

2.margin重叠

3.display:table-cell与margin

margin可应用于所有元素,除了diplay为table相关类型(不包罗table-caption,table以及inline-table)的所有。甚至可应用于::first-letter

4.绝对定位元素非定位偏向的margin值“无效”

绝对定位元素的margin值一直有用,但由于设置了绝对定位,脱离了文档流,以是看不出效果。

5.鞭长莫及导致margin无效,一些情况下,如浮动时,margin无效可能是不够大。

6.内联特征导致margin无效,例如对于图片,使用margin的负值定位,不会泛起在容器之外。

1.7 领会margin-start/margin-end属性

Chrome/FireFox现在支持该属性,IE不支持

margin-start

  • 正常流向margin-start与margin-left等效,两者重叠不累加。
  • 若是水平流是从右往左,margin-start等同于margin-right;
  • 在垂直流下(writing-mode:vertical-*),margin-start等同于margin-top;

margin-end

  • 正常流向margin-end与margin-right等效,两者重叠不累加。
  • 若是水平流是从右往左,margin-end等同于margin-left;
  • 在垂直流下(writing-mode:vertical-*),margin-end等同于margin-bottom;

4. border

4.1 border-width 不支持百分比

盒子模子种,padding,margin都支持百分比,然则border,即边框宽度不支持百分比;来自张鑫旭大神的明白:border-width不支持百分比是由于其语义限制,由于可以看到平板和手机两个差别显示巨细的边框巨细并不凭据元素长宽转变而转变。

4.2 领会种种border-style类型

  • solid (实线)

  • dashed (虚线)

    在Chrome/FireFox中,虚线边框的宽高为3:1,IE为2:1。

  • dotted(点线)

    在Chrome/FireFox中,点的形状为方形,IE为圆形。

  • double(双实线)

    双线宽度相等,中心空缺距离$\pm$1

  • inset(内凹)

4.3 border-color与color

border-color默认继续自color,即未指定color时border-color与color一样。类似的另有box-shadow,text-shadow,outline。

5. padding

5.1 padding与容器尺寸

当width auto或者box-sizing为border-box,然则padding巨细超过宽高时,padding会影响元素尺寸。

对于block元素

  • padding值暴走,一定会影响尺寸
  • width非auto,padding影响尺寸
  • witdh为auto或box-sizing为border-box时,同时padding值未暴走,不影响元素尺寸。

对于内联元素

水平padding影响尺寸,垂直padding不影响尺寸。但会影响靠山色。

5.2 padding负值与百分比值

padding不支持任何负值,padding的百分比相对于宽度盘算。

inline元素的百分比值

  • 同样相对于宽度盘算
  • padding会断行
  • 默认的高度宽度细节差异

空inline元素+padding高端也不等。是由于inline元素的垂直padding会让"幽灵空缺节点"展现,也就是规范中的“strut”泛起。这时通过设置font-size:0规避

span{padding:50%;font-size:0;}

5.3 标签元素内置padding

button表单按钮设置padding:0,Chrome是ok的,然则在FireFox中左右依然会有padding,通过设置属性-moz-focus-inner规避;IE浏览器中,IE7文字越多左右padding逐渐变大,通过overflow属性设置规避。

button::-moz-focus-inner {
	padding:0;
}
button{padding:0;overflow:visible;}

对于button,padding与高度盘算不兼容,以是一样平常通过label标签实现button,而button通过绝对定位到页面之外或者z-index隐藏在页面下方。

<button id="btn"></button>
<label for="btn">按钮</label>

label{
    display:inline-block;
    line-height:20px;
    padding:10px;
}
,

sunbet

Sunbet是Sunbet公司在亚太地区与河南安泰基坑支护联合开设的线上平台,Sunbet具备双方各自领域的优势整合,无论在资金、技术、服务、地域文化上的沉淀和积累,都是业界中出类拔萃.

上一篇 下一篇

猜你喜欢

最新文章
热门文章
热评文章
随机文章
热门标签