客户端基础

Posted 2021-03-14 gy-blog

什么是盒模型？？？

用通俗的语言来讲就是将所有的html文档元素都生成一个矩形框，好比一个装东西的盒子，然后通过定义一些与盒子相关的属性，改变HTML文档的样式和布局结构。

CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。

•  margin：外边距（控制两个标签之间的距离）
• border：边框

 

• padding：内边距（控制内容与边框的距离）
• content：内容
  

       可通过display改变行、块盒元素

元素在页面上的定体系

元素在页面上的定位体系主要分三种：

一、常规流（normal  flow）

又叫普通流，文档流，普通文档流
默认情况下，元素为常规流定位

二、浮动（float）

默认值：none
left  ：左浮动的盒子向上向左排列
right ：右浮动的盒子向上向右排列

• 浮动的盒子的顶边不得高于上一个盒子的顶边
• 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够空间能容纳盒子，然后再向左或是向右移动

 

在浮动中一旦margin四个方向的值有一个为auto其他都为0，content的值是适应内容的宽度和高度

 

当常规流遇上浮动：常规流盒子和浮动盒子混合摆放

• 浮动盒子在摆放时，要避开常规流盒子
• 常规流盒子在摆放时，无视浮动盒子
• 当子级进行浮动，就会脱离文档流，导致父级高度塌陷

 

清除浮动：clear ：both；

 

三、绝对定位（absolute  pesitioned）

会脱离文档流从可视窗口的左上角开始绝对定位元素以包含它离它最近的非静态定位元素的（0,0）点非静态定位：position的取值不是static就是非静态定位