《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应

html-css014

《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应,第1张

三栏布局一般指的是页面中一共有三栏, 左右两栏宽度固定,中间自适应的布局 ,三栏布局的具体实现:

利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。

CSS简介

CSS是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

选择器的就是根据不同需求把不同标签选出来。

基础选择器由单个选择器组成包括标签选择器,类选择器,id选择器和通配符选择器

标签名{

属性1:属性值1

属性2:属性值2

属性3:属性值3

...

}

.类名{

属性1:属性值1

...

}

多类名使用 在标签class属性中写多个类名用空格隔开

#id名{

属性1:属性值1

...

}

* { //通配符选择器使用"*"定义,表示选取页面中所有的元素(标签)

属性1:属性值1

...

}

文本缩进:

text-indent: 10px/2em

给定缩进长度或em相对单位一个文字的大小

行间距:

line-height: 26px

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c