CSS浮动 学习打卡

课程目标

1、 学习边框，轮廓等块级元素设置，盒子模型
2、 标准流、文档流、脱标流等技术术语
3、 浮动的设置，浮动的特点
4、 使用浮动技术进行特效的制作

课程安排

1、div 块级元素和行级元素的区别
2、盒子模型 盒子模型的概念，用途，设置盒子模型的间距
3、浮动 浮动的作用、包裹、奔溃特性，清除浮动
4、块和行如何转换 块状元素和行级元素的相互转换

div

1、 层叠样式表中的定位技术，全称 DIVision
2、 图层 更多的称之为：块

div样式设置

1、 div的大小 背景设置 width height px %
2、 div溢出效果演示、换行、滚动条显示
3、 div的边框，轮廓设置
4、 盒子模型

div溢出效果演示

1、 超出div的宽度和高度的文字或图片进行隐藏处理
2、 超出div的宽度和高度的文字或图片增加滚动条

Overflow的设置

1、visible 默认值，内容不会被修剪，会呈现在元素框之外
2、hidden 超出的部分进行隐藏
3、scroll 不论是否需要，都显示滚动条
4、auto 按需显示滚动条以便查看其余的内容

绝对定位

div{
  bakcground-color:red;
  width:100px;
  height:100px;
  position:absolute;
  top:200px;
  left:200px;
}

div的轮廓

设置div的边框包括2部分：
1、 轮廓
2、 边框

Css轮廓 outline

作用：绘制于元素周围的一条线，位于边框的边缘的外围，可起到突出元素的作用
1、 dashed 虚线轮廓
2、 dotted 点状轮廓
3、 solid 实线
4、 double 双线
5、 none 无

css边框

1、border-left border-right border-top border-bottom
2、作用：设置DIV的边框的边线宽度，颜色，虚线，实线等样式css属性

border的属性设置：

1、solid 设置下边框为实线
2、none 无
3、double 双线边框

盒子模型

是用来改变 间距的，外边距，内边距，是css里面一门非常重要的技术
div table body等的块级元素都可以使用上面的盒子模型

属性

1、 width height border margin padding
2、 示例：
margin:10px(上) 10px(右) 10px(下) 10px(左)
margin -left margin -right margin -top margin –bottom
margin是对象和对象之间的距离
padding:10px(上) 10px(右) 10px(下) 10px(左)
padding -left padding -right padding -top padding–bottom
内边距就是对象内部，文字和边框之间的距离就是padding
Padding多出的部分由哪里产生的：
box-sizing
1、content-box 在宽度和高度之外绘制元素的内边距和边框 – 默认溢出的效果
2、border-box 已设定的宽度和高度分别减去边框和内边距才能得到内容的高度和宽度

定位机制

(标准）文档流 脱标流（float position：absolute）

文档流特点：

1、空白折叠现象
2、高矮不齐，底边对齐
3、自动换行，一行写满，换行写

浮动：

Float属性设置
1、left 元素向左浮动
2、right 元素向右浮动
3、none 默认值，不浮动

Float的包裹特性和奔溃特性

崩溃：float作为父级元素的时候，父级元素的高度发生了崩溃。

浮动的其他特性

1、 比如商品列表的并排显示
2、 文字和div进行环绕排列的方式

清除浮动

1、 为了父元素不再出现崩溃效果
2、 如果强制规定外层容器的尺寸，就不那么灵活，高度就不能自适应了

#cleardiv::after{
	content: "";
	visibility: hidden;
	height: 0px;
	display: block;
	clear: both;
}


#cleardiv{
	zoom:1;
}

思维导图