CSS总结-----定位与盒子图

这一章主要说一说定位与解除浮动经常用到的知识点。

position：定位属性

absolute	fixed	relative	static
绝对定位	固定定位	相对定位	没有定位
除static定位之外的第一个父元素	相对于浏览器	相对之前正常位置定位	没有定位

1.定位

提到定位应该先了解两个知识点：

1.相对定位

相对定位是指相对于自己以前在标准流中的位置来定位。

• 这里注意，相对定位并没有脱离标准流，会继续在标准流中占有空间。所以margin/padding等属性会影响到标准流的布局
• 同时也要想到，既然没有脱离标准流，那自然要区分是块级，行内，还是行内块级元素
• 同一个方向上的定位属性只能使用一个

2.绝对定位absolute

绝对定位是相对于祖先元素或者body来定位，是相对于一个公共基准。当以body时，参考点是网页首屏，并不是整个网页。（默认情况下都是以body作为参考点）
这里顺带提一下网页首屏：在我看来，网页首屏是指打开一个网页我们第一眼看到的那个界面

• 不同于相对定位，绝对定位是脱离于标准流的，所以并不会在标准流中占位置。
• 因此，绝对定位不区分块级元素/行内元素/行内块级元素
• absolute设置的绝对定位会从父元素开始向上直系查找(定位流中的父元素！即非static定位的元素)，直到html,这里要知道，html和body在位置上是有区别的
• 当有多个可选父元素时，会优先选择最近的，就近原则

（盒子绝对定位后是不能使用margin:0 auto;居中，可以使用left:50%）

3.固定定位fixed

• 固定定位是脱离标准流的，不会占用标准流的位置。
• 不区分块级，行内，行内块级
• 固定定位是相对于浏览器的定位，即滑动浏览器，他还是在那个位置。

4.静态定位static

默认的标准流

5.定位覆盖z-index

• 默认情况下定位元素会默认覆盖没定位的元素。
• 默认情况下后面的定位元素会覆盖前面的定位元素。
  所以我们引入z-index：number;
  z-index中的值默认都是0，当设置了后谁的比较大就显示在前面。

这个设置是有从父现象的，当父元素没有设置时，听自己的，当父元素设置后，听父元素的

2.盒形图

content:内容：我们的标签内容
padding：填充：类似于盒子里面的泡沫，不是我们的主题，只用于填充
border：边框，即盒子主体
margin:边界,即盒子与其他盒子之间的空间

下面一个个来说。

1.边框:border

下面说说边框的设定：

1.同时设置四条边

格式：

border:宽度 样式 颜色;
border:20px solid red;
//1.其中颜色默认黑色，可以省略
//2.样式不能省略
//3.宽度可以省略，默认有边框

2.分别设置四条边（方向）

这是分别对四条边进行设置
方法很简单：

border-top/right/bottom/left:宽度 样式 颜色；

3.分别设置四条边（属性）

border-width/style/color:上 右 下 左；
//省略左时，左边和右边一样
//省略下，左时，和上右一样
//只有上时，就像个正方形一样
//四边形嘛，很好理解的

4.分别设置四条边（属性+方向）

border-top/right/bottom/left+width/style/color:value;

//设置得更具体

5.其余设置四条边

取值	属性
border-bottom/top-left/right-radius	设置左/右 -下/上角的形状
border-image	设置所有边框图像
border-image-repeat/rounded/stretched	摆放样式，平铺，铺满，拉伸
border-image-outset	规定边框图像区域超出边框的量
border-image-source	规定用作边框的图片
border-image-width	规定图片边框的宽度

2.填充:padding

1.分别设置四条边（属性）

padding-top/right/bottom/left:value;
//注意，这个只有距离

。

取值	属性
auto	浏览器计算内边距
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的内边距

省略方法和之前一样：左–左下—左下右
把它当成一个矩形来理解即可。

设置内边距会影响到标签的宽度和高度。
内边距是有背景颜色的

3.边界(外边距)：margin

margin-top/right/bottom/left:value;
//注意，这个只有距离

取值	属性
auto	浏览器计算边界
length	规定以具体单位计的边界值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的边界

省略方法和之前一样：左–左下—左下右
把它当成一个矩形来理解即可。

注意点：
1.外边距（边界）没有背景颜色。

2.边距会出现合并现象，并不会叠加，谁更大按谁的，可以理解为把小的边界包进去了。

4.盒形图的数据

1，内容的宽高

内容的宽高是指用width/height设置的宽度和高度。

2.元素的宽高

宽/高=border+padding+width/height+padding+border

2.空间的宽高

宽/高=margin+border+padding+width/height+padding+border++margin