css的定位机制

最新推荐文章于 2021-10-18 21:42:22 发布

mysql996

最新推荐文章于 2021-10-18 21:42:22 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/u010572493/article/details/53608064

版权

CSS中存在3中定位机制

标准文档流（Normal flow）：从上到下，从左到右输出文档内容，在标准文档流中用来布局的块级元素是从上到下排列，浮动（float）、绝对定位（absolute position）

盒子模型

盒子模型是网页布局的基石

盒子模型尺寸=外边距+边框+内边距+内容的尺寸

自动居中一列布局

三个技能点：①标准文档流②块级元素③margin属性

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        * { margin: 0; padding: 0; font-size: 14px; }
        #wrap{width: 800px;margin: 0 auto}
    </style></head><body><div id="wrap"> <div id="heard"></div> <div id="main"></div> <div id="foot"></div></div></body></html>

auto会根据浏览器的宽度自动设置两边的外边距，以为div中没有内容，所以没有显示，可以为#wrap设置一个边框。如果设置浮动或绝对定位就无法自动居中，自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。

mysql996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的定位机制

CSS中存在3中定位机制标准文档流（Normal flow）：从上到下，从左到右输出文档内容，在标准文档流中用来布局的块级元素是从上到下排列，浮动（float）、绝对定位（absolute position）盒子模型盒子模型是网页布局的基石盒子模型尺寸=外边距+边框+内边距+内容的尺寸自动居中一列布局三个技能点：①标准文档流②块级元素③margin属性
复制链接

扫一扫