请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训之CSS基础知识之position

[复制链接]
叶子老师 发表于 2019-4-15 17:38:59 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 好程序员web前端培训CSS基础知识之position
  CSS定位机制
  标准文档流(Normal flow)
  浮动定位(Floats)
  绝对定位(Absolute positioning)
  标准文档流
  从上到下,从左到右,输出文档内容
  由块级元素和行级元素组成
  块级元素
  从左到右撑满页面,独占一行
  触碰到页面边缘时,会自动换行
  常见的标签有:divullididtp
  行级元素
  能在同一行内显示
  不会改变HTML文档结构
  常见的标签有:inputspanlabelstrongimg
  盒子模型
  边框(border)
  外边距(margin)
  内边距(padding)
  盒子中的内容(content)
  盒子模型尺寸=边框+外边距+内边距+盒子中内容的尺寸
  盒子3D模型
  第一层:border
  第二层:content + padding
  第三层:background-image
  第四层:background-color
  第五层:margin
  浮动定位
  三个属性:left(左浮动)right(右浮动)none(不浮动)
  元素会左移、或右移、直到碰到容器为止
  仍处于标准文档流中
  清除浮动的常用方法
  clear属性,常用clear:both;(当父包含块缩成一条时无效)
  同时设置width:100%(或固定宽度)+overflow:hidden;
  相对定位
  相对于自身原有位置进行偏移
  仍处于标准文档流中
  随即拥有偏移属性和z-index属性
  绝对定位
  建立了以包含快为基准的定位
  完全脱离了标准文档流
  随即拥有偏移属性和z-index属性
  绝对定位-偏移参考基准
  无已定位祖先元素,以为偏移参考基准
  有已定位祖先元素,以距其最近的已定位祖先元素为偏移参考基准
  绝对定位-未设置偏移量
  无论是否存在已定位的祖先元素,都保持在元素初始位置
  脱离了标准文档流
  绝对定位-常见问题
  没有设置宽度时,元素的宽度根据内容进行调节
  左右布局时,柱子层的高度,一定要大于绝对定位元素的高度
好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启