【CSS3】css3:box-sizing属性

本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围。

浏览器的支持情况

Browser Suppored Notes
Internet Explorer Yes version 8.0
Mozilla Firefox Yes 29.0
2.0 -moz-
chrome Yes 10.0
4.0 -webkit-
opera Yes version 9.5
Safari Yes 5.1
3.2 -webkit-

box-sizing属性

box-sizing属性可以有三个值:content-box(defalut),border-box属性。

  1. content-box,border和padding不计算入width之内。
  2. border-box,border和padding计算入width之内。

  <style>
      div{
        width:100px;
        height:100px;
        border:20px solid yellow;
        padding:20px;
        background:green;
        background-clip:content-box;

      }
      .content-box{
        box-sizing:content-box;
        }
      .border-box{
        box-sizing:border-box;
      }
    </style>

效果截图:

时间: 2024-12-19 16:58:42

【CSS3】css3:box-sizing属性的相关文章

box-sizing(CSS3的box属性)

box-sizing(CSS3的box属性)[转]:http://blog.csdn.net/looksun/article/details/8755610

css3中的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

css3弹性盒模型属性整理

display:box;是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 设置父容器样式display:box;  .father{ margin: 0 auto; width: 1000px; height: 200px; border:1px solid red; /* 设置父元素的显示方式 */ display: -webkit-box; /* Chrome ,Opera, Safari *

css3之其他的属性

1,自由缩放属性resize 这个属性真的很好玩呢,允许用户可以通过拖动的方式来修改元素的尺寸来改变元素的大小. 记住,得加浏览器的前缀 适用对象:可以使用overflow属性的任何元素 取值: none:不可以拖动 both:可以修改元素的宽度和高度 horizontal:只能修改宽度 vertical:只能修改高度 inherit:继承父元素的属性值 2,外轮廓属性outline 效果:与border相似,但与border不同的是,外轮廓线不占用网页布局空间,外轮廓是一种 动态的样式,只有元

CSS3里面的高级属性

-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景.要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色. 想要禁用这个高亮,设置颜色的alpha值为0即可. 示例 设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持:

Selectivizr-让IE6~8支持CSS3伪类和属性选择器

一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性测试demo 二.简介 selectivizr是一个JavaScript工具,使IE浏览器也可以支持CSS3伪类以及属性选择器,使用很简单,只要把js include到页面上,然后你就可以(- o -)~zZ补觉了. 优点在于: 1. 让老的IE浏览器支持19个CSS3伪类,2个伪元素,以及所有的属

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

CSS3实战1-文本属性text-shadow的用法

text-shadow 定义文本阴影或模糊效果.text-shadow属性在css2中已经定义了,但是在css3中又重新定义了,并且增加了不透明度的效果. 基本语法 text-shadow:none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>? 默认值:无 适用于:所有元素 动画性:是,除了内.外阴影切换时 计算值:指定值 取值: none: 无阴影

css3 display:box 属性

先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ position:relative; -webkit-box-flex: 1; box-flex: 1;} 一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ

转: css3: display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分htm