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, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...
随机推荐
- 你年纪轻轻怎么这么"不讲理"
今天在公交上遇到一出"精彩的打戏",这给我的12月份带来了一丝的"惊喜",1号就能让我碰到这样的事,看来这个月会惊喜不断啊!!!! 这精彩的戏是这样的,公交到了 ...
- session详解
什么是Session 对Tomcat而言,Session是一块在服务器开辟的内存空间,其存储结构为ConcurrentHashMap: Session的目的 Http协议是一种无状态协议,即每次服务端 ...
- 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 ,当然前提是用户名和密码正确
- Python爬网获取全国各地律师电话号
[本文出自天外归云的博客园] 从64365网站获取全国各地律师电话号,用到了python的lxml库进行对html页面内容的解析,对于xpath的获取和正确性校验,需要在火狐浏览器安装firebug和 ...
- C#中浮点数依IEEE-754标准转二进制串 (MODBUS 浮点数转换)
因工作需要,把再串口通信中浮点数与字节流的数据转换函数放在这,转发的,谢谢原作者. 今天花了一天的时间搜罗资料,为了解决一个串口编程的进制转化问题.因为串口传送的浮点数据格式与IEEE-754标准(3 ...
- Boost学习笔记(三) progress_timer
progress_timer也是一个计时器,它继承自timer,会在析构时自动输出时间,省去timer手动调用elapsed()的工作,是一个用于自动计时相当方便的小工具. #include < ...
- 浏览器禁止js打开新窗口
在项目中,有个需求是需要ajax获取新地址,然后去打开该页面地址,这样会被浏览器拦截,可以采取以下方式:1.再ajax请求先前,先创建一个新窗口 var newTab = window.open('' ...
- 28.zookeeper单机(Standalones模式)和集群搭建笔记
zookeeper单机(Standalones模式)和集群搭建: 前奏: (1).zookeeper也可以在windows下使用,和linux一样可以单机也可以集群,具体就是解压zookeeper-3 ...
- Oracle数据库体系结构、启动过程、关闭过程
一.Oracle数据库体系结构体系结构由下面组件组成:1.Oracle服务器(Server):由数据库实例和数据库文件组成,另外在用户建立与服务器的连接时启动服务器进程并分配PGA(程序全局区) (1 ...
- JFinal 国际化
要支持国际化,需要在容器初始化的时候配置一个处理国际化的全局拦截器.比如可以使用 com.jfinal.i18n.I18nInterceptor 配置拦截器: public class MppConf ...