css笔记2

css浮动效果
DIV
DIV是层叠样式表中的定位技术，全称DIVsion
有时把div称为 图层，更多时候称为“块”

DIV样式设置
DIV设置大小 位置 背景

DIV溢出处理
超出div宽度高度的文字或图片进行隐藏处理
超出div宽度高度的文字或图片增加滚动条

overflow属性设置
visible 默认值。内容不会被修剪，会呈现在元素框之内
hidden 超出的部分被隐藏
scroll 不论是否需要 都显示滚动条
auto 按需显示滚动条以便查看其余的内容
列如：
#div1{
background-color:yellow;
width:150px;
height:150px;
top:150px;
left:150px;
position:absolute;
overflow:属性值
}

css轮廓 outline
作用：绘制于元素的一条线，位于边框边缘的外围，可起到突出元素的作用
outline：dashed(虚线轮廓) dotted（点状轮廓）
solid（实线） double（双线）
css边框 border-left border-right border-top border-bottom
作用：设置div边框的边线宽度，颜色，虚线，实线等样式css属性
注：还none（无边框） douuble（双线边框）等
制作只有下边框的文本框

#div2{top:100px;
left:300px;
position:absolute;
input{boder:none;
boder-bottom:solid
outline:none;
}

盒子模型的margin：10px，10px，10px，10px，正好是上、右、下、左，顺时针顺序而已嘛
通配符 *{} 所有
box-sizing:padding的距离由哪里产生
content-box:在宽度和高度之外绘制元素的内边距和边框
border-box:已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

浮动
行级元素 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的
行级元素 a标签 label img span等
块级元素 块级元素在默认情况下，会独占一行
块级元素：div h标签 li table等
定位机制 （标准）文档流，脱标流（float，position：absolute）
文档流特点 空白折叠现象
高矮不齐 底边对齐
自动换行，一行写满，换行写
脱标流 让块级元素实现从左到右 从上到下

float属性设置
left 元素向左浮动
right 元素向右浮动
none 默认值 元素不浮动

浮动：可以理解为处在一个专门的层
float的崩溃 破坏 崩塌。float作为父级元素，高度发生了崩溃
将子元素设置为浮动之后，父元素在没有指定高度的情况下，父元素的高度将不存在 父一级的块级元素高度发生啦破坏
在没有设置宽度的情况下，该宽度默认为上一级的宽度

包裹特性
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性，宽度为图片的宽度
float的设计初衷是为了实现图文混排 环绕方式

float清除浮动
为什么要清除浮动
为了父元素不会出现 高度崩塌
如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了
从某个元素开始 不在需要浮动效果了
clear：both；
清除浮动
清除浮动
1，直接在要清除的元素中添加clear:both
2，写一个div其中添加clear:both
3，主流大型网站的应用：
#clearDiv::after{
content:"";
visibility:hidden;
height:0px;
display:block;
clear:both;
}
防止IE浏览器的问题
#clearDiv{
zoom:1;}