标签：表示 block 圆形 ide 显示 size 用途 问题 广告
一、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：表示浮动的意思。它有四个值。
浮动的特性:
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.小广告
标签：表示 block 圆形 ide 显示 size 用途 问题 广告
原文地址：https://www.cnblogs.com/qq631243523/p/9681711.html
