box-sizing属性

今天在做时间滑动条的时候，遇到box-sizing的问题，记录下来。

举个例子，下面的布局：

<div class="date-slider-scales">
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
<span class="date-slider-scale" style="width:33.529411764705884px"> </span><span class="date-slider-scale" style="width:33.529411764705884px"> </span>
</div>

（1）

css中没有加下面的设置：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

此时用开发工具看样式：

每隔一个date-slider-scale，宽度 35px，34px，这样反复循环。

此时盒模型

border:1px没有包含在width中。

本来每个date-slider-scale宽度为33.529411764705884px，这样，在实际中，会有1px的误差，当数量多的时候，误差会很明显。

（2）

css中加入下面的设置：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

此时用开发工具看样式：

每隔一个date-slider-scale，宽度 34px，33px，这样反复循环。

此时盒模型

border:1px包含在width中了。

这样看起来，每隔date-slider-scale的宽度一样了。当数量很多的时候，基本上没有偏差。

===================

分析：

时间： 2024-10-01 07:29:20

box-sizing属性的相关文章

Webkit Box 模型属性备忘

-webkit-box-orient: horizontal||vertical 设置或检索弹性盒模型对象的子元素的排列方式.对应的脚本特性为boxOrient.需设置容器的display:-webkit-box; CSS样式: html,body,div{ margin:0px; padding:0px;} .orient{display:-webkit-box;-webkit-box-orient:horizontal; width:600px; margin:0 auto;} .orien

用户界面Css属性

1:resize属性 div{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } resize 属性规定是否可由用户调整元素尺寸.当输入的元素超过输入框的宽度时候,自动出现滑动条,可以左右滑动. 2:Box Sizing属性:定义两个div并排 div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox

通过获取input的值来设置box的style属性

在第一个input里输入属性的名字,在第二个input里输入单位,通过点击按钮,改变下面box的属性, 比如,在第一个input里输入width,第二个输入,200px,点击按钮,box,宽就会改变 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

CSS Display属性与盒模型

由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box的呈现方式又有所不同. 本文首先引入CSS盒模型.然后通过不同的display属性分别介绍Box常见的呈现方式. Box Sizing:元素大小的计算方式 在HTML中.不论什么HTML元素都会被呈现为一个矩形.该矩形由内容.内边距.边框.外边距构成.举个样例: <style> .box-demo

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

移动端布局,C3新增属性

<html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发得得事件 例:div1.ondragstart=function(){ //拖拽前 div1.style.background="blue": } 3.ondrag 拖拽前到拖拽结束连续触发 例:div1.ondrag=function(){ //拖拽中  div1.style.bord

HTML+CSS总结/谈谈BFC与ie特有属性hasLayout

最近看了一篇总结ie常见bug的文章,里面提到ie多数的bug源于她的特有属性:hasLayout.这个属性以前也了解过一点,但没有深入去理解,于是查阅了一些相关的资料,现在在此来对这个属性作一下总结. 一.hasLayout的定义. 这里我就不一一敲了,直接复制百度的咯. 在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false.当一个元素的 hasLa

CSS3 属性组参考资料

CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,

js中获取父节点,兄弟节点及处理属性节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function getDom01(){ var div = document.querySelector(".box"); /

HTML之class属性、table元素、块级和内联元素

一:网页的组成部分: 1.结构:HTML 2.样式:CSS 3.行为:Javascript 二:介绍新的属性:class(类),直接用例子来解释该属性的用法: 给一个标签确定样式的三种方法(按样式表的位置区分): 1.行间样式表:在<body>内直接添加样式,如: < p class="box" style="color:blue">测试文字</p> 2.内部样式表: 1)在<body>内需要添加样式的属性处输入,如: