CSS网页布局方法总结
时间：2023-08-29 20:54:02 | 来源：网站运营
时间：2023-08-29 20:54:02 来源：网站运营
CSS网页布局方法总结：##【博学谷学习记录】超强总结，用心分享##
块级标签（容器布局标签）：div，p，h1~h6, header, footer, form, ...
行内标签（设置宽高无效）：span，i，a，img，input，...
行内块标签（特殊的行内标签（可设置高宽））：img，input，...
三种属性标签之间的切换方法：利用display属性
块级 ->行内 display: inline-block 行内 ->块级 display: block
使得元素水平排列布局方式
1.display: inline-block 这种方法用来布局div盒子排列在一行会因为在书写多个div顺序换行导致出现一个未设置的margin值，即小缝隙，会影响布局。所以才出现了用浮动布局div盒子的方法
2.浮动的特点： 会脱离标准流，不占用原来的位置，并且会覆盖没有加浮动的盒子，但是又没有完全覆盖，盒子里面的文字不会被覆盖。加了浮动的标签盒子会顶对齐排列成一行，如果不想让盒子顶对齐，就给盒子加margin-top值即可。加了浮动之后，加text-align：center；和margin：0 auto;不会生效，以为给了浮动盒子无法水平居中，
浮动的权限高于标准流。
浮动的对父盒子的影响: 给了子元素浮动之后会不占位置，导致无法撑开标准流父盒子的高度（前提是无法给一父盒子一个准确的高度的情况下），那么剩下的所有标准流的盒子会无视父盒子和里面的子盒子，直接冲到网页最上面。
所以才会想着去清除浮动带来影响：看见clearfix就说明这里清除了浮动
推荐使用
给父盒子加一个overflow：hidden;属性即可快速实现清除浮动。定位：用于层叠元素
相对定位（position: relative）：相对于自己原来的位置移动（没有脱标）。
绝对定位（positon: absolute）：相对于加了定位的父级为参照物移动，如果没有加，以浏览器为参照物移动。加了绝对定位的盒子给margin： 0 auto 无法实现居中效果，如图可以实现居中。
绝对定位的盒子居中用这个代替magin值固定定位（position: fixed)：用于固定头部或者底部区域，中间内容区域需要给头部和底部空出padding值（会脱标）。
在线咨询
