border

  1. 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right,

  2. border的宽度: 1px 基本上== thin, 很细的

  3. border的全部样式一次性写完的固定写法是:
    border: 宽度width + 样式style + 颜色color

  4. border属性中最重要的属性是 border-style: 是边框的样式, 因为 border-style的默认值是 :none. 是没有边框.

border 几个属性的默认值 是: border-width: medium, 大概2, 3个px. border-color: #000 是黑色. 而border-style不是没有默认值, 而是它的默认值是 border-style: none ,或者说是 border-style:0 所以如果你不指定 border-style的时候, 也是你不写border-style的时候, 是没有边框的!!

所以border样式属性的值, 你可以不写 width, 不写color, 但是一定要写 style.

border的属性值排序 正规的是按上面的那个 顺序, 但是如果你不按那个标准 顺序写, 也是可以 正确解析的..., 甚至你省略写, 只写某一个属性值, 都可以, 因为parser 是能够 区分: 颜色, 样式, 宽度的: 

颜色: 要么用#开头, 要么是那几个固定的颜色单词,
样式: 也是固定的表示样式的单词, 如solid dotted dash inset outset ridge...
宽度: 要么是数字1, 2px,,, 要么是表示宽度的那几个单词.
所以, 不管你按什么顺序写, css解析器都是能够正确识别的, 只要你单词写正确, 格式写正确, 正确的用空格分隔就好了
比如: 下面的border顺序就完全是 随意的, 同样能够正确识别/生效:

更正一下, 以前说 inset, outset等边框, 只有右下角的边框才会显式 设置的颜色, 而坐上角的边框总是黑色, 这个是 错误的, 正确的说法是: 所有的边框, 都会正确的显式设置的颜色, 即使在 (inset(这个样式是最常用的...), outset)等特殊样式下. 只是你没有看 清楚 而已...

border的emmet写法, 由于bd后面 的内容, 可能是用单词 来 表达颜色, 宽度, 样式的, 所以, 如果用bd同时加上这些单词的缩写的话, emmet是认不到属性名是border的. 所以 两种方法解决问题: 要么你先 只写bd, 展开后, 然后 再写具体的值; 要么, 你用数字表示宽度的 紧跟在bd后面 (bd后只能是 数字, ba后只能是数字, 跟单词/字母都不行, 都不能被识别). 同时加上 连字符, [比较特殊的是 如果数字后面是用# 表示 的颜色分隔符, 可以不用连字符分割]

凡是一个style属性 有多个属性值的情况, 不只是 margin的四个属性值m10-20-30-40需要用连字符, 凡是一个属性名称后, 有多个属性值需要规定的, 都应该用连字符, 如border , background...

================================================ ==
几个参考文章:

http://www.cnblogs.com/java-my-life/archive/2012/08/06/2625065.html

http://www.w3school.com.cn/js/js_datatypes.asp

http://www.w3school.com.cn/js/js_datatypes.asp

http://www.cnblogs.com/web-sheena/archive/2012/06/25/2560868.html

border边框的宽度/样式/颜色 全部值的更多相关文章

  1. 边框(border)宽度样式颜色 和基本属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. border——边框属性

    一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...

  3. css border-bottom(指定下边线的样式、宽度及颜色)

    border-bottom(指定下边线的样式.宽度及颜色) border-bottom: 值: border-bottom-style:值; border-bottom-color: 值; borde ...

  4. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

  5. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  6. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

  7. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  8. DIV+CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  9. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

随机推荐

  1. Redis的复制(Master/Slave)

    是什么 : 也就是我们所说的主从复制,主机数据更新后根据配置和策略,自动同步到备机的master/slaver机制,Master以写为主,Slave以读为主 能干嘛: 读写分离,容灾恢复 怎么玩: 1 ...

  2. [cf140e]New Year Garland

    Description 用$m$种颜色的彩球装点$n$层的圣诞树.圣诞树的第$i$层恰由$l[i]$个彩球串成一行,且同一层内的相邻彩球颜色不同,同时相邻两层所使用彩球的颜色集合不同. 求有多少种装点 ...

  3. springMVC-数据的格式化

    1.配置annotation-driven <mvc:annotation-driven ></mvc:annotation-driven> 2.在实体类上加上@NumberF ...

  4. WHMCS系统API调用

    WHMCS:域名管理系统,现在网络上很多借助此系统Shadowsocks插件+ShadowsocksR多用户服务端进行VPN的售卖,能做到流量控制等. 在对接此系统的API时,我发现了很多功能都已经实 ...

  5. 微软注册dll在dotnet开发时起到缓存的作用

    经过试验,我发觉只要是注册了dll之后,会在全局的环境中得到很好的体现,比如无需指定具体物理路径的dll引用,搜索即可引用等,同时也得到一点: 1.会缓存起这个dll先,在不重启电脑的情况,本地物理路 ...

  6. choop.php一句话脚本

    <?php$_="";$_[+$_]++;$_=$_.""; $___=$_[+""];//A$____=$___;$____++;/ ...

  7. POJ 2785 4 Values whose Sum is 0(想法题)

    传送门 4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 20334   A ...

  8. 数据结构作业——max_and_min(栈)

    Description TonyY 最近喜欢上了数学,今天他研究一个只有加号和乘号,运算数为整数, 大小在 1-9 之间的表达式,你可以任意地往里加括号,如何让表达式的值最大或 者最小? Input ...

  9. jQuery知识点总结(第三天)

    今天来总结剩余的选择器. 非常感谢评论区提问题的朋友们,有的错误是我笔误,有的问题则是知识点没有辨析解释清楚.只要有疑问,我们大家一同探究学习. 表单对象过滤选择器: ○ 选取所有可用的元素     ...

  10. f.lux for Linux安装

    1.安装f.luxsudo add-apt-repository ppa:kilian/f.lux sudo apt-get update sudo apt-get install fluxgui 2 ...