这一章主要说一说定位与解除浮动经常用到的知识点。
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