第三章 样式 盒模型

一、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:上下左右

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

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csnd_syon_javaweb/article/details/78167837
个人分类: HTML+CSS
上一篇第二章 img+列表标签
下一篇第四章 样式初始化 元素类型转换 外边距合并
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