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属性的更多相关文章

  1. 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( ...

  2. jquery属性选择器(匹配具有指定属性的元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  4. h5废弃的标签和属性及新增的标签和属性

    一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...

  5. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  6. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  7. 区分width()、css('width')、innerWidth()

    #widthTest1 { width: 200px; height: 200px; background-color: #00CCFF; -webkit-box-sizing: border-box ...

  8. Zoom属性的使用介绍(IE私有属性)

      其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margi ...

  9. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  10. 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调

    [源码下载] 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...

随机推荐

  1. [转]Part1: Understanding !PTE , Part 1: Let’s get physical

    http://blogs.msdn.com/b/ntdebugging/archive/2010/02/05/understanding-pte-part-1-let-s-get-physical.a ...

  2. QT笔记之解决QT5.2.0和VS2012中文乱码 以及在Qt Creator中文报错

    转载:http://bbs.csdn.net/topics/390750169 VS2012 中文乱码 1.方法一: 包含头文件 #include <QTextCodec> ....... ...

  3. Silverlight安装成功后,提示安装

    Silverlight安装成功后,提示安装. 解决方法1: 刷新浏览器,重新打开. 解决方法2: 打开>控制面板>添加删除程序>找到Sliverlight那个,卸载它就对了,那些 S ...

  4. python 给定n,返回n以内的斐波那契数列

    方式一:函数 def fabs(n): a, b = 0, 1 while b < n: print(b, end=' ') a, b = b, a+b fabs(1000) 方式二:列表 re ...

  5. php-sql-parser sql防注入脚本

    <?php /** * SQL Parser from: http://code.google.com/p/php-sql-parser/ * License: New BSD */ class ...

  6. OpenCV从入门到放弃系列之——core模块.核心功能(一)

    Mat - 基本图像容器 世间的图像是各种各样的,但是到了计算机的世界里所有的图像都简化为了数值矩以及矩阵信息.作为一个计算视觉库,OpenCV的主要目的就是处理和操作这些信息,来获取更高级的信息,也 ...

  7. 如何挂自己的web项目(免费拥有自己的网站及域名)

    http://www.blogjava.net/qingshow/archive/2010/01/17/309846.html ------------------------------------ ...

  8. [SoapUI] 在SoapUI里用Java语言判断Excel单元格为空或者Null时出错

    我取Excel数据时先判断cell是否为"": if(cellValue != ""){     listNumber.add(i);     cellValu ...

  9. reggetvalue在xp下加载失败

    在windows 32bit的xp下使用reggetvalue会提示,无法定位程序输入点reggetvalueW于动态链接库advapi32.dll(UNICODE).reggetvalueA也是无法 ...

  10. python画图

    正弦图像: #coding:utf-8import numpy as npimport matplotlib.pyplot as pltx=np.linspace(0,10,1000)y=np.sin ...