Java前端知识积累——CSS样式表

类选择器选择

按钮

按钮居中

Text-align:center

高度

高度充满100%

.home-container{
	Height:100%;
}

边距

与上面组件保持间距

Margin-top:15px;

布局对齐方式

align-items 属性

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

Id和class选择器

CSS背景

Css文本对齐

Css上下划线

CSS设置字体大小

Font-size:3px;

css边距(padding)

css边框(border)

Css外边距（margin）

查阅内置对象功能

因为内置对象的方法太多了，我们不可能把所有的方法都记下来，所以我门就需要时不时的查阅文档，就好比我们查字典一样。

常用的学习文档有下面几个:

MDN

官方地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

W3cschool

https://www.w3school.com.cn/js/index.asp

菜鸟教程

https://www.runoob.com/js/js-tutorial.html

这里建议大家使用MDN文档。因为这个文档比较全，可以快速检索

px和rpx的转换

指定自己的样式具有优先权 !important

调节文本对齐方式

Flex布局容器

• 元素排列方向flex-direction:

• 定义flex容器

• 是否让容器内的元素换行flex-wrap

• 元素在主轴的对齐方式justify-content

Space-between:两端对齐，元素之间平均等分剩余空白间隙部分。

Space-around:元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

• 元素在交叉轴上的对齐方式align-items

  stretch:(默认)当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

• align-content 轴线的对齐方式（轴线当作元素）

  

• order:设置flex容器内部每个元素的排列顺序，排序规则由小到大

• 控制元素的放大比例（flex-grow）

• 控制元素的缩放比例（flex-shrink）
• 设置元素占主轴固定或自动空间的占比

• 重写某一个flex成员项的在交叉轴上的对齐方式（align-self）

案例分析

Q:如何调节下面琼A123456的边框成下方样子居中？

 A:

①首先调节文本的宽度和高度，确定整个框的大小

 ②增加文本的左右Padding

③在父级容器内，使用flex布局让文本框居中

 

 案例分析

Q:如何使下方的导航标识固定在下方且不被遮挡覆盖，页面中间内容过多时可以下拉，且导航一直不变？

然后调节该容器的背景为全白

然后更改上方容器的下边距margin为15%

‘让后给包裹上方容器的所有容器都设置高度自适应 auto

Css浮动布局

用于想让元素盒子固定在某个地方或者盖在某个盒子的情况

子绝(absolute)夫相(relative)

给最大的盒子relative

小盒子absolute后，该盒子就浮动起来了，会覆盖在正常盒子上面

通过调节top和left改变位置

通过改变z-index改变图层顺序

 

Css样式

1.适配不同大小屏幕的方法：

让最大的盒子的高度宽度用vh、vw来显示

2.让div出现下滑框

3.让下拉滑轮隐藏

4.让点击到盒子时鼠标变成一只小手

 

让弹性盒子元素在必要时候换行

display:flex;

flex-wrap: wrap;