zoukankan      html  css  js  c++  java
  • 边框《CSS权威指南》读书笔记

    元素的外边距内就是元素的边框。即围绕元素内容和内边距的一条或多条线。由于元素的背景不会在元素外边距以内,所以背景在元素外边框边界处停止。

    边框有三个方面:宽度或粗细,样式或外观,颜色。

    宽度默认值为medium,通常为2px,默认none,所以不一定能看到边框。

    颜色默认是元素的前景色,如果没有前景色则是元素文本颜色,如果也没有,那么将继承父元素的文本颜色。

    边框和背景

    大多数浏览器遵循CSS2.1的定义,元素的背景是内容、内边距和边框处的背景。

    有样式的边框

    样式控制着边框的显示,没有样式,就没有边框。

    border-style定义了10个不同的非inherit样式,包括默认值none。

    double定义为两条线的宽度再加上这两条线之间的空间等于border-width值。两条线的粗细以及线之间的空间的宽度由用户代理决定。

    多种样式

    可以为给定边框定义多个样式,例如:

     p.aside{border-style:solid dashed dotted solid;} 

    结果是段落由一个实线上边框、虚线右边框、点线下边框和一个实线左边框。

    单边样式

    border-top/right/bottom/left-style

    如果三边有边框,一边无边框,有两种写法,第一种在样式里一一声明,这里不多说,说说第二种,

     h1{border-style:solid;border-left-style:none;}

    注意:必须把单边属性放在简写属性之后,如果放在简写属性之前则会覆盖单边属性的值。

    边框宽度

    为边框指定宽度有4种方法:长度值、thin、medium、thick

    边框的默认宽度为medium

    根本没有边框

    在设置边框的宽度之前一定要声明border-style(默认值是none),否则是没有边框的,也就是边框的宽度设置无效。

    边框颜色

    border-color一次可以设置四个值,也可值复制。

    透明边框

    主要是将边框的颜色设置成透明的,值为transparent,这个值用于创建有宽度的不可见边框。

    IE7之前版本不支持

    简写边框属性

    border-top/right/bottom/left:width style color;

    顺序不重要,打乱了还是一个效果。

    也可省略一些值,未声明的将会应用默认值。

     边框和行内元素

    其规则很大程度上与外边距和行内元素的相应规则相同。

    上下边,边框不影响行内元素的行高,边框可能会覆盖其它元素。

    左右边,文本会在边框旁边显示,不会覆盖左右两边的元素。

    换行时和行内元素和外边距的规则一样,可能会将航中某些部分向后移一点点,而这有可能改变位于行尾的词。

  • 相关阅读:
    .netCore+Vue 搭建的简捷开发框架 (5)
    .netCore+Vue 搭建的简捷开发框架 (4)--NetCore 基础 -2
    Vue 学习笔记
    .netCore+Vue 搭建的简捷开发框架 (4)--NetCore 基础
    .netCore+Vue 搭建的简捷开发框架 (3)-- Services层实现
    .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使用
    .netCore+Vue 搭建的简捷开发框架
    在线.net C#和vb.net 语言互转
    VB.net 通过句柄操作其他窗口
    vb.net 多线程爬虫抓取免费代理IP
  • 原文地址:https://www.cnblogs.com/Fawzia/p/5928136.html
Copyright © 2011-2022 走看看