怎么border不算宽度

border设置不占用宽度

经常我们设置好了DIV或其他标签的宽度,但是一加边框,宽度就又增加了,尤其是用百分比的时候,宽度控制不好真是麻烦! 如下有一解决办法,代码如下,(新属性,兼容性不好,手机端.谷歌.火狐测试可以) -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

less算宽度加~ width: calc(~"50% - 35px");

border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上== thin, 很细的 border的全部样式一次性写完的固定写法是: border: 宽度width + 样式style + 颜色color border属性中最重要的属性是 border-style: 是边框的样式, 因为 border-style的默认值是 :none. 是没有边框. bor

duilib 修复Text控件无法设置宽度的bug，增加自动加算宽度的属性

转载请说明原出处,谢谢~~: 今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下 <Attribute name="autocalcwidth" default="false" type="INT" comment="是否自动计算宽度"/> bug出现在EstimeteSize函数,修复后的主要代码如下: SIZE CTextUI::Esti

JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 div 真正占有的宽度. JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)全都有了! var content = $(‘div’). width();//只是获取content宽度 var contentWithPadding = $(‘div’). in

JQuery--计算元素的宽度

/*width:只能计算元素的内容宽度 * innerWidth():可以获取元素的内容+padding 的宽度 * outerWidth():可以获取元素的内容+padding+border 的宽度 * outerWidth(true):可以获取元素的内容+padding+border+margin 的宽度 */ /*例子*/ /*计算产品块标签页导航条的宽度:获取所以导航项,将其宽度累加*/ var proTabs = $(".wjs_product .nav-tabs");

CSS魔法堂：重拾Border之——不仅仅是圆角

前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?".本系列将稍微深入探讨一下那个貌似没什么好玩的border! <CSS魔法堂:重拾Border之--解构Border> <CSS魔法堂:

jquery里的宽度详解

在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin).内边界(padding)和边框(border)的元素宽度.同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度.

利用css的border实现画三角形思路原理

1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较大的border相交时: 1.只有相邻边才会相交,对边是不可能相交的 2.相交区域(显然是矩形)按对角线划分成两个三角形,两个三角形分别渲染成两个边的颜色,颜色不会出现重叠的情况 3.调整四个边的宽度,加上中间区域的宽度,配以不同颜色和透明,各种简单多边形(举一反三)已经不在话下了 <html>&

CSS如何实现”右部宽度固定，左部自适应“的布局

吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽度固定为200px,左部的宽度为100%,但是真的是那么简单吗?我当时信心十足的以为真的就是这么简单的!看来,自信真的是来源于无知啊!于是马上切换到sublime开始编码了.当时,写好的第一个版本大概如下: <!DOCTYPE html> <html lang="en"&

JS 中屏幕、浏览器和文档的高度、宽度和距离

1.各种对象 window.screen - 屏幕,window - 窗口,document.documentElement & document.body.parentNode - 文档,document.body - 文档的主体. 2.各种属性(单位为px) 屏幕 window.screen.availHeight 屏幕可用高度:window.screen.availWidth 屏幕可用宽度:window.screen.height 屏幕总高度 = availHeight + 下方任务栏:w

奇葩的狐火浏览器border属性

今天接到一个bug任务,客户反映火狐浏览器访问时某个商品楼层不显示商品.我立即打开我的火狐浏览器发现没有复现这个bug,后来经过一番折腾,才发现火狐浏览器缩放到90%时,商品楼层果然就消失了,而且每台电脑都会复现,看来这就是css代码问题了而不是接口数据问题,接下来我们就来分析这段历史悠久的css代码这是火狐浏览器没有缩放下的显示效果,没有问题, 我们来看下代码每行显示5个商品,每个商品的宽度是193+1=194px(其中1px是border边框的宽度),这样一来,一行的宽度就是194X5=

Solution Set - Border Theory

我发现写 Solution Set 就不用写每道题的题意了,岂不美哉? 首先是一些奇妙结论. 定理 1(弱周期定理) 对于字符串 $S$,若 $S[:p]$ 和 $S[:q]$ 都是 $S$ 的周期,且 $p\not=q,p+q\le|S|$,则 $S[:\gcd(p,q)]$ 也是 $S$ 的周期. 证明考虑更相减损,不妨令 $q>p$,则只需证 $S[:q-p]$ 为周期.注意到 $\forall i\in[1,|S|]$,总有 \(

JS原生第六篇（帅哥）

复习按钮不可用 disabled = "disabled" || true setTimeout 只执行一次 setInterval 执行很多次递归调用 : 函数自己调用自己函数递归调用不提倡用函数名而喜欢用的是 arguments.callee 返回的是正在执行的函数本身逻辑运算符与 && 或 || 非 ! ! > && > || 2&&a

css点滴

1.vertical-align这个属性用于块元素的垂直,居中,行元素用line-height. text-align比如li span时,text-align用于上一句的li的元素时,span才会居中. 2.z-index与abslute一起用的.可以把背景的图片z-index=-1这样子,就没有问题了. 3.img src 与background的区别是: Img中可以调整宽和高,但是background你就不能改变图片的宽高了,一个可以变形,另一个不可以变形. 4.line-height:

最全的CSS浏览器兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

【转载】各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 powered by jzread.com 2. margin加倍的问题设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline; 例如: < #div id=”imfloat”>

DIV CSS 网页兼容全搞定（IE6 IE7 IE8 IE9 火狐谷歌）

CSS兼容常用技巧请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案

css兼容问题集合

css兼容问题兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值. 2.ff下容器高度限定.即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效.所以不要轻易给容器定义height. 3.

CSS对浏览器的兼容性(IE和Firefox)技巧整理

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不