CSS布局与定位postion float等

概述

概述

内容

盒子模型

 

（一）内容

盒子模型的概念：

盒子模型的概念

height和width表示的是内容的高度和宽度。

 

盒子模型

 

盒子模型的宽度和高度

盒子模型举例

overflow属性：

当内容溢出盒子框时的属性。

overflow属性

 

overflow举例

 

border属性

border属性

 

盒子的应用：水平分割线

 

hr水平分割线不能设置颜色样式，有限制。

padding属性和margin属性

浏览器除了对字体字号等有一个默认值之外，对padding和margin属性也有，所以在定义这两个属性时首先要对其默认值清零。

对默认值清零

margin属性和padding属性可以取值的单位有：px和%（外层盒子的高度和宽度），上右下左四个取值。
以margin为例：

margin属性赋值

盒子模型margin

 

盒子模型margin举例

 

用margin属性的时候要注意两点：
（1）div标签要换行，是独占一行的
（2）使用margin属性时要注意，两个盒子在垂直方向上的margin会合并。

 

margin属性垂直方向上合并

 

margin属性还可以设定盒子的水平居中，将左侧和右侧的值取值为auto

 

水平居中

案例

大盒子里面有三个并列的图片

 

案例HTML

 

案例CSS

图片之间有一个浏览器默认设定的空白距离

 

空隙

CSS定位

概述

对盒子进行定位
定位方式分为三类：（1）文档流（2）浮动定位（3）层定位

3种定位机制

 

文档流flow
默认的方式，相当于平常写字一样，从上到下，从左到右
浮动定位float
想要盒子并列排列一般采用浮动定位
层定位layer
使用position属性设定，像图层一样前后层叠在一起

文档流定位

元素分类：block、inline、inline-block
元素类型装换：display属性
block元素特点：
-独占一行
-元素的height、width、margin、padding都是可以设置的
常见的block元素：
div、段落、列表、标题、表格、表单等

常见的block元素

 

将元素显示为block类型的元素：

 

 

可以设置height、width、margin、padding

inline元素特点：
-不单独占一行
-width、height不可设置
-width是由元素里面的文字和图片的宽度决定的，不能改变
常见的inline元素：<span>、<a>
将其他元素显示为inline元素：display：inline；

inline元素问题

inline元素默认是水平排列，但是有一个间距问题，一般最简单的方式就是将inline类型转换为block等其他类型的元素，或者在a标签外面套上p标签或者ul标签。
inline-block元素：
-不单独占一行
-元素的height、width、margin、padding都可以设置
常见元素：<image>
显示为inline-block元素：display：inline-block
display属性可以设置为四种值

display属性

 

浮动定位float

 

浮动定位

float属性将div实现横向多列布局
left——向左浮动
right——向右浮动
none——不浮动

float属性

 

float用处

 

box1向右浮动

 

float属性

 

float属性

 

clear属性

 

清楚单侧浮动元素的用法

将第二个盒子的clear设置为right，表示它的右侧不会有浮动元素，所以要另起一行。

clear属性

为了不让footer卡在右侧，将其clear属性设置为both

 

层定位

层定位

 

层定位概述

 

层定位概述

 

z-index可以是负数

 

position属性

 

固定定位

 

案例

 

相对定位

 

绝对定位

 

绝对定位

 

绝对定位

 

一般将父元素定义为相对定位，子元素定义为绝对定位，这样当我们移动父元素时，子元素也会跟着一起移动。

 

relative+absolute

 

relative+absolute案例

 

relative+absolute案例

将子元素（叶子）的top值设为负数。
如果在多个层相嵌套的情况下，我们可以将最外面的父元素设置为相对定位，被嵌套的父元素和子元素设置为绝对定位就行了。

作者：penpy
链接：https://www.jianshu.com/p/f963b7a0e32d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。