box-sizing position
box-sizing
属性
用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box; /* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
在CSS中,你设置一个元素的width
与height
只会应用到这个元素的内容区。如果这个元素有任何的border
或padding
,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。
box-sizing 属性可以被用来调整这些表现:
content-box
是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。border-box
告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。width = border + padding + 内容的 width,height = border + padding + 内容的 height。
position 属性
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
calc()=calc(四则运算)
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)
;
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
Bootstrap的@media
在bootstrap.css中,经常出现
@media (min-width: ...px)
样式名{
.....
}
这表示只有浏览器的屏幕宽度达到min-width时,下面的样式才会执行。
比如导航栏的navbar-left、navbar-right
.navbar-left {
- float: left !important;
- padding-left: 30px;
.navbar-right {
- float: right !important;
- margin-right: -15px;
- padding-right: 30px;
box-sizing position的更多相关文章
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS之定位布局(position,定位布局技巧)
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- css之定位(position)
1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则 ...
- css 3d box 实现的一些注意事项
Test1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- css3 display:box 属性
先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...
- 样式操作案例5-改变box的大小和位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IE兼容性问题汇总【持续更新中】
问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...
- css的初始化样式
一切为了敏捷开发: http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html CSS初始化示例代码 /* css reset www.admin1000 ...
随机推荐
- 逆向集录_00_不同程序OEP特征总结
在分析/逆向 程序时,如果事先知道这类程序的一些特征,那将会是事半功倍的: 分析/逆向 程序,和写程序不同,比喻的话:写程序像在作案,分析/逆向 程序就像是在破案,对破案来讲,重在假想和推理: 特征1 ...
- 3-51单片机WIFI学习(开发板8266底层源码介绍)
上一篇链接 http://www.cnblogs.com/yangfengwu/p/8743502.html 直接上源码:注意源码有两部分,第一部分是一开始的时候写在模块内部的,另一部分是存在手机内 ...
- 利用JavaScript去掉数组中重复项
利用JavaScript的object的特性,我们可以非常容易的实现将一个数组的重复项去掉. object的特性是:key一定是唯一的. 把数组重复项去掉: 1 将数组转换成一个object对象,数组 ...
- Lintcode373 Partition Array by Odd and Even solution 题解
[题目描述] Partition an integers array into odd number first and even number second. 分割一个整数数组,使得奇数在前偶数在后 ...
- hive:某张表进行分页
已知表myobject(objectid int) create table myobject(objectid int) row format delimited fields terminated ...
- Hive:insert into table 与 insert overwrite table 区别
创建测试表,来测试看看测试结果: create table test(name string,pwd string,createdate string)row format delimited fie ...
- 字典的update方法
>>> dict = {"name":"zara", "age": 7} >>> dict2 = {&q ...
- PHP实现统计在线人数功能示例
本文实例讲述了PHP实现统计在线人数的方法.分享给大家供大家参考,具体如下: 我记得ASP里面统计在线人数用application 这个对象就可以了.PHP怎么设计? PHP对session对象的封装 ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- Java集合框架知多少——干货!!!
Java集合框架的组成 注意:四个接口的区别 ① Collection:存储无序的.不唯一的数据: ② List:存储有序的.不唯一的数据: ③ Set:存储无序的.唯一的数据: ④ Map:以键值对 ...