html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」

html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」一、CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。首先要明白几个概念:主轴:Flex容器的主轴主要用来配置Flex项目,默…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、CSS3 弹性盒子(Flex Box)

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

首先要明白几个概念:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start 和main end。

交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start和 cross end。

设置了 display: flex 的父元素被称之为 flex 容器(flex container)。

在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)元素。

e12d3da9dc05?from=timeline

概念释义

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

Basic support (single-line flexbox)

29.0 21.0 -webkit-

11.0

22.0 18.0 -moz-

6.1 -webkit-

12.1 -webkit-

Multi-line flexbox

29.0 21.0 -webkit-

11.0

28.0

6.1 -webkit-

17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

弹性盒子布局自动一行填满且不随浏览器大小而变化

四、CSS3 弹性盒子常用属性

属性

描述

flex-direction

指定弹性容器中子元素排列方式

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行

flex-flow

flex-direction 和 flex-wrap 的简写

align-items

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-content

修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐

justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

flex-direction: row | row-reverse | column | column-reverse;

e12d3da9dc05?from=timeline

四种方向row | row-reverse | column | column-reverse

属性值

描述

row

默认值。元素将水平显示,正如一个行一样。

row-reverse

与 row 相同,但是以相反的顺序。

column

元素将垂直显示,正如一个列一样。

column-reverse

与 column 相同,但是以相反的顺序。

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;结果

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

描述

nowrap

默认值。规定元素不拆行或不拆列。

wrap

规定元素在必要的时候拆行或拆列。

wrap-reverse

规定元素在必要的时候拆行或拆列,但是以相反的顺序。

flex-wrap: nowrap | wrap | wrap-reverse;

可以取三个值:

(1) nowrap (默认):不换行。

e12d3da9dc05?from=timeline

nowrap

(2)wrap:换行,第一行在上方。

e12d3da9dc05?from=timeline

wrap

(3)wrap-reverse:换行,第一行在下方。

e12d3da9dc05?from=timeline

wrap-reverse

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*flex-direction:column;*/

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-wrap:wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;flex-wrap:wrap;

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

/* flex-flow: */

flex-flow:column wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

/*

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

flex-flow:

例:flex-flow:row wrap;

* * */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-flow:row wrap;

4. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

描述

flex-start

默认值。项目位于容器的开头。

flex-end

项目位于容器的结尾。

center

项目位于容器的中心。

space-between

项目位于各行之间留有空白的容器内。(两端对齐,项目之间的间隔都相等)

space-around

项目位于各行之前、之间、之后都留有空白的容器内。(每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.)

e12d3da9dc05?from=timeline

分布图

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;*/

/*justify-content:space-around;*/

/*

flex-start 默认值。项目位于容器的开头。

flex-end 项目位于容器的结尾。

center 项目位于容器的中心。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内

*/

}

.item{width: 100px; height: 200px;}

.item1-1{ background:red;height: 100px}

.item1-2{ background:orange;width: 300px;}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认 justify-content: flex-start;

justify-content:flex-end

e12d3da9dc05?from=timeline

justify-content:flex-end;

justify-content:center

e12d3da9dc05?from=timeline

justify-content:center;

justify-content:space-between; /*两端对齐,项目之间的间隔都相等。*/

e12d3da9dc05?from=timeline

justify-content:space-between;两端对齐,项目之间的间隔都相等

justify-content:space-around;每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

e12d3da9dc05?from=timeline

justify-content:space-around;每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.

5. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

描述

stretch

默认值。项目被拉伸以适应容器。

center

项目位于容器的中心。

flex-start

项目位于容器的开头。

flex-end

项目位于容器的结尾。

baseline

项目位于容器的基线上。

e12d3da9dc05?from=timeline

image

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items: stretch;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-items: stretch;如果项未设置高度或设为auto,将占满整个容器的高度

align-items:flex-start;

e12d3da9dc05?from=timeline

align-items:flex-start;交叉轴的起点对齐

align-items:flex-end;

e12d3da9dc05?from=timeline

align-items:flex-end;交叉轴的终点对齐

align-items:center;

e12d3da9dc05?from=timeline

align-items:center;交叉轴的中点对齐

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:baseline;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;} /* 修改文字开始的位置 通过padding来修改*/

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:baseline;项目的第一行文字的基线对齐

align-content 定义了多根轴线的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

描述

flex-start

与交叉轴的起点对齐。

flex-end

与交叉轴的终点对齐。

center

与交叉轴的中点对齐。

space-between

与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around

每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)

轴线占满整个交叉轴。

e12d3da9dc05?from=timeline

align-content 多根轴线的对齐方式

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

align-content: stretch;

