CSS之属相相关

一、padding与margin

　　

　　　　padding：就是内边距的意思，它是边框到内容之间的距离

　　　　另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

　　有关padding 的使用:

　　　　padding有四个方向，分别描述4个方向的padding。

　　　　1、写小属性,分别设置不同方向的padding

 padding-top: 30px;
 padding-right: 30px;
 padding-bottom: 30px;
 padding-left: 30px;

　　　　2、写综合属性，用空格隔开

 /*上 右 下 左*/
 padding: 20px 30px 40px 50px ;

 /*上 左右  下*/
 padding: 20px 30px 40px;

 /* 上下 左右*/
 padding: 20px 30px;

 /*上下左右*/
 padding: 20px;

　　margin：外边距的意思。表示边框到最近盒子的距离。

　   margin的用法比较简单

 /*表示四个方向的外边距离为20px*/
 margin: 20px;
 /*表示盒子向下移动了30px*/
 margin-top: 30px;
 /*表示盒子向右移动了50px*/
 margin-left: 50px;

 margin-bottom: 100px;

二、border(边框)

　　border:边框的意思，描述盒子的边框

　　边框有三个要素： 粗细 线性样式 颜色

 border-width: 3px;
 border-style: solid;
 border-color: red;

　　如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

　　border的应用:

　　利用border可以制作出三角与圆形

 /*小三角 箭头指向下方*/
         div{
             width:;
             height:;
             border-bottom: 20px solid red;
             border-left: 20px solid transparent;
             border-right: 20px solid transparent;
         }

三、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的类，然后设置

　　　　　　　　

               content: ".";
                 display: block;
                 height: 0;
                 clear: both;
                 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相关

　　与权重类似，谁大显示谁