css3之box-sizing - 相关文章

【css3之box-sizing】的更多相关文章

CSS3 Flex Box（弹性盒子）

CSS3 Flex Box(弹性盒子) 一.简介弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 二.浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀. 三.CSS…

转: css3: display:box详解

示例见: css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(…

CSS3 Flex Box 弹性盒子、弹性布局

目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align-self 8. 总结 1. 概要 Flexible Box翻译过来就是弹性盒子.弹性布局,是css3中新增的一种布局方式,是当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间.…

css3 display:box

想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-). 有以下属性:box-orient 子元素排列方式(水平还是竖直) vertical horizontal inline-axis block-axis box-flex 子元素之间比例 box-align 子元素垂直对齐方式…

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与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

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

CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

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

一个简单的CSS3+js 实现3D BOX

<!doctype html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> html, body, div, span, h1, h2, h3, h4, h5, h6, p a, img, ol, ul, li { margin:0;padding:0;border:0;outline:0; } body { ma…

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

目录一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css res…

CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.p…

Box Model,边距折叠，内联和块标签，CSSReset

一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css reset…

元素操作（sizing,尺寸获取，设值，偏移算法，坐标算法）

css3的Sizing Box-sizing是css3的box属性之一,遵循css的boxmodel原理,css中box model是分为两种,第一种是w3c的标准模型,另一种是ie的传统模型,他们相同之处都是对元素极端的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系. w3c的标准box model 外盒尺寸计算(元素控件尺寸) Element空间高度 = content height +padding+border+margin El…

针对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：线上编辑工具及实用资料整理

an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 属性多浏览器兼容写法快速生成工具,非常方便. 官网地址:http://css3clickchart.com/ CSS3 Generator 比较常用的工具,常见CSS3属性都包含(Border Radius.Box Shadow.Text Shadow.RGBA.@Font Face.Multipl…

css3学习笔记之用户界面

CSS3 调整尺寸(Resizing) CSS3中,resize属性指定一个元素是否应该由用户去调整大小. 这个 div 元素由用户调整大小. (在 Firefox 4+, Chrome, 和 Safari中) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <style> div { border:2px solid; paddi…

CSS3 用户界面

CSS3用户界面在CSS3中,新的用户界面特性包括重设元素尺寸,盒尺寸以及轮廓等. 用户界面属性: resize box-sizing outline-offset 浏览器支持属性浏览器支持 resize box-sizing outline-offset Firefox.Chrome 以及 Safari 支持 resize 属性. Internet Explorer.Chrome.Safari 以及 Opera 支持 box-siz…

css3常用方法以及css3选择器

最重要的 CSS3 模块包括: 选择器框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框 CSS3 边框通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. border-radius box-shadow border-image CSS3 圆角边框在 CSS2 中添加圆角矩形需要技巧.我们必须为每个圆角使用不同的图片. 在 CSS3 中,创建圆角是非常容易的.…

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和Css3扁平化风格网页

前言扁平化概念的核心意义去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽象.极简和符号化. 示例视频效果:http://files.cnblogs.com/files/abao0/webPage.swf 截图效果:http://images.cnblogs.com/cnblogs_com/abao0/975461/o_webpage2.gif 正文 1.代码部分 ht…

CSS3中的新特性

一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o…

CSS/CSS3语法新特性笔记

CSS层叠样式表三大特性层叠性:相同的样式会覆盖继承性:属性可向下继承优先级:范围越小权重越高选择器基础选择器标签选择器 1 body { 2 color:#fff; 3 } 类选择器 1 .people‐first { 2 color:green; 3 } id选择器 1 #laowang { 2 color:yello; 3 } 通配符选择器 * { 2 margin: 0 ; 3 padding: 0 ; 4 } 高级选择器后代选择器 1 ul li { 2 list‐st…

CSS3里的display

默认值:inline 适用于:所有元素继承性:无动画性:否 none: 隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline: 指定对象为内联元素. block: 指定对象为块元素. list-item: 指定对象为列表项目. inline-block: 指定对象为内联块元素.(CSS2) table: 指定对象作为块元素级的表格.类同于html标签<table>(CSS2) inline-table: 指定对象作为内联元素级的表格.类同…

css3教程：弹性盒模型

Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeXML. 使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.本文的例子使用以下的HTML代码: <body><div id="box1">1</div><div id="box2">2<…

重温CSS3

基础不牢,地动山摇!没办法,只能重温"经典"! 1.CSS3边框:border-radius; box-shadow; border-image border-radius:r1,r2,r3,r4;(边框圆角!) r1~r4:分别为左上角,右上角,右下角,左下角半径(顺时针!缺省时:左上角.右下角相同:右上角,左下角相同) border-radius: 30px; box-shadow: x-shadow y-shadow blur spread color insert;(盒阴影)…

CSS3 Box-sizing（转载）

转载自:W3CPLUS Airen的博客:http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性之一,那他当然也遵循CSS的Box model原理,为了…

【转】CSS3 Box-sizing

box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性之一,那他当然也遵循CSS的Box model原理,为了能更好的学习和理解这个Box-sizing属性,我们有必要先了解一下CSS中Box model的原理. CSS中Box model是分为…

css3新增功能

CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器后代选择器 E F 子选择器 E>F 相邻兄弟选择器 E+F 通用兄弟选择器 E~F 1.3 属性选择器 E[attr] 选择具有att属性的E元素. E[attr="val"] 选择具有att属性且属性值等于val的E元素. E[attr~="val"] 选择具…

让 IE6, 7和 8支持CSS3的HTC文件补丁

让 IE6, 7和 8支持CSS3 IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3.但是有一个小脚本能够做到,它可以让IE支持CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等…… 如果你需要一个支持CSS3 的box content,你需要添加一行代码: behavior: url(ie-css3.htc); 代码: .box { -moz-border-radius: 15px; /* Fi…

CSS3 Box-sizing(盒子模型)

http://www.w3cplus.com/content/css3-box-sizing http://tantek.com/CSS/Examples/boxmodelhack.html box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性…

那些熟悉又陌生的 css2、css3 样式，持续复习

initial关键字: 除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素上的任何 CSS 属性. overflow : 所有主流浏览器都支持 overflow 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit&quo…