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
末蓝、
小鱼儿
红太狼
Myth丶恋晨
亦凉
不念不忘少年蓝@
还没有评论，来说两句吧...