HTML网页设计基础笔记 • 【第7章 盒子模型】

全部章节   >>>>


本章目录

7.1 盒子模型原理

7.1.1 盒子模型概述

7.1.2 盒子的大小

7.1.3 盒子之间的关系

7.2 标准文档流

7.2.1 标准文档流概述

7.2.2 display 属性

7.2.3 visibility 属性

7.3 盒子浮动

7.3.1 float 属性

7.3.2 清除浮动

7.4 盒子定位

7.4.1 静态定位

7.4.2 相对定位

7.4.3 固定定位

7.4.4 绝对定位

7.4.5 z-index 属性

总结:


7.1 盒子模型原理

7.1.1 盒子模型概述

盒子模型(Box Model)是从 CSS 诞生之时便产生的一个概念,标签都会在页面上生成一个盒子。因此,HTML页面实际上就是由一堆盒子组成的。默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构

HTML网页设计基础笔记 • 【第7章 盒子模型】_第1张图片

每个盒子都有边界(margin)、边框(border)、填充(padding)和内容(content4 个属性,其中填充、边框、边界属性分别由 CSS3 paddingbordermargin 属性设定,而内容属性宽度和高度则由 width 属性和 height 属性设定。

HTML网页设计基础笔记 • 【第7章 盒子模型】_第2张图片

在网页设计上,内容常指文本、图片等元素,但是也可以指嵌套的 HTML 元素;填充是指 HTML 元素的内容与其边框之间的填充厚度;边框是指盒子的外围;边界是指 HTML 元素与其他元素之间的距离。

HTML网页设计基础笔记 • 【第7章 盒子模型】_第3张图片

       每个 HTML 元素均可以看作一个盒子,盒子存在 4 条边,因此边框、填充和边界属性均包含 4 个部分,分别是上(top)、右(right)、下(bottom)、左(left),这 4 个部分可以同时设置,也可以分别设置。

7.1.2 盒子的大小

CSS 中,可以通过设置 width height 属性的值来控制内容content 所占据的大小,但值得注意的是,盒子还有其他 3 个属性 borderpadding 以及 margin,这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小

一个盒子实际的大小 内容 + 填充 + 边框

所占据空间的大小 内容 + 填充 + 边框 + 边界

示例:

宽度:200px
高度:150px
填充:上下10px 左右20px
边框:5px
边界:10px

HTML网页设计基础笔记 • 【第7章 盒子模型】_第4张图片

计算盒子的实际大小如下:

(1)盒子宽度 = 内容的宽度 + 左边距 + 右边距 + 左边框宽度 + 右边框宽度,其中内容宽度为 200px、左右边距均为 20px、左右边框宽度均为 5px,因此盒子的实际宽度为 250px。

(2)盒子高度 = 内容的高度 + 上边距 + 下边距 + 上边框宽度 + 下边框宽度,其中内容高度为 150px、上下边距均为 10px、上下边框宽度均为 5px,因此盒子的实际高度为 180px。

所以,盒子的实际大小为 250px×180px。

计算盒子所占据的空间大小如下:

(1)盒子实际占据宽度 = 盒子实际宽度 + 左外边距 + 右外边距,其中盒子实际宽度为 250px、左右外边距均为10px,因此盒子实际占据的宽度为 270px。

(2)盒子实际占据高度 = 盒子实际高度 + 上外边距 + 下外边距,其中盒子实际高度为 180px、上下外边距均为10px,因此盒子实际占据的高度为 200px。

所以,盒子所占据的空间大小为 270px×200px。

灵活利用盒子的相关属性,我们才有能力应付各种各样的排版要求。例如经常会设置内容文本的居中,而文本的居中又分为水平方向居中和垂直方向居中。

示例:


我的购物车

HTML网页设计基础笔记 • 【第7章 盒子模型】_第5张图片

7.1.3 盒子之间的关系

一个页面由各种各样的标签元素构成,每个标签都是一个盒子,当盒子在页面中进行排列时,根据盒子之间的位置关系,分为以下 3 种。

垂直盒子

HTML网页设计基础笔记 • 【第7章 盒子模型】_第6张图片

水平盒子

HTML网页设计基础笔记 • 【第7章 盒子模型】_第7张图片

重叠盒子

HTML网页设计基础笔记 • 【第7章 盒子模型】_第8张图片

margin 不同于 border 和 padding 只能取正数,margin 的值可以设置为负数。

7.2 标准文档流

7.2.1 标准文档流概述

标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式,在这种标准方式中,浏览器会根据读取到标签的先后顺序来排列HTML元素,在显示网页时,元素按照从左到右、自上而下的顺序进行排列。

HTML网页设计基础笔记 • 【第7章 盒子模型】_第9张图片

CSS 中将 HTML 中标签分为块状标签和标签:

1、常见的块状标签

标题(

~

)、 段落(

)、 水平线(


)、 列表(
    1. )、 表格()、 层(
      )、 表单 (
      )

      2、常见的行内标签

      图像()、范围()、换行(
      )、超链接(

      内标签与块状标签的区别:

      1、排列方式不同

      内元素按照从左到右的方式进行排列,多个行内元素显示在同一行,只有当一行排列完毕后,

      才会开始一个新行。块状元素各占据一行,则按照自上而下的方式进行排列。

      2、内嵌元素不同

       

      块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素,只能包含文本或者其

      他行内元素。

       

      3、属性设置不同

      行内元素与块状元素的属性设置不同,主要体现在盒子模型中,行内元素设置 width 属性height 属性时无效,但可以设置 line-height 属性,再设置 margin 属性、padding 属性时,对于上下方向上的设置无效。

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第10张图片

      样式规则中所设置的样式属性对于块状元素全部有效,而对于行内元素来说,width 属性、

      height 属性未能影响元素的大小,padding-top 属性以及 margin-top 属性设置也无效。

      7.2.2 display 属性

      CSS display 可以隐藏 HTML 元素包括 div

      display:none|block;
      

      隐藏 div

      显示div

      隐藏 HTML 元素是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域。

      7.2.3 visibility 属性

      CSS visibility 可以隐藏/显示 html 元素包括 div

      visibility:hidden|visible;
      

      隐藏 div

      显示 div

      display visibility 控制的分别是 HTML 元素是否存在和是否显示,display 的属性定义该元素存在或不存在,而 visibility 的属性只是控制该元素是否显示出来,实际上还是存在的。

      7.3 盒子浮动

      7.3.1 float 属性

      浮动定位是网页中最为重要的定位方式,浮动定位使用float属性,常用于div等块状结构元素的浮动布局。

      语法:

      float : none | left |right
      

      参数

      说明

      left       

      表示文本或图像会移动到父元素的左侧

      right      

      表示文本或图像会移动到父元素的右侧

      none      

      是默认值,表示文本或图像会显示于它在文档中出现的位置

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第11张图片

      示例:

      
      	
      Box盒子1
      Box盒子2
      Box盒子3

      css中,有一个float属性,默认为none,也就是标准流通常的情况。若果将float属性的值设置为left或right,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。

      
      

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第12张图片

      7.3.2 清除浮动

      浮动产生的原因:

      一个盒子里使用了 CSS float 浮动属性,导致父级对象盒子不能被撑开,这样 CSS float 浮动就产生了。左边盒子使用左浮动,右边盒子使用右浮动,两个盒子被包在另外一个盒子中。

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第13张图片

      浮动产生的负作用:

      • 背景不能显示
      • 边框不能撑开
      • margin padding设置值不能正确显示

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第14张图片清除浮动影响的方法:

      • 对父级设置适合 CSS 高度
      • 对父级设置适合高度样式清除浮动,这里对“.box1-max”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是 100px+ 上下边框为 2px,这样具体父级高度为 102px

      示例:

      .box1-max {
      	width: 400px;
      	border: 1px solid #F00;
      	background: #FF0;
      	height: 102px;
      }
      

      HTML网页设计基础笔记 • 【第7章 盒子模型】_第15张图片

      清除浮动影响的方法:

      • 对父级设置适合 CSS 高度
      • clear:both 清除浮动
      • 父级
结束前加此div引入clear:both样式即可清除浮动。

示例:


	
left 浮动
right 浮动

清除浮动影响的方法:

  • 对父级设置适合 CSS 高度
  • clear:both 清除浮动
  • 父级 div 定义 overflow:hidden
  • 对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

7.4 盒子定位

盒子定位通过设置css样式的position 属性。

HTML网页设计基础笔记 • 【第7章 盒子模型】_第16张图片

7.4.1 静态定位

position 属性的默认值static表示 CSS 文档流定位,元素框正常生成。就是按照正常的布局流从上到下从左到右布局。

语法:

position: static;

7.4.2 相对定位

相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。

语法:

position: relative;

示例:

p{
	font:bold 20px "宋体";
	text-align:center;
	margin-top: 0;
	color:#000000;
	background-color:transparent;
	position:relative;
	top:-90px;
}

HTML网页设计基础笔记 • 【第7章 盒子模型】_第17张图片

7.4.3 固定定位

语法:

position: fixed;

示例:

p.one {
	position: fixed;
	left: 5px;
	top: 5px;
}
p.two {
	position: fixed;
	top: 30px;
	right: 5px;
}

HTML网页设计基础笔记 • 【第7章 盒子模型】_第18张图片

7.4.4 绝对定位

绝对定位可以将指定的标签放置在绝对坐标位置上,绝对定位使标签的位置与文档流无关,因此不占据空间,可以浮在网页上。

语法:

position: absolute;

示例:

p{
	position:absolute;
	top:150px;
	left:250px;
	......
}

HTML网页设计基础笔记 • 【第7章 盒子模型】_第19张图片

7.4.5 z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

语法:

z-index:数字;

示例:

img.x {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1
}

HTML网页设计基础笔记 • 【第7章 盒子模型】_第20张图片

总结:

  • 盒子模型(Box Model)是每一个标签都会在页面上生成一个盒子。
  • 每个盒子都有边界(margin)、边框(border)、填充(padding)和内容(content4 个属性,其中填充、边框、边界属性分别由 CSS paddingbordermargin 属性设定。
  • CSS 中,可以通过设置 width height 属性的值来控制内容content 所占据的大小。
  • 盒子之间的位置关系:垂直盒子、水平盒子和重叠盒子。
  • CSS 中将 HTML 中标签分为块状标签和行内标签。
  • 浮动定位是网页中最为重要的定位方式,浮动定位使用float属性,常用于div等块状结构元素的浮动布局。
  • 盒子定位包含静态定位、相对定位、固定定位和绝对定位。

你可能感兴趣的:(#,HTML网页设计基础学习笔记)