好程序员web前端分享CSS基础知识之position-创新互联

  好程序员 web 前端分享 CSS 基础知识之 position

创新互联公司主营岑巩网站建设的网络公司,主营网站建设方案,成都App定制开发,岑巩h5成都小程序开发搭建,岑巩网站营销推广欢迎岑巩等地区企业咨询

  CSS 定位机制

  标准文档流 (Normal flow)

  浮动定位 (Floats)

  绝对定位 (Absolute positioning)

  标准文档流

  从上到下,从左到右,输出文档内容

  由块级元素和行级元素组成

  块级元素

  从左到右撑满页面,独占一行

  触碰到页面边缘时,会自动换行

  常见的标签有: div 、 ul 、 li 、 di 、 dt 、 p

  行级元素

  能在同一行内显示

  不会改变 HTML 文档结构

  常见的标签有: input 、 span 、 label 、 strong 、 img

  盒子模型

  边框 (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前端分享CSS基础知识之position-创新互联
标题链接:http://myzitong.com/article/cophhp.html