第三周学习以及项目分析

一、背景属性

background-color：背景色

background-image：背景图

background-repeat：背景图的平铺方式

        属性值：no-repeat：不平铺，repeat:平铺（默认值），repeat-x：水平方向平铺，repeat-y：垂直方向平铺

background-position：背景图的位置

        属性值:水平方向位置，垂直方向位置

background-size：背景图的缩放

        属性值：关键字：cover（等比例缩放背景图片以完全覆盖背景区，可能部分背景图片看不见）contain（等比例缩放背景图片以完全装入背景区，可能部分背景区空白）   百分比:根据盒子尺寸计算图片大小    数值+px。

background-attachment背景图固定

        作用:背景不会随着元素的内容滚动。属性值：fixed（）

background：背景复合属性

        属性值：背景色 背景图 背景平铺方式 位置/缩放 固定（空格隔开属性值，不区分顺序）

二、显示模式

块级元素：独占一行，宽度默认是父级的100%，添加宽高属性生效

行内元素：加宽高不生效，尺寸由内容撑开，一行存在多个元素

行内块元素：加宽高生效，尺寸由内容撑开，一行存在多个元素

转换显示模式：属性名：display  属性值：block（块级）line-block（行内块）

 

三、选择器

结构伪类选择器

作用：根据元素的结构关系找元素

写法：E：first-child（第一个E元素）last-child（最后一个E元素）nth-child（n）（第n个E元素）

nth-child（）寻找多个标签

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放修饰性的内容

写法：E::before（最前面添加伪元素）E::after（最后面添加伪元素）必须设置content属性值

四、盒子模型

组成：内容区域-width&height  ；内边距-padding（出现在内容与盒子边缘之间）；border-边框线；外边距-margin（出现在盒子外面）

border（边框线）：属性值：边框线粗细 线条样式 颜色（不分先后）--solid（实线），dashed（虚线），dotted（点线）：

还可以设置单方向边框线：写法 border-方向名词

padding（内边距）：写法padding-方位名词

padding的多值写法：padding：上，下，左，右；padding：上，左右，下；padding：上下，左右；

尺寸计算：盒子尺寸=内容尺寸+border尺寸+内边距尺寸；注意：给盒子写padding/border会撑大盒子，解决办法：手动解决（减掉padding/border的尺寸）；内减模式（box-sizing：border-box）

magain（外边距）：作用：拉开两个盒子的距离（不会撑大盒子）

版心居中：左右的属性值写auto即可（盒子要有宽度）

清除默认样式：比如某些标签自带的内外边距：box-sizing：border-box

元素溢出：属性名overflow    属性值：hidden（溢出隐藏）；scroll（溢出滚动，无论溢出都显示滚动条）；auto（溢出滚动，溢出才显示）

盒子模型--圆角

作用：设置元素的外边框为圆角

属性名：border-radius   属性值：数字px/百分比（意思都是圆角半径）

常见应用：

正圆（给正方形盒子的圆角属性值设为宽高的一半即可/50%）

胶囊形状：（给长方形盒子的圆角属性值设为高度的一半）

盒子模型-阴影

作用：给盒子设置阴影效果 

属性名：box-shadom  属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半经 颜色 内外阴影 （X Y偏移量必须书写，默认是外阴影，内阴影需要加inset）

清除浮动（了解即可）：

1.单标签法：写一个div的标签并用上类选择器clear fix

2.或者直接写一个单伪元素类：

        .cleanfix::after{
            content: "";
            display: block;
            clear: both;
        }

需要的时候使用即可

3.双伪元素法

        .cleanfix::before,
        .cleanfix::after {
            content: "";
            display: table;
        }
        .cleanfix::after{
            clear: both;
        }

4.父元素添加css属性overfl:hidden即可

flex布局

        也叫弹性布局，浏览器推荐的布局模型，非常适合结构化布局（不会产生浮动布局的脱标现象，网页布局更简单更灵活）

flex组成

设置方式：给父元素设置display：flex，子元素可以自动拉伸或挤压
创建flex容器  display: flex
主轴对齐方式  justify- content

侧轴对齐方式  align- items

某个弹性盒子  align-self
侧轴对齐方式，修改主轴方向  flex-direction

弹性伸缩比  flex   属性值：整数数字，表示占用父级剩余尺寸的份数
弹性盒子换行  flex-wrap  属性值：wrap（换行）
行对齐方式  align- content
 

项目分析

我的项目主要是一个校园内部的一个二手交易平台，他的主要功能就是展示以及物品的上传。

遇见的困难：

遇见在运行后端的时候出现一个问题代码如图：

解决办法：就在src的文件下的\main\resources\application.properties里添一串server.port=8020即可解决问题

打开项目后如图：

里面拥有

等内容，在后续工作就可以为他添加或者上传图