当前位置:Gxlcms > html代码 > 盒模型CSS_html/css_WEB-ITnose

盒模型CSS_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:30人阅读

盒子的内心世界

1.模型

通过CSS的眼睛

  • 在CSS看来,HTML的所有元素都被看成了盒子:段落,标题,块引用,列表,列表项等。甚至内联元素。
  • 盒子的组成

  • 内容区(content):包含内容(文本或图像)
  • 内边距(padding):可选的
  • 边框(border):可选的
  • 外边距(margin):可选的
  • 示图

    2.简单介绍

    内容区

  • 内容区会存放文本或图像。
  • 在浏览器的周围,看不到上图其周围的边界。
  • 内边距

  • 内边距是透明的,没有颜色,也没有自己的装饰
  • 通过CSS,可以控制整个内容区周围内边距的宽度
  • 甚至可以控制任意一边的(上,下,左,右)的内边距宽度
  • 边框

  • 边框可以有各种不同的宽度,颜色,样式
  • 外边距

  • 外边距也是透明的,没有颜色或装饰
  • 3.定制盒子

    内容区

  • height
  • width
  • 内边距

     1 h1{ 2     /*在内容四周增加20像素的内边距*/ 3     padding: 20px; 4 } 5  6 h2{ 7     /*分别指定内容四周增加的像素量*/ 8     padding-bottom:20px; 9     padding-left: 20px;10     padding-right: 20px;11     padding-top: 20px 12 }

    边框

  • 样式
  • h2{    border-style: groove;}

  • 宽度
  • 1 h2{2     border-width: thin;3     border-width: 5px;4 }

  • 颜色
  • h3{    border-color: red;    border-color: rgb(204,102,0);    border-color: #aabbcc;}

  • 指定边框圆角
  • 1 h3{2     border-radius: 15px;3 }

  • 为某一边指定
  • 外边距

     1 h1{ 2     margin: 30px; 3 } 4  5 h2{ 6     margin-bottom: 30px; 7     margin-left: 30px; 8     margin-right: 30px; 9     margin-top: 30px;10 }

    人气教程排行