浮动和盒子模型(padding,margin,border属性)以及相关问题解决——学习笔记

一：浮动

1.什么是浮动？

浮动是让元素漂浮在文档页面上面，不再占据文档位置，叫做脱离文档流。

2.语法

float:left;元素靠左浮动
float:right;元素靠右浮动
float：none；元素不浮动

3.特点：

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

4.作用：

• 定义网页中其它文本如何环绕该元素显示
• 就是让竖着的东西横着来

注：给一个大盒子放多个元素，元素都加浮动可以排列在一行

5.清除浮动

clear:  none 允许有浮动对象
      left  不允许左边有浮动对象
      right  不允许右边有浮动对象
      both  两边都不允许有浮动对象

注：清除浮动知识改变元素的排列方式，该元素还是漂浮着，不占据文档位置

二.标准盒子模型：

1.padding属性

padding是内间距，设定页面中一个元素内容到元素的边缘(边框) 之间的距离， 也称补白或填充

用法：

• 用来调整内容在容器中的位置关系
• 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;

2.margin属性

margin是在元素外边的空白区域，叫做外边距。

使用方法：

margin-left:；  左边界
margin-right:  右边界
margin-top:   上边界
margin-bottom: 下边界   
margin属性值的四种方式和padding一样

特别说明：

margin：0 auto； 设置一个有宽度的元素在浏览器中横向居中

*margin相关问题：

• margin-top：在默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。

*解决：

• 给最近的父元素添加border-top属性
• 给父元素添加overflow:hidden；(溢出隐藏)

3.border属性

边框宽度： border-width:

边框颜色： border-color:

边框样式： border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

简写：border：30px solid blue; (参数的顺序可调换)

边框圆角： border-radus:; 可设四个属性值(左上，右上，右下，左下)