[上海|结业弟子]JS-赵朋|2019年09月12日的日报-技能树.IT修真院

发表于： 2019-09-12 23:48:46

1 1121

task6

今天完成的事情

header

使用flex布局居中

弹性容器内的弹性元素，具有flex属性，但其子元素不能继承

所以要想弹性元素的子元素具有flex属性，要为其本身再设一个display;flex声明

header，文本框水平垂直居中，且有部分重叠

先为header声明display：flex

设一个.h_txt盒子包裹两个文本框，用两个文本框子元素撑开，flex基本属性水平居中，

margin;auto,垂直居中，文本同理

.header_txt{

margin:auto;

}

部分重叠，运用float属性，当为两个盒子都设置float：left时，它们会并排一列，由左向右排列

，当只为左边盒子设置float属性，右边不设，就会重叠

float;left margin-left

float:right margin-right

运用margin-left达到事例显示效果

.header_l{

float: left;

width:200px;

height: 50px;

background-color: rgb(85,168,179);

border-radius:5px;

}

.header_r{

margin-left:180px;

width:200px;

height: 50px;

background-color:white;

border-radius:5px;

}

遇到问题，

想法，由flex属性为<P>水平居中，再用margin垂直居中

但是

为.h_l设置flex属性，根据其默认属性，应该，其子元素<p>应该由flex的默认属性

沿主轴由左向右，左对齐，水平居中，结果没效果

单独设置margin;auto,也没效果

都显示为

两个一起设置却达到目的效果

待理解

flex属性会使float失效

静态显示效果达到

雪碧图

什么是雪碧图？

雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

background-image: url 插入

background-position

background-image

background- repeat组合定位

使用雪碧图的优点有以下几点：

1.将多张图片合并到一张图片中，可以减小图片的总大小。

2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

如何生成雪碧图？

这个有很多软件可以使用，我使用的是Firework。首先新建文件夹，宽度一般为100像素，高度可以根据图片的大小来设定，画布颜色为透明色，点击确定。再返回图片，点击裁剪工具，再点击指针工具，Ctrl+c复制，Ctrl+v粘贴。

如何使用雪碧图？

1.确定在哪里引入精灵图，并为其设置大小。

2.在样式CSS中插入背景图，background-image:url("");

3.利用background-position：x y;属性和background-size：cover；background-repeat：no-repeat;等属性的组合进行定位。

在使用精灵图过程中可能会遇到的问题：

雪碧图太大了，放到指定位置只能显示一部分！

两个解决方法：1.上传雪碧图时就按照你需要的大小上传

2.使用background-size: 属性缩放整块背景图，这里要注意下缩放了背景图的大小，对应的background-position也要同比例缩放。

background-position

标签定义及使用说明

背景位置属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为“fixed（固定）”。

默认值：	0％0％
继承：	没有
版本：	CSS1
JavaScript语法：	object object.style.backgroundPosition =“center”

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承