/*

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; }

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6
1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-content:stretch;

align-content:flex-start;

e12d3da9dc05?from=timeline

align-content: flex-start;

align-content: flex-end;

e12d3da9dc05?from=timeline

align-content: flex-end;

align-content:center;

e12d3da9dc05?from=timeline

align-content: center;

align-content:space-between;

e12d3da9dc05?from=timeline

align-content: space-between;与交叉轴两端对齐,轴线之间的间隔平均分布。

align-content:space-around;

e12d3da9dc05?from=timeline

align-content:space-around;每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

五、flex-item项的常用属性(弹性子元素属性)

属性

描述

order

设置弹性盒子的子元素排列顺序。

flex-grow

设置或检索弹性盒子元素的扩展比率。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-basis

用于设置或检索弹性盒伸缩基准值。

flex

设置弹性盒子的子元素如何分配空间。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

数值越小,排列越靠前,默认为0。

order: ;

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

e12d3da9dc05?from=timeline

数值越小,排列越靠前

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; order: 6;}

.item1-2{ background:orange;width: 300px;height: auto;order: 5;}

.item1-3{ background:yellow;width: 100px;order: 0;}

.item1-4{ background:green;width: 100px;order: 3;}

.item1-5{ background:cyan;width: 100px;order: 2;}

.item1-6{ background:blue;width: 100px;order: 1;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

order分别设置为 6 5 4 0 3 2 1

2. flex-grow属性

flex-grow: ;

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

e12d3da9dc05?from=timeline

按照设置数字比例进行拉伸,默认为0,即如果存在剩余空间,也不放大。

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px; flex-grow:1}

.item1-2{ background:orange;height: auto;flex-grow:5}

.item1-3{ background:yellow;flex-grow:1}

.item1-4{ background:green;flex-grow:1}

.item1-5{ background:cyan;flex-grow:1}

.item1-6{ background:blue;flex-grow:1}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-grow 属性设定分别为 1 5 1 1 1 1

3. flex-shrink属性

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为1,即如果空间不足,该项目将缩小。负值对该属性无效

flex-shrink: ;

:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩,值越大收缩越多。

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 0 1 1 1 1 1 1

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 400px; height: 200px;flex-shrink:1}

.item1-1{ background:red;height: 100px; }

.item1-2{ background:orange;height: auto;flex-shrink:2}

.item1-3{ background:yellow;flex-shrink:3}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 2 3 1 1 1 值越大缩放比例越大

4. flex-basis属性

flex-basis: | auto;

:一个长度单位或者一个百分比,规定元素的初始长度。

auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。

如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

默认值为auto,即项目的本来大小。也可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

描述

flex-grow

一个数字,规定项目将相对于其他元素进行扩展的量。

flex-shrink

一个数字,规定项目将相对于其他元素进行收缩的量。

flex-basis

项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。

auto

与 1 1 auto 相同。

none

与 0 0 auto 相同。

initial

设置该属性为它的默认值,即为 0 1 auto。

inherit

从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

}

描述

auto

默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

stretch

元素被拉伸以适应容器。

center

元素位于容器的中心。

flex-start

元素位于容器的开头。

flex-end

元素位于容器的结尾。

baseline

元素位于容器的基线上。

initial

设置该属性为它的默认值。

inherit

从父元素继承该属性。

可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

e12d3da9dc05?from=timeline

改变子元素的align-items

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:flex-start;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px; align-self:flex-end}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:flex-start; align-self:flex-end;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/227275.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Kubernetes Pod Evicted[通俗易懂]

    Kubernetes Pod Evicted[通俗易懂]一、背景以及措施近日Kubernetes测试集群Pod状态出现Evicted现象,但是项目还是能正常提供服务,最先的解决办法是手动将Evicted状态的Pod删除。#查看Evicted状态的Pod[ops@dev-gate~]#kubectlgetpods-nstaging-services|grepEvictedeureka-server-02-7f658c4dfc-zwtqk0/1Evicted

  • pandas astype()错误[通俗易懂]

    pandas astype()错误[通俗易懂]由于数据出现错误DataError:Nonumerictypestoaggregate改正以后才认识到astype的重要性。Top15[‘populations’]=Top15[‘EnergySupply’].div(Top15[‘EnergySupplyperCapita’]).astype(float)df_mean=((df.set_ind…

  • 网管必备工具_ps功能介绍与工具使用视频

    网管必备工具_ps功能介绍与工具使用视频http://book.51cto.com/art/200903/116214.htm 转载于:https://blog.51cto.com/netsecing/163178

  • elementui更改el-table表头背景颜色和字体颜色

    elementui更改el-table表头背景颜色和字体颜色博主在使用elementui中的el-table时感觉默认表格样式实在过于简洁,尤其表头与表格内容之间区别较小,不利于辨认,降低了用户体验。如图所示:于是,博主尝试更改一下表头的背景颜色和字体颜色,方法如下:根据elementui官网的说法,header-cell-style是表头单元格的style的回调方法,也可以使用一个固定的Object为所有表头单元格设置一样的Style。…

  • mysql的longtext_老师,如何往MySQL中插入text和longtext类型的内容??

    mysql的longtext_老师,如何往MySQL中插入text和longtext类型的内容??request.setCharacterEncoding(“utf-8”);Stringtitle=request.getParameter(“title”);Stringcontainer=request.getParameter(“area2”);Connectionconn=null;Statementstmt=null;Stringsql=”insertne…

  • Java内存管理-掌握自定义类加载器的实现(七)

    勿在流沙筑高台,出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!上一篇分析了ClassLoader的类加载相关的核心源码,也简单介绍了ClassLoader的设计思想,读源码相对来说是比较枯燥的,还是这个是必须要走的过程,学习源码中的一些思想,一些精髓,看一下大神级人物是怎么写出那么牛逼的代码。我们能够从中学到一点点东西,那也是一种进步和成长了…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号