西宁做网站君博先进,定制系统,培训中心网站建设方案,泉州住房城乡建设局网站1#xff0c;标准流布局
标准流#xff0c;也称文档流或普通流#xff0c;是所有元素默认的布局方式。 在标准流中#xff0c;元素按照其在 HTML 中出现的顺序#xff0c;自上而下依次排列#xff0c;并占据其父容器内的可用空间。 标准流中的元素按照其自然尺寸和位置进…1标准流布局
标准流也称文档流或普通流是所有元素默认的布局方式。 在标准流中元素按照其在 HTML 中出现的顺序自上而下依次排列并占据其父容器内的可用空间。 标准流中的元素按照其自然尺寸和位置进行布局不会特意改变元素的属性或位置。
2非标准流布局
1相对定位
是指将一个元素从它的标准流中所处的位置进行向上向下向左向右偏移这种偏移不会影响周围元素的位置周围元素还是位于自己原来的标准流中的位置。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle typetext/css.A{width: 500px;height: 500px;background: #ccc;margin-top: 100px;overflow: hidden;}.B{width: 100px;height: 100px;background: red;position: relative;left: 100px;top: 70px;}.C{width: 100px;height: 100px;background: blue;margin-top: 70px;color: #000;}/style
/head
bodydiv classAdiv classB/divdiv classC/div/div
/body
/html
结果
2绝对定位
是指将一个元素完全脱离标准流浏览器完全忽略掉该元素所占据的空间该元素向上向下向左向右偏移是相对于浏览器窗口或者向上追溯到第一个已经定位的父级元素作为参照物。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style typetext/css.A{width: 500px;height: 500px;background: #ccc;margin-top: 100px;position: relative;overflow: hidden;}.B{width: 100px;height: 100px;background: red;position: absolute;left: 100px;top: 70px;}.C{width: 100px;height: 100px;background: blue;margin-top: 70px;color: #000;}
/style
bodydiv classAdiv classB/divdiv classC/div/div
/body
/html 结果
3其核心知识点还需要自己去理解。
