isp 特殊 pos doc col 进行 出现 浮动
- 续......
- =============================================================================================
- 浮动的样式和特性
- 浮动:就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界就停下来
- 浮动的特性
- 1.浮动的元素排在同一排
- 2.浮动的元素内容撑开宽度
- 3.浮动的元素支持所有CSS样式
- 4.浮动的元素脱离文档流
- 5.浮动的元素提升层级半级(属性盖住内容溢出,可做文字环绕div的效果)
- 注意:
- 1.overflow溢出 会重新计算元素的空间
- :hidden 溢出隐藏
- :auto 溢出出现滚动条
- :scroll 出现滚动条
- 2.元素的居中
- margin:0 auto;
- 3.元素的伪类
- 伪类:就是css一些元素身上的特殊属性
- :hover 鼠标停留
- :after 在元素内容之后插入一些内容
- =============================================================================================
- BFC的常见方法及优缺点
- BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
- 1.父级也浮动
- 弊端:左右的margin:0 auto会失效
- 2.给父级加display:inline-block;
- 弊端:左右的margin:0 auto;会失效(如果需要元素居中可以给父级加text-align:center)
- 3.给父级加行高
- 弊端:扩展性不好
- 4.br标签
- 换行
- 5.clear
- clear元素的摸一方向不允许出现其他的浮动元素
- clear:both (推荐)
- 6.伪类清浮动
- :after{
- content:"";
- display:block;
- clear:both;
- }
- =============================================================================================
- 定位的特性
- 定位:把一个元素按照一定的方式定到页面的磨一位置
- position
- 相对定位 relative
- 针对自己本身的位置进行定位
- 绝对定位 absolute
- 针对有定位的父级的原点进行定位,如果父级没有定位,会找父级的父级身上。
- 以此类推,如果都没有,就会针对document进行定位。
- 注意:
- 绝对定位即使没有初始值,也要设置值(如: left: 0px; top:0px;)
- 固定定位 fixed
- 针对页面窗口进行定位
- 偏移量: left top right bottom (有优先级left,top>right,bottom)
- 相对定位 relative
- 1.不影响元素本身的特性
- 2.没有脱离文档流
- 3.提升层级
- 4.无法触发BFC
- 5.针对自己本身定位
- 绝对定位 absolute
- 1.脱离文档流
- 2.内容完全撑开高度和宽度
- 3.支持所有css样式
- 4.提升层级
- z-index:数值; 定位层级设置
- 设置数值越大,层级越高
- 5.绝对定位要和相对定位配合使用
- 6.自己有浮动,可以省略清浮动操作
- 固定定位 fixed
- 1.不兼容ie6
- 2.针对窗口进行定位
- 3.如固定定位的子级也有浮动,可以省略清浮动的操作总结到此为止,html/css的基础知识大概的过了一遍。还有一些细枝末节,就需要在实践中慢慢学习。
HTML/CSS 学习 (二)
来源: http://www.bubuko.com/infodetail-2064425.html