css有哪些布局模型

html-css06

css有哪些布局模型,第1张

default,就是块级元素都自上而下的分布,宽度都为100%。内联元素都从左到右水平分布。div、p、table、img 等元素都可以设置为浮动。两个 div 显示在一行的代码如下:

div{

width:200px

height:400px

border:2px red solid

float:left

}层模型有三种形式:

(1)绝对定位(position: absolute)

div{

width:200px

height:400px

border:2px red solid

position:absolute

left:100px

top:50px

}

(2)相对定位(position: relative)

(3)固定定位(position: fixed)

层模型中,各元素可能出现堆叠。堆叠顺序可以用z-index控制,z-index大者在上。z-index相同时,根据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的值也要注意计算哦~

1.CSS所有页面全部定义在一个外部文件好,这样修改起来方便

2.不需再定义CSS,直接在总的那个CSS文件里面修改背景即可.如果是想单独修改一个网页的背景而不是整个网站的背景,就单独在要修改的网页里更改背景图即可.

如果我只重新定义了背景属性的CSS,原来其他那些属性还在吗

当然还在.

3.可以肯定是空间有问题.

4.可以用记事本更改.