box-sizing 属性、min-width属性、max-width属性
1.box-sizing
这个属性是CSS3新增的属性。IE8开始兼容。box-sizing: border-box; border-box,就是边框的这个小盒。这个属性命令,width数值指的是border这个小盒的宽度,此时,padding 表现为一种“内减”,而不是原来的“外扩”。后面再任意设置边框border大小都只会 内减,而不会外扩,当页面屏幕缩小时div模块就不会掉下去。
box-sizing 属性的值还可以是:padding-box, content-box(默认),这个属性在流式布局中特别常用!
(1)没加代码之前:


padding值是往外扩大



(2)加入box-sizing:border-box;后,实际上是往里缩小,数值内减。



2.min-width、max-width属性
当盒子的宽度是百分比来指定的话,很多时候要设置最
小的宽度和最大的宽度。min-width、max-width两个属性,IE7开始兼容的。
盒子的宽度是浏览器宽度的80%,但是,最大不会超过600px,最小不会小于400px,代码如下:
;
box-sizing 属性、min-width属性、max-width属性的更多相关文章
- 25.按要求编写一个Java应用程序: (1)编写一个矩形类Rect,包含: 两个属性:矩形的宽width;矩形的高height。 两个构造方法: 1.一个带有两个参数的构造方法,用于将width和height属性初化; 2.一个不带参数的构造方法,将矩形初始化为宽和高都为10。 两个方法: 求矩形面积的方法area() 求矩形周长的方法perimeter() (2)通过继承Rect类编写一个具有
package zhongqiuzuoye; //自己写的方法 public class Rect { public double width; public double height; Rect( ...
- jquery属性选择器(匹配具有指定属性的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- h5废弃的标签和属性及新增的标签和属性
一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- 区分width()、css('width')、innerWidth()
#widthTest1 { width: 200px; height: 200px; background-color: #00CCFF; -webkit-box-sizing: border-box ...
- Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margi ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调
[源码下载] 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...
随机推荐
- Android4.0 添加一个新的Android 键值
这里添加新的键值,不是毫无凭据凭空创造的一个键值,而是根据kernel中检测到的按键值,然后转化为Android所需要的数值: 以添加一个Linux键值为217,把它映射为android的键值Brow ...
- 总结一下今天做的unity面试题(一):刚体的点击事件
按照需求,由于要模拟丧尸被击中的效果,不能使用CharactorControll组件,只能使用rigidbody组件. 首先在场景上摆好僵尸和相机的位置,这里就不给相机加脚本了,直接固定住. 然后给丧 ...
- java.sql.SQLException: null, message from server: "Host '192.168.xxx.xxx' is not allowed to connect to this MySQL server"
当你连接自己的电脑上的MySQL时,报这样的错,你可以把ip换成 127.0.0.1或者localhost ,当然前提是用户名和密码正确
- Js控制Div在浏览器中的高度
//需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...
- Java-密码加密
介绍两种密码加密的方法: 这两种很常见可以再百度随意找到. 1.摩斯密码:说道密码加密不得不提的方法.很是经典. 首先说一下他的对照表,直接上图. 核心思想就是替换明文密码,将字符对应的替换成-与.两 ...
- 全面分析 Spring 的编程式事务管理及声明式事务管理
开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...
- MySQL字符串的‘123’转换为数字的123
方法一:SELECT CAST('123' AS SIGNED);方法二:SELECT CONVERT('123',SIGNED);方法三:SELECT '123'+0;
- PHP的PDO
PDO中包含三个预定一类:PDO.PODStatement和PDOException. 1.PDO类 PDO类代表一个PHP和数据库之间的连接,PDO类所拥有的方法如下: PDO:构造器,构建一个新的 ...
- CodeUI Test:创建第一个CodeUI Test
CodeUI Test是微软自动化测试的一个比较好的项目,它的原理是获取到Windows窗口上的控件,然后针对控件的部分属性进行获取和对比,模拟对控件进行点击.双击.右键点击等事件.这样可以录制用户测 ...
- Cocos2d-x 核心概念 - 场景(Scene)
场景(Scene):构成游戏的界面 场景类的几种: 展示类场景 选项类场景 游戏场景 场景类继承自Node类