css3 box-sizing
时间：2015-7-22 类别：Web前端 浏览量：980
css3 box-sizing
css3 box-sizing
css3中box-sizing 用来改变 CSS 盒模型 ，从而改变元素高宽的计算方式。
一、语法
width 与 height 是内容区的宽与高， 不包括边框，内边距，外边距。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )width 与 height 包括内边距，不包括边框与外边距。
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
效果如图 ：宽度为（200+10*2+15*2）
2、border-box
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
效果如图
标签：css3
您可能感兴趣
- css3画出苹果手机（基于CSS3画一个iPhone）
- css3填充式进度条动画（CSS3样式linear-gradient的使用实例）
- css3字体怎么写（css3个性化字体_动力节点Java学院整理）
- css3实现3d效果教程（纯 CSS3实现的霓虹灯特效）
- html5+css3动画效果图（纯DOM+CSS3实现简单的小风车动画）
- css3实现3d效果教程（CSS3实现简易版的刮刮乐效果）
- css3伸缩布局及图解（利用CSS3实现自定义滚动条代码分享）
- 微信小程序图片加特效（微信小程序实现可实时改变转速的css3旋转动画实例代码）
- css3实现凸起效果（CSS3轻松实现圆角效果）
- css3最新特效（CSS3实现的文字弹出特效）
- css3独有属性（CSS3 calc会计算属性详解）
- css3过渡动画制作（CSS3中动画属性transform、transition和animation属性的区别）
- css3支持多重背景吗（真正了解CSS3背景下的@font face规则）
- CSS3动画属性animation
- css3渐变样式怎么用（CSS3 background-image颜色渐变的实现代码）
- css3动画效果图（CSS3 三维变形实现立体方块特效源码）
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品（吉善缘聚宝金蟾金蟾招财摆件）
- 招财化煞神兽，金蟾变了（招财化煞神兽金蟾变了）
- 26岁杨紫的白素贞遇上24岁鞠婧祎，哪个最美（26岁杨紫的白素贞遇上24岁鞠婧祎）
- 鞠婧祎和杨紫两种风格的女生，你心里谁比较美（鞠婧祎和杨紫两种风格的女生）
- 三千年第一美女鞠婧祎出演白素贞pk杨紫，颜值胜赵雅芝王祖贤（三千年第一美女鞠婧祎出演白素贞pk杨紫）
- 成都轨道交通13号线一期工程最新进展（成都轨道交通13号线一期工程最新进展）
热门推荐
- 微信小程序签名怎么操作（微信小程序实现简单手写签名组件的方法实例）
- vue代码统计（Vue实现计数器案例）
- google 调试vue（Vue实现Google第三方登录的示例代码）
- mysql集群是用什么搭建的（MySQL5.7 集群配置的步骤）
- react性能优化是哪个周期（React 并发功能体验前端的并发模式）
- python设计一个聊天机器人（手把手教你使用Python创建微信机器人）
- python 3.10 循环语法（Python3.4学习笔记之常用操作符,条件分支和循环用法示例）
- js tab栏案例（JavaScript实现Tab栏切换特效）
- Linux ls命令的使用（Linux ls命令的使用）
- css图片颜色提取（解析CSS 提取图片主题色功能小技巧）
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9