1. 盒子模型
盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,一个页面由可以由多个盒子组成。
盒子的组成:内容区域 + 边框(border) + 内边距(padding)+ 外边距(margin);
2. 元素
3. 网页布局方式(用于摆放盒子)
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
- 标准流:标签按照规定好默认方式排列,垂直的块级盒子显示就用标准流布局;
- 浮动:可让多个块级元素一行显示或者左右对齐盒子,横向排列盒子就用浮动布局;
- 定 位:定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
4. 浮动
浮动是网页布局中非常重要的一个属性,这个属性一开始设计的初衷是为了网页的文字环绕效果。
4.1 浮动属性:选择器 { float: 属性值; }
4.2 浮动特点
-
浮动的元素脱离了标准流,即脱标;
-
浮动的元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)会产生文字环绕效果;
-
浮动的元素有收缩效果,行内元素浮动以块级特性去呈现,大小根据内容大小决定;
-
浮动的元素一行排列并顶部对齐,无缝衔接,若父盒装不下,则另起一行;
4.3 浮动缺陷
浮动的子标签因为脱离了标准文档流,无法撑开父盒子的高度,导致父盒子高度塌陷。如果网页中出现了这种问题,会导致我们整个网页的布局紊乱。
解决措施:清除浮动
注意:
- 如果父盒子本身有高度,就不会影响下面的标准流,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。
4.4 BFC块级格式化上下文
overflow属性不仅仅有以上效果,那么当一个元素设置了overflow:hidden|auto|scroll属性之后,它会形成一个BFC区域,我们叫做它为块级格式化上下文,它是一个独立的渲染区域。BFC只是一个规则,浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动,浮动定位和清除浮动只会应用于同一个BFC的元素。只要我们让父盒子形成BFC的区域,那么它就会清除区域中浮动元素带来的影响。
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不影响外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算
会生成BFC的元素:
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible
5. 定位
定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒
5.1 定位组成
定位 = 定位模式 (position) + 边偏移 (方位名词)
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。边偏移需要和定位模式联合使用,单独使用无效 。
5.2 定位口诀
子绝父相:子级是绝对定位的话,父级要用相对定位
- 绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用,父盒子需要加定位限制子盒子在父盒子内显示。
- 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位。
5.3 堆叠顺序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
- 语法:选择器 { z-index: 属性值; }
- 属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
- 如果属性值相同,则按照书写顺序,后来居上;
- 数字后面不能加单位。
注意:z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。