CMS程序网 加入收藏  -  设为首页
您的位置：CMS程序网 > 知识库 > 正文
CSS布局有哪几种类型？
CSS布局有哪几种类型？
提示：

CSS布局有哪几种类型？

五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。

几种常见的css布局方式
提示：

几种常见的css布局方式

四种方式 比如想要做这样一个布局，有哪几种方式。 最简单、最快捷的方式。 element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。 相对简单的方式。 利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。 原生css布局的方式，float布局，也是最基础的方式。 将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。 原生css布局的方式，position布局，也是最基础的方式。 sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~

常用的CSS属性。
提示：

常用的CSS属性。

float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。 float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 扩展资料 CSS属性 1、整数和实数 在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。 2、长度量 相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。 3、百分数量（percentages） 百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。 参考资料来源：百度百科-CSS 参考资料来源：百度百科-FLOAT

常用的CSS属性。
提示：

常用的CSS属性。

1、首先新建一个 常用的css属性.html 文件，如图所示。 2、输入HTML5的结构代码，将title标签里面的内容修改成：常用的css属性，如图所示。 3、color：设置文字颜色（前景色），如图所示。 4、font-size：设置文字大小【px】，如图所示。 5、font-family：设置字体，比如：微软雅黑， 黑体，宋体，仿宋体等等，如图所示。 6、最后font-style：设置字体是正体还是斜体，如图所示，都是css常用到的属性代码。

推荐阅读

最新文章

Copyright © 2020-2023 www.muahang1k.com CMS程序网 版权所有