css定位机制、float(浮动)、版心与布局流程、隐藏显示、界面样式
普通流(标准流)、浮动、定位
normal flow(标准流)
一个页面标签元素正常从上到下，从左到右的意思
比如块级元素会独占一行
行内元素会按顺序一次前后排列
float(浮动)
脱离标准流，不占位置块元素添加
float属性后，会具有行内块元素特性行内块元素添加
float
常用于使
div等块元素在一行显示
属性值
left: 元素向左浮动
right: 元素向右浮动
none：元素不浮动
版心与布局流程
版心
网页主体内容所在的区域
一般在浏览器窗口中水平居中显示
常见的宽度值为
960px、980px、1000px、1200px
布局流程
1、确定页面的版心（可视区）
2、分析页面中的行模块，以及每个行模块中的列模块
3、制作HTML结构
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块
清除浮动
所解决问题
为了解决父级元素因为子级浮动引起内部高度为0 的问题
清除浮动的方法
额外标签法
语法格式
选择器{clear:属性值;}属性
left清除左侧浮动的影响
right清除右侧浮动影响
both同时清除左右两侧浮动的影响
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .clear { clear: both; /*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 --> </div> <div class="footer"></div> </body> </html>
父级添加overflow属性方法
overflow为hidden|auto|scroll都可以实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; overflow: hidden; /*别加错位置了，给 父亲加*/ /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/ } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 180px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { /*正常浏览器 清除浮动*/ content:""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7以下的版本所识别*/ } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用before和after双伪元素清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
定位(position)
元素的定位属性主要包括定位模式和边偏移两部分
定位的属性
定位模式(定位的分类)
选择器{position:属性值;}
static(静态定位)
自动定位(默认定位方式)
网页中所有元素都默认的是静态定位
其实就是标准流的特性
relative(相对定位)
相对定位，相对于其原文档流的位置进行定位
每次移动位置，是以自己的左上角为基点移动
相对于自己来移动位置
不影响页面中的其他元素
absolute(绝对定位)
绝对定位，相对于其上一个已经定位的父元素进行定位
绝对定位不占位置，与浮动相似
若所有父元素都没有定位，以浏览器为准对齐
fixed(固定定位)
固定定位，相对于浏览器窗口进行定位
完全脱标，不占有位置
相对于浏览器移动位置
边偏移属性
top
顶端偏移量，定义元素相对于其父元素上边线的距离
bottom
底部偏移量，定义元素相对于其父元素下边线的距离
left
左侧偏移量，定义元素相对于其父元素左边线的距离
right
右侧偏移量，定义元素相对于其父元素右边线的距离
定位案例:
使边框1px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 250px; height: 400px; border: 1px solid #ccc; float: left; margin-left: -1px; position: relative; /* relative占有原来的位置 */ /*z-index: 0;*/ } div:hover { border: 1px solid #f40; /*position: relative; 相对定位比标准流高一级 浮在上面的*/ z-index: 1; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
子绝对父相
一般网页布局中子级是绝对定位的话， 父级要用相对定位
定位的盒子居中对齐
盒子加了定位或者浮动后，
margin 0 auto方式的居中对齐失效使用
left: 50%+margin-left: -盒子的大小的一半
z-index(叠放次序)
默认值是：0
取值越大，定位元素在层叠元素中越居上
如果取值相同，则根据书写顺序，后来居上
只有相对定位，绝对定位，固定定位有此属性
标准流，浮动，静态定位都无此属性，亦不可指定此属性。
元素的显示和隐藏
display 显示
display:block：除了转化为块级元素之外，同时还有显示元素的意思隐藏之后不再保留位置
visibility 可见性
隐藏之后，继续保留原有位置
属性
visible ： 对象可视
hidden：对象隐藏
overflow(溢出隐藏)
当对象的内容超过其指定高度及宽度时如何管理内容
属性
visible
不剪切内容也不添加滚动条
auto
超出自动显示滚动条，不超出不显示滚动条
hidden
不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll
不管超出内容否，总是显示滚动条
界面样式
cursor(鼠标样式)
属性
default：小白
pointer：小手
move：移动
text：文本
outline(轮廓线)
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
属性
outline : outline-color ||outline-style || outline-width一般去掉不用
<input type="text" style="outline: 0;"/>
resize(防止拖拽文本域)
这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
案例
<textarea style="resize: none;"></textarea>
