css 1) calc() 函数的使用. 2)box-sizing:border-box
calc() 是一个css 函数, 可以实现.计算
----------------------------
1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-right 为 3px.
方案一:
前三个div 的width是 25% - 3px , border-right 是 3px; 最后一个,第四个 div 的width 是 25%, 没有 border-right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calc使用1</title>
<style type="text/css"> /***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} /*********内容********/ .all {
width: 500px;
height: 800px;
margin: 0px auto;
border: 1px solid black; position: relative;
} .cell {
width: calc(25% - 3px);
background-color: blue;
float: left;
text-align: center;
height: 30px;
line-height: 30px; border-right: 3px solid red; } /*最后一个cell*/ div.cell:nth-child(4) {
width: 25%;
border: 0px;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head>
<body> <div class="all"> <div class="footer floatfix">
<div class="cell">按钮1</div>
<div class="cell">按钮2</div>
<div class="cell">按钮3</div>
<div class="cell">按钮4</div>
</div> </div> </body>
</html>
效果:
这种: 第四个 的宽度比前三个 多 3px;
第一个: width 是 122px .border-right : 3px
第四个: width 125px;
方案二:
总的长度是 500px, 有 3个border-right . 3 * 3px = 9px . 所有 每个 div 的width 是 ( 500px - 9px ) / 4 = 122.75px
这种方案 比上面一种方案更适合题意.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calc使用1</title>
<style type="text/css"> /***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} /*********内容********/ .all {
width: 500px;
height: 800px;
margin: 0px auto;
border: 1px solid black; position: relative;
} .cell {
width: calc((100% - 3 * 3px) / 4);
background-color: blue;
float: left;
text-align: center;
height: 30px;
line-height: 30px; border-right: 3px solid red;
} /*最后一个cell*/
div.cell:nth-child(4) {
border: 0px;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head>
<body> <div class="all"> <div class="footer floatfix">
<div class="cell">按钮1</div>
<div class="cell">按钮2</div>
<div class="cell">按钮3</div>
<div class="cell">按钮4</div>
</div> </div> </body>
</html>
width: calc((100% - 3 * 3px) / 4);
显示:
查看元素:
2. 兼容写法:
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
3.方法三: 通过 设置box-sizing:border-box;进行设置
通常情况下:
1) 默认 box-sizing 是 content-box . 因此我们设置的 高度 , 宽度 指的是 content-box 的 高度,宽度, ;
2) 如果将 box-sizing 设置为 border-box . 那么我们设置的 高度 = 内容高度 + 边框高度 + 内边距高度
---------------------------------
这种 前三个div 内容宽度是 122px, border-right是 3px;; 第4个 内容宽度是 125px, 没有border .
------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing的使用</title>
<style type="text/css"> /***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} /*********内容********/ .all {
width: 500px;
height: 800px;
margin: 0px auto;
border: 1px solid black; position: relative;
} .cell {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
background-color: blue;
float: left;
text-align: center;
height: 30px;
line-height: 30px; border-right: 3px solid red;
} /*最后一个cell*/
div.cell:nth-child(4) {
border: 0px;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head>
<body> <div class="all"> <div class="footer floatfix">
<div class="cell">按钮1</div>
<div class="cell">按钮2</div>
<div class="cell">按钮3</div>
<div class="cell">按钮4</div>
</div> </div> </body>
</html>
第一个div:
第三个div:
第4个div:
css 1) calc() 函数的使用. 2)box-sizing:border-box的更多相关文章
- CSS 中 calc() 函数用法
CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
- css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- 为什么CSS中的calc函数可能会不生效？
前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...
- calc()函数的使用
calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...
- 详解calc()函数功能
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- CSS 使用calc()获取当前可视屏幕高度
来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...
- CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）
1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...
- CSS之calc()
calc() 函数支持任意CSS长度单位的混合计算,遵循标准数学运算优先级规则,可以动态计算长度值.注意,calc()函数内部的运算符两侧各加一个空白符,否则会产生解析错误. calc()使用的难点在 ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
随机推荐
- linux文件系统（一）
linux的文件系统以及文件类型一.linux 文件系统: 根文件系统(rootfs) rootfilesystem /etc,/usr,/var,/home,/dev 系统自我运行必须用到的路径:( ...
- CentOS7 安装redis4:
phpredis-4.0.12.tar.gz:下载:wget http://download.redis.io/releases/redis-4.0.12.tar.gz $ tar -zxvf ...
- GIL锁,线程池
内容梗概: 1.线程队列 2.线程池 3.GIL锁 1.线程队列 1.1先进先出队列(FIFO)import queueq = queue.Queue(3)q.put(1)q.put(2)q.put( ...
- img标签设置默认图片
为了美观当网页图片不存在时不显示叉叉图片 当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了”图片XX”的提示信息,也起不 ...
- Thymeleaf使用bootstrap及其bootstrap相关插件（二）
接上文http://www.cnblogs.com/conswin/p/7929772.html 接下来bootstrap-datepicker的简单使用. 1.引入添加js 和 css 2.然后是h ...
- Leetcode 1002. 查找常用字符
1002. 查找常用字符 显示英文描述 我的提交返回竞赛 用户通过次数301 用户尝试次数324 通过次数303 提交次数480 题目难度Easy 给定仅有小写字母组成的字符串数组 A,返回列表 ...
- 更改pip源至国内镜像
更改pip源至国内镜像 经常在使用Python的时候需要安装各种模块,而pip是很强大的模块安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以我们最好是将自己使用的pip源更换一下,这样 ...
- Qt Widgets——子区域和子窗口
QMdiArea 一般使用于主窗口QMainWindow,用于容纳多个子窗口QMdiSubWindow qt creator 3.0的设计师有MdiArea可直接拖入使用. 界面如下,图中灰色框即是个 ...
- windows7安装教程（vmware）
这步是正确安装windows的关键,如果不设置那么安装时将不能识别出磁盘,造成安装不成功. 选择No进行自定义修饰,主要是保证C盘大小合适,其他盘可在安装完成之后再调整. 后续安装步骤全自动,完全不用 ...
- 文件操作_26th,Nov 2018
文件:操作系统问应用程序或用户提供一种操作硬盘的虚拟单位 --文件时操作系统提供的虚拟单位 --应用程序或用户对文件的读写操作都是向操作系统发送指令 --文件包括文本文件和二进制文件 为何要用文件:文 ...