CSS3 box-sizing的作用

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding

box-sizing属性可以为三个值之一：

  1. content-box，默认值，border和padding不计算入width之内
  2. padding-box，padding计算入width内
  3. border-box，border和padding计算入width之内
时间： 2024-11-10 11:12:15

CSS3 box-sizing的作用的相关文章

浅谈 css3 box盒子模型以及box-flex的使用

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使用以及介绍: 1.要实现水平或者垂直切分,必须先满足以下要求 i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性 ii. .panel的元素定义box-flex,来实现按比例切分.如下图:就是将三个di

CSS3 box flex 布局

1.伸缩项目的布局方式-从左到右 <ul id="Layout1" class="box"> <li>1</li> <li>1</li> <li>1</li> </ul> .box{ width: 250px; padding: 10px; background: #999; margin: 10px; } .box li{ width: 100px; height: 1

CSS3总结学习（一）：CSS3用户界面

在CSS3中,新的用户界面属性有很多,本文重点介绍resize,box-sizing,offset. 浏览器支持,如下图,图片源于W3school 1.CSS Resizing 在css3,resize属性规定用户是否可以调整元素尺寸. 注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto.hidden 或 scroll. 语法: resize: none|both|horizontal|vertical; 值 描述 none 用户无法调整元素的尺寸. both

HTML5 拖放：在相册中对照片进行排序

1. [代码]index.html     <div class="albums">    <div class="album" id="drop_1" droppable="true"><h2>Album 1</h2></div>    <div class="album" id="drop_2" droppable=&

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

CSS3之Box-sizing浅谈

前段时间在做一个界面的时候遇到一个问题,给一个长宽都是100%的页面DIV设置了border之后,这个DIV的长宽竟然超出了100%,这是怎么回事呢?这对于精通CSS的老大们来说不算问题,可是对于刚入行的我来说就显得有些木讷,于是找了很多资料了解之后才解决这种问题,这里分享一下,告诫自己不断学习的重要性. 先看问题,这是我单独把这一问题的代码拿出来做的对比(原谅我一屏幕的 "原谅色"):    从以上三张图可以很清楚的知道,要给DIV设置border之后默认情况下边界的宽度会在DIV的

针对css3特性浏览器兼容 封装less

//--------------------------------------------------- // LESS Prefixer //--------------------------------------------------- // // All of the CSS3 fun, none of the prefixes! // // As a rule, you can use the CSS properties you // would expect just by

【转载】css3 content 生成内容

content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 url: 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) string: 插入字符串 none 其实我们常用的clearfix就是应用了这个none了 css code .clearfix:after { content: ""; visibili

css3案例之calc（）的使用

calc()是个什么鬼?相信对css3研究比较深入的童鞋对这个函数的作用及用法还是比较熟悉,对于web前端新人而言,这个函数还是比较陌生.其实calc()是css3的一个新增功能,用来指定元素的长度,我们也可以把它理解为一个函数的function.今天小编就和大家分享一下CSS3的calc()的作用及具体用法. calc()能做什么? CSS3中calc()具体有什么用处呢? calc()不仅可以给元素的border.margin.pading.font-size和width等属性设置动态值,在