CSS总结-----定位与盒子图
来源:互联网 发布:java 解析swf 编辑:程序博客网 时间:2024/06/08 01:16
这一章主要说一说定位与解除浮动经常用到的知识点。
position:定位属性
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.其余设置四条边
2.填充:padding
1.分别设置四条边(属性)
padding-top/right/bottom/left:value;//注意,这个只有距离
。
省略方法和之前一样:左–左下—左下右
把它当成一个矩形来理解即可。
设置内边距会影响到标签的宽度和高度。
内边距是有背景颜色的
3.边界(外边距):margin
margin-top/right/bottom/left:value;//注意,这个只有距离
省略方法和之前一样:左–左下—左下右
把它当成一个矩形来理解即可。
注意点:
1.外边距(边界)没有背景颜色。
2.边距会出现合并现象,并不会叠加,谁更大按谁的,可以理解为把小的边界包进去了。
4.盒形图的数据
1,内容的宽高
内容的宽高是指用width/height设置的宽度和高度。
2.元素的宽高
宽/高=border+padding+width/height+padding+border
2.空间的宽高
宽/高=margin+border+padding+width/height+padding+border++margin
阅读全文
0 0
- CSS总结-----定位与盒子图
- CSS:盒子模型与定位
- CSS(八) 盒子的浮动与定位
- CSS盒子的定位
- CSS盒子的定位
- CSS基础知识总结之背景、尺寸、显示、盒子、定位
- 盒子模型与定位
- CSS定位与浮动总结
- CSS盒子模型的定位
- 盒子模型、CSS的定位
- css盒子模型之定位
- css盒子模型总结
- CSS学习笔记---CSS盒子的定位
- css浮动与盒子
- css盒子绝对定位,相对定位,固定定位
- CSS--CSS入门/CSS语法/盒子模型/CSS定位
- css盒子定位position的属性
- CSS盒子模型和定位 元素隐藏
- Spark代码Eclipse远程调试
- ubuntu boot 空间不足
- 关于QT5使用wamp的mysql连接问题
- c语言入门:c++运算符重载
- jquery ajax error函数和及其参数详细说明
- CSS总结-----定位与盒子图
- HDU1423 Greatest Common Increasing Subsequence(最长公共递增子序列)
- 数据库那点事(Mysql)-5
- github删除某个文件夹(文件)
- GCC/G++ + sublime text3 + powershell在windows使用指南
- 台湾大学机器学习基石lecture1小结
- 38. Count and Say
- ajax跨域,以及在laravel中实现跨域
- ArrayList的学习笔记