2021.7.16 CSS浮动属性

CSS浮动属性

个数	属性	描述	说明
1	float	float：left；	元素靠左边浮动
2	float	float：right；	元素靠右边浮动
3	float	float：none；	元素不浮动
浮动的作用1：		定义网页中其它文本如何环绕该元素显示
浮动的作用2：		就是让竖着的东西横着来

---

正常文档流 竖向排列 独占一行

---

---

      1、浮动会脱离网页文档，与其他不浮动的元素发生重叠       2、但是不会与文字发生重叠，文字会环绕浮动元素显示

---

 给所有的容器添加上float：left；之后，元素会从左往右排列

---

 如何清除浮动

个数	属性	描述	说明
1	clear	Clear：none；	允许有浮动对象
2	clear	Clear：right；	不允许右边有浮动对象
3	clear	Clear：left；	不允许左边有浮动对象
4	clear	Clear:both;	不允许有浮动对象
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

---

1.盒模型的组成部分

   盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

---

 2.padding属性

   1、padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。 填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。 用法： 1）用来调整内容在容器中的位置关系 2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

属性值的4种方式： 四个值：上 右 下 左 {padding:0px 0px 0px 40px;} 三个值：上 左右 下 {padding:10px 20px 30px ;} 二个值：上下 左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/ 说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

---

3. margin属性

   2、margin的使用方法 边界：margin,在元素外边的空白区域，被称为边距。 margin-left:左边界      margin-right:右边界  margin-top:上边界    margin-bottom:下边界 属性值的4种方式：margin可以给负数 四个值：上 右 下 左      三个值：上 左右 下     二个值：上下 左右 一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/ margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/

margin相关问题以及解决方法： 1、margin-top的解析     现象：默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。     解决方法：A、给最近的父元素添加border-top              B、给父元素添加overflow:hidden;（溢出隐藏)

---

4.border属性

    border:边框宽度 边框风格 边框颜色; 边框宽度：border-width: 边框颜色：border-color: 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)     简写：border：30px solid blue; 参数的顺序可以随意调换 单边框设置：上边框  border-top：30px blue solid;  下 border-bottom 左  border-left 右 border-right

---