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

            在CSS中主要有以下几种盒模型:inline、inline-block、block、table、absolute position、float。

     

    W3C的标准盒模型

    外盒尺寸:
    element 空间高度 = 内容高度 + 内距padding + 边框border + 外距margin;
    element 空间宽度 = 内容宽度 + 内距padding + 边框border + 外距margin; 
    内盒尺寸:
    element 空间高度 = 内容高度 + 内距padding + 边框border;
    element 空间宽度 = 内容宽度 + 内距padding + 边框border;
     

     CSS3盒模型

    box-sizing
    1
    box-sizing: content-box|border-box|inherit;
    描述
    content-box

    这是由 CSS2.1 规定的宽度高度行为。

    宽度和高度分别应用到元素的内容框。

    在宽度和高度之外绘制元素的内边距和边框。

    border-box

    为元素设定的宽度和高度决定了元素的边框盒。

    就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

    inherit 规定应从父元素继承 box-sizing 属性的值。

     

    overflow

    描述
    visible 默认值。内容不会被修剪,不添加滚动条,会呈现在元素框之外,而且clip属性设置将失败。
    hidden 内容会被修剪,并且其余内容是不可见的。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容,底部出现滚动条框。不管内容是否溢出overflow-x出现横向滚动条,overflow-y出现纵向滚动条。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,底部不会出现滚动条框。
    inherit 规定应该从父元素继承 overflow 属性的值。

     

    resize

    规定是否可由用户调整元素的尺寸。

    如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

    描述
    none 用户无法调整元素的尺寸。
    both 用户可调整元素的高度和宽度。
    horizontal 用户可调整元素的宽度。
    vertical 用户可调整元素的高度。

     

    outline

    outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
    1
    outline:color style width offset inherit;
    outline 简写属性在一个声明中设置所有的轮廓属性。
    outline轮廓线不会占据空间,也不一定是矩形。但是创建的各边外轮廓都是一样的,不能设置border-top之类的属性。
     

     

     





  • 相关阅读:
    toj 2975 Encription
    poj 1797 Heavy Transportation
    toj 2971 Rotating Numbers
    zoj 2281 Way to Freedom
    toj 2483 Nasty Hacks
    toj 2972 MOVING DHAKA
    toj 2696 Collecting Beepers
    toj 2970 Hackle Number
    toj 2485 Card Tric
    js页面定位,相关几个属性
  • 原文地址:https://www.cnblogs.com/staven/p/85da25b313734676a42a720d52b0ada1.html
Copyright © 2011-2022 走看看