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. 【poj1018】 Communication System

    http://poj.org/problem?id=1018 (题目链接) 题意 要买n个产品,每个产品有m种价格和宽度(我也不知道翻译过来到底是什么?),设n个产品的宽度的最小值为B,n个产品的价格 ...

  2. wpf中textbox与textblock有什么区别

    textbox是windows.form控件,textblock是WPF控件. 功能类似,但后者功能更强,也节省系统资源 wpf是基于directx技术的系统,向后兼容性更好. textblock只用 ...

  3. NuGet打包推送批处理以及MSBuild(通用版)

    使用时注意每个批处理里面的依赖工具路径指向 源码:https://github.com/easonjim/NuGetRun bug提交:https://github.com/easonjim/NuGe ...

  4. shell命令rm删除非空文件夹

    rm -rf dirName CentOS的自带的资源管理器叫nautilus,在命令行里输入nautilus可以启动它.

  5. Ubuntu学习总结-02 Ubuntu下的FTP服务的安装和设置

    一 安装vsftpd 在安装前vsftpd,先更新apt-get下载的数据源输入如下命令: sudo apt-get update 然后安装vsftpd sudo apt-get install vs ...

  6. iOS - 装饰对象

    1.设计模式原则 多组合,少继承 类对拓展开放,对修改关闭 派生的子类接口是在编译时就静态决定的,而所有子类都会继承到相同的接口.然而,利用组合或者说装饰模式来拓展抽象类的接口,就可以在运行时动态的进 ...

  7. HTML之表格制作

    如何制作一个表格? 如何制作一个表格呢?  观察如下代码: <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. JS-事件之鼠标、键盘都能控制的下拉选框效果

    <script type="text/javascript"> window.onload=function(e){ var box=document.getEleme ...

  9. JS-鼠标经过显示二级菜单

    在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...

  10. A/D转换实验

    实验效果: