CSS之属相相关
一、padding与margin
padding:就是内边距的意思,它是边框到内容之间的距离
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
有关padding 的使用:
padding有四个方向,分别描述4个方向的padding。
1、写小属性,分别设置不同方向的padding
1 padding-top: 30px; 2 padding-right: 30px; 3 padding-bottom: 30px; 4 padding-left: 30px;
2、写综合属性,用空格隔开
1 /*上 右 下 左*/ 2 padding: 20px 30px 40px 50px ; 3 4 /*上 左右 下*/ 5 padding: 20px 30px 40px; 6 7 /* 上下 左右*/ 8 padding: 20px 30px; 9 10 /*上下左右*/ 11 padding: 20px;
margin:外边距的意思。表示边框到最近盒子的距离。
margin的用法比较简单
1 /*表示四个方向的外边距离为20px*/ 2 margin: 20px; 3 /*表示盒子向下移动了30px*/ 4 margin-top: 30px; 5 /*表示盒子向右移动了50px*/ 6 margin-left: 50px; 7 8 margin-bottom: 100px;
二、border(边框)
border:边框的意思,描述盒子的边框
边框有三个要素: 粗细 线性样式 颜色
1 border-width: 3px; 2 border-style: solid; 3 border-color: red;
如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。
border的应用:
利用border可以制作出三角与圆形
1 /*小三角 箭头指向下方*/ 2 div{ 3 width: 0; 4 height: 0; 5 border-bottom: 20px solid red; 6 border-left: 20px solid transparent; 7 border-right: 20px solid transparent; 8 }
三、float与position
float:浮动
浮动是css里面布局最多的一个属性,也是很重要的一个属性。
float:表示浮动的意思。它有四个值。
-
- none: 表示不浮动,默认
- left: 表示左浮动
- right:表示右浮动
浮动的特性:
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
浮动带来的好处是实现元素并排效果,同时它还带来一些负面影响,所以我们遵循"要浮动一起浮动,有浮动清楚浮动"的准则,目的就是为了更好的页面布局。
如何清除浮动?
清除浮动的比较常见的方法有4种:
1.给父级盒子设置一个高度
这种方法可以解决问题,但是太局限了
2.clear:both
这种方法又称为内墙法,在同层下创建一个新的div
clear:意思就是清除的意思。
clear有三个值:
left:当前元素左边不允许有浮动元素
right:当前元素右边不允许有浮动元素
both:当前元素左右两边不允许有浮动元素
3.伪元素清除法
这种方法是最为常用的方法,给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置
1 content: "."; 2 display: block; 3 height: 0; 4 clear: both; 5 visibility: hidden
4.overflow:hidden
这种方法的用法很方便,也比较常用
overflow属性规定当内容溢出元素框时发生的事情。
用法就是在其样式内加入该语句
.main{ overflow:hiden }
position:定位
定位也是能实现元素并排的一种方式,定位的方式有三种:相对定位、绝对定位与固定定位。
相对定位:
相对于自己原来的位置定位
现象和使用:
1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。
2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right
特性:
1.不脱标
2.形影分离
3.老家留坑(占着茅房不拉屎,恶心人)
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途:
1.微调元素位置
2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。
参考点:
自己原来的位置做参考点。
绝对定位:
特性:
1.脱标
2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。
参考点(重点):
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是
常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
作用:页面布局常见的“父相子绝”,一定要会!!!!
固定定位:
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标
2.遮盖,提升层级
3.固定不变
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点
作用: 1.返回顶部栏 2.固定导航栏 3.小广告
四、z-index相关
与权重类似,谁大显示谁