CSS布局和格式化

>本文档解释了CSS布局和格式，将其与较旧的基于表的方法进行了对比。 它使用文档对象模型（DOM）和CSS框模型的简化说明来说明浏览器如何呈现网页。 然后，本文提供了有关CSS布局和格式化的常见问题（常见问题解答）的答案。

>

> CSS1提供了有限的图形布局功能，但CSS2和CSS3显着扩展了这些功能，为布局表和呈现标记提供了更强大的替代方案。 浏览器在两个阶段渲染HTML文档：解析和渲染。 解析涉及从HTML标记创建DOM树。

考虑此html示例：

<code class="language-html"><title>Widgets</title>
<h1>Widgets</h1>
<p>Welcome to Widgets, the number one company in the world for selling widgets!</p></code>

这转化为dom树（省略了简短的文本节点）：>

DOM树由节点（元素节点和文本节点）组成。 根节点（始终为

元素）分支到html>和head>中，进一步分支到子节点中。 节点之间的关系包括亲子，祖先 - 居民和兄弟姐妹。body>

> DOM构建和CSS解析后，渲染阶段开始。 每个DOM节点呈现为一个或多个矩形CSS框（带子类型的块或内联框）。 用户代理样式表通常将块框分配给块级元素和内联框以内联元素，尽管

属性可以覆盖此元素。 重要的是，CSS不会改变HTML标记；块/内联区别由HTML DTD定义。 display

>常见问题：

Q：CSS布局和格式之间有什么区别？

a：布局涉及页面上的元素布置（位置，大小，对齐）（标题，页脚，侧边栏）。格式侧重于视觉外观（颜色，字体，背景，边框，间距）。 问：如何创建响应式CSS布局？

a：使用媒体查询（用于不同设备的样式），灵活的基于网格的布局（百分比而不是固定单元）以及灵活的图像/媒体（相对单位）。

Q：什么是不同的CSS布局模型？

a：块模型（块级元素），内联模型（文本），表模型（表格数据），定位模型（显式定位）和Flex模型（灵活的框布局）。 Q：如何使用CSS进行文本格式？

a：使用

，

，

，，，

，

和颜色属性。

Q：什么是CSS框模型？ a：一个基本概念，描述了元素周围的空间分布。每个元素都是一个矩形盒，包括内容，填充，边框和边缘层。

Q：如何使用CSS？ a：使用

，

，list-style-type，填充和保证金属性。 list-style-positionlist-style-imageQ：什么是CSS网格和Flexbox？

a：现代布局系统。网格是二维（行和列），而Flexbox是一维（行或列）。两者都反应灵敏。

Q：如何使用CSS？

Q：内联和块元素之间的区别？

> a：内联元素不会启动新行，只占用所需的宽度（例如，

>，

）。块元素启动新线条并跨越全宽度（例如，text-align，vertical-align）。

Q：如何与CSS？ a：use，

，

，<span></span>和伪级（<a></a>>，<div>，<code><h1></h1>）。