css布局方式有哪些,具体是什么意思

html-css09

css布局方式有哪些,具体是什么意思,第1张

css布局方式有哪些:

五种基本布局定位类型:

* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。

* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。

* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。

* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。

* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。

css的grid布局和表格的区别如下:

grid是固定大小的,table大小可变

grid继承自面板元素,table继承自块元素

grid用于表单内,用于显示内容,table用于流式内容展示。

css与表格不同,css是样式和代码分离也就是一个页面或几个页面对应一个样式表或者多个样式表。而表格是所见即所得,样式在表格里面写。因此当一个页面需要做局部的调整,如果是css写的只需要找到css文档,找到所修改的内容所对应的样式表直接修改就好了。而table的则需要找到页面的对应位置(table页面代码好乱的,你懂得),然后修改样式。再有如果所应用的页面是静态的例如cms(内容管理系统)所生成的页面是静态页面,如果用css做只需要修改css,那么所有引用css的都自动改变样式了,而是用table的则需要找到每个页面,都进行修改。

这样说你应该懂了吧。来点简单的添加长宽高吧。

css的:

样式表:

#wrap{width:100pxheight:50px}

页面代码:

<div id="wrap">内容</div>

table的

页面代码

<table width="100px" height="50px">

<tr><td>内容</td></tr>

</table>