关闭

第三章 样式 盒模型

93人阅读 评论(0) 收藏 举报
分类:

一、css样式

  • 行内样式:style="width=300px;background:red"
  • 内部样式:<style type="text/css">多条css规则</style>
  • 外部样式:<link rel="stylesheet" type="text/css" href="css文件路径"/>

    三者优先级:
    采取就近原则,相同属性不同值会被覆盖。
    行内样式>内部样式>外部样式

二、 盒模型

盒模型包括:元素内容、内边距、边框和外边距。
  • 元素框的最内部分是实际的内容 直接包围内容的是内边距
  • 内边距呈现了元素的背景
  • 内边距的边缘是边框
  • 边框以外是外边距 外边距默认是透明的 因此不会遮挡其后任何元素

    注意:背景应用与内容和内边距、边框组成的区域 在css中 width 和height指的是内容区域的宽度和高度 增加内边距、边框和外边距不会影响内容区域的尺寸 但是会增加元素框的总尺寸。

    内边距:padding-top padding-right padding-bottom padding-left
    注意:padding 不允许存在负值
    padding

    • 四个值 padding:上 右 下 左
    • 三个值 padding:上 左右 下
    • 两个值:padding:上下 左右
    • 一个值:padding:上下左右

    边框:border-top border-right border-bottom border-left
    border:1px【边框大小】 solid【边框样式】 red【边框颜色】;
    边框样式:
    - none 无边框
    - solid 实线
    - dashed 虚线
    - dotted 点状
    - double 双线
    - grove 3D凹槽
    - ridge 3D垄状
    - inset 3Dinset
    - outset 3Doutset
    边框颜色

    • 十六进制颜色值 #CC00FF 可简写成#C0F
    • 英文单词 red blue pink yellow green

    外边距:margin-top margin-right margin-bottom margin-left
    注意:margin允许存在负值
    margin

    • 四个值 margin:上 右 下 左
    • 三个值 margin:上 左右 下
    • 两个值:margin:上下 左右
    • 一个值:margin:上下左右

      盒模型的大小:
      宽:元素宽度+左右内边距+左右边框
      高:元素高度+上下内边距+上下边框

    盒模型的站位大小:
    宽:元素宽度+左右内边距+左右边框+左右外边距
    高:元素高度+上下内边距+上下边框+上下外边距

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场