box-sizing与calc()与flex
1,Syntax:
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box; /* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;
2,兼容:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
3,什么时候用?
1,设置内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-box</title>
<style>
.box {
width: 100px;
height:100px;
border: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">默认border是外边距,设置外边距的话,可以用border-box</div>
</body>
</html>
border-box.html
二,calc();
一般在流体布局上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo {
background: black;
font-size:0;
}
.box {
display:inline-block;
margin:20px;
background: #f60;
height: 50px;
width:calc(25% - 20px*2);
}
.box:nth-child(4n){
/*margin-right:0;*/
/*width:calc(25% - 30px);*/
}
</style>
</head>
<body>
<div class="demo">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
calc.html
1,这里用的是magin
2,如果用margin-right:20px,则右边就多出20px:
可以选择在父级窗口margin-right:-30px;就显示均匀了
这里注意,在使用calc的时候, width:calc(25% - 30px);这里的减号一定要用空格隔开。
三,flex布局的话,这里就讲的多了,是主流布局,在布局类下有详细的说过,可以翻看。
box-sizing与calc()与flex的更多相关文章
- 三栏布局之 css3 calc和 flex
圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...
- display:box;display:flex;弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- Flex Box 简单弹性布局
弹性盒子模型有两种规范:早起的display:box 和后期的display:flex.它可以轻易的实现均分.浮动.居中等灵活布局,在移动端只考虑webkit内核时很实用. 一.display:box ...
- CSS3-弹性盒布局(Flex Box)
弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...
- 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 ...
- less 基础+ flex
1.less 中的变量 @ 符号 引入 /*普通变量*/ @color:pinker; .styles{ color:@color; } /*选择器变量*/ @I:img; @{I}{ width: ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
随机推荐
- 我眼中的PageRank算法详解
随着互联网的发展,网络上已有的网页数量庞大,并且每天都会有很多网页发布,如何权衡这些重要度的排名是一个很重要的问题.我们今天就来了解一下PageRank算法. 首先我们要来了解一下图的概念,请看图1. ...
- Spark高级数据分析-第2章 用Scala和Spark进行数据分析
2.4 小试牛刀:Spark shell和SparkContext 本章使用的资料来自加州大学欧文分校机器学习资料库(UC Irvine Machine Learning Repository),这个 ...
- linux Apache CGI 安装配置
Apache 中的提交了一种利用扩展应用程序执行动态网页的机制. 称为Common Gateway Interface (通用网关接口)简称CGI. 本文假定已安装好linux(本文的linux版本为 ...
- Effective Java-第4章
第4章 类和接口 类和接口是Java程序设计语言的核心,它们也是Java语言的基本抽象单元.Java语言提供了许多强大的基本元素,供程序员用来设计类和接口. 13. 使类和成员的可访问性最小化 要区别 ...
- Atitit.跨语言异常转换机制 java c# php到js的异常转换
Atitit.跨语言异常转换机制 java c# php到js的异常转换 1. bizEx 直接抓取,然后js catchEX1 2. Chkec runtimeEx1 3. Other异常..J ...
- ArcGIS教程:Geostatistical Analyst 应用演示样例
Geostatistical Analyst 满足多种不同应用的需求. 下面是 Geostatistical Analyst 的一小部分应用演示样例. 探索性空间数据分析 Geostatistical ...
- 安装yii2高级应用模板
composer global require "fxp/composer-asset-plugin:1.0.0" composer create-project --prefer ...
- webpack相关资料
百度webpackhttps://www.zhihu.com/question/39290543http://xingdongpeng.com/2016/08/15/webpack-%E6%80%BB ...
- 关于 web中 使用 java.net.URLEncoder.encode 要编码两次呢 , js的encodeURIComponent 同理
因为在jsp中对中文进行了编码的时候用的是UTF-8的编码方式,而在servlet中调用request.getParameter();方法的时候使用服务器指定的原始编码格式(ISO-8859-1)自动 ...
- linux时间同步-NTP服务
作者:曹世军链接:https://www.zhihu.com/question/30252609/answer/108840850来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...