zoukankan      html  css  js  c++  java
  • 10与元素亲密接触:盒元素(the box model)

    line-height属性可以设置文本的行间距,可以用像素、em或百分比等于字体大小有关的值定义行间距line-height: 1.6em;(行间距为字体大小的1.6倍)

    CSS把每一个单一的元素看作是一个盒子。每个盒子由内容区及可选的补白、边框和边界组成。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的,本身没有颜色或修饰。如果两个盒子相邻,边界就相当于它们之间的空间,边界也是透明的,本身没有颜色或修饰。边界是元素之间的空间,而补白是内容周围多出来的空间。

    用CSS添加边框

    .guarantee{

      border-color: black;

      border- 1px;

      border-style: solid;

    }

    padding属性可以用来设置补白大小,这个属性可以设置成多少像素或边框里面部分的百分之几。padding: 25px;在左侧添加补白padding-left: 80;

    margin属性可以用设置边界大小,可以用百分比或像素定义边界。margin: 30px;只在右侧增加边界margin-right: 250px;

    background-image属性可以给任何元素添加背景图像,但不能用它在页面中添加图像(此时应该用<img>)。background-img: url(XXXXX);background-position属性可以设置背景图像的位置,可以用像素、百分数或top、left、right、bottom、center这些关键字。background-position:top left;background-repeat属性可以用来控制平铺效果,可以设置为repeat、no-repeat、repeat-x、repeat-y、inherit。backgroud-repeat: repeat;

    border-style属性用来控制边框的外观,一共有8种边框样式,solid、dotted、double、dashed、groove(看起来像凹进页面里)、inset(像是嵌入到页面中)、outset(像是从页面升起的一块凸处)、ridge(是页面中凸出的边界)。

    border-width属性用来控制边框宽度,可以用关键字thin、medium、thick或像素值定义宽度。

    border-color属性用来设置边框颜色,可以用颜色名称、rgb值或十六进制代码定义颜色。

    和边界和补白一样,也可以定义任何一侧(上、下、左、右)的边框样式、宽度或颜色。border-top-color:black;

    向应用一种样式到多个元素时用类。需要应用样式的只是一个元素并且页面上只有一个,就用id。严格来说,id属性是命名唯一的元素的。一个元素不能有多个id,而且同一页面中不能有一个以上的元素用同一个id。要通过一个元素的id选择它,在id前面叫一个“#”(在类中类名称之前用一个“.”)。类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。一个元素只能有一个id,但可以属于几个类。

    样式表的顺序很重要,一个样式表会覆盖在它之前链接的样式表中的样式,即最下面的样式表优先权最高。

    <link>元素有一个叫做media的属性,可以用来定义样式文件所需要的设备类型,screen、print、handheld。

    <link type="text/css" rel="stylesheet" href="XXX" media="screen" />

  • 相关阅读:
    查看python中SQLite版本和sqlite3版本
    ubuntu系统安装与卸载
    CentOS下如何使用yum查看安装过的软件包
    【linux】CentOS7 升级sqlite3
    什么是Python的metaclass
    Python
    Python对字典分别按键(key)和值(value)进行排序
    python 用正则表达式去除特殊字符的两种方法
    从思维导图中学习javascript第五章字符串函数
    从思维导图中学习javascript第三章数组
  • 原文地址:https://www.cnblogs.com/dingzibetter/p/6109019.html
Copyright © 2011-2022 走看看