[外门弟子]JS-8|2019年02月20日的日报-技能树.IT修真院

发表于： 2019-02-20 21:48:24

1 798

Day 25

今天完成的事情

1.select部分差不多完成

2.垂直居中做了功课

3.复习弹性盒子flex

4.将header部分写成按钮样式

遇到的问题

1.select没办法直接做到垂直居中和水平居中

用position : relative 来布局

上部用rem

左边部分用百分比

position: relative;
top: 0.9rem;
left: 42%;

2.select的选择框样式总是不满意，下拉框的边框老是处理不掉，在想能不能有别的办法实现下拉框

去网上搜索，大都需要js辅助，要么就是jquery

终于找到一种只用html和css就可以实现下拉框的办法，那就是用超链接连接<ul>标签和<li>标签以形成下拉框

例如

<li>

</ul>

</li>

不过这样小箭头就又没有了，扶额

3.header的按钮设置了样式之后，除了鼠标悬浮的时候是一只手以外，并没有按下发生变化的动画，好失望

4.雪碧图比我想象的要简单一些，只不过好像网上没有说自动生成的雪碧图要怎么使用，实际上很简单

在网站上自动生成雪碧图，同时会生成对应图标的位置及大小，

例：

将位置复制到外联css表中

html body {
    font-size: 62.5%;
    font-family: SimSun-ExtB, sans-serif;
    width: 100%;
    height: 100%;
}
*{
    padding: 0;
    margin: 0;
}
.bg-Write {
    width: 94px; height: 94px;
    background: url('css_sprites.png') -10px -10px;
}
.bg-地址 {
    width: 19px; height: 23px;
    background: url('css_sprites.png') -122px -74px;
}
.bg-定位 {
    width: 42px; height: 44px;
    background: url('css_sprites.png') -124px -10px;
}

然后在html文件中添加图片

<div class="header">
    <div class="middle">
            <button type="button" class="left"  value="找雇主" >找雇主</button>
            <button type="button" class="right"  value="找护工" >找护工</button>
    </div>
    <button class="bg-定位"></button>
</div>

在css中设置图片样式

.bg-定位{
    position: absolute;
    top: 1rem;
    right:10%;
    border: none;
    outline: none;
    cursor: pointer;
    transform: scale(0.8)
}

需要缩放可以使用

   transform: scale(0.8)

5.引用雪碧图中的图片和并配上<span>标签后，发现图片和文字并不能对其，

本以为是图片下方留白的问题，但设置vertical-align后反而变为稍下方了


vertical-align: middle;

抱着随便试试的态度试了vertical-align的另外几项功能，结果还真被我试出来了

vertical-align: text-bottom;

收获

1.CSS 布局 - 水平 & 垂直对齐常用到的方法

1、水平居中：

1.要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。（注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。）

.center { margin: auto; width: 50%;border: 3px solid #5fc0cd;}

2.文本在元素内水平居中对齐，使用text-align: center; 如果要使单行文字垂直居中，可以使用line-height设置文本高度与所在元素高度一致。

3.图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中,同方法1一样。

4.左右对齐可以使用定位方式 position: absolute; 属性来对齐元素，但是绝对定位元素会被从正常流中删除，并且能够交叠元素；因此经常配合relative使用，绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”,如A定义了relative后，B定义absolute就会相对于A进行移动，为什么一般父元素要用relative而不是其他，是因为relative的特性：移动相对定位元素，但它原本所占的空间不会改变，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套；在这个例子里我们只是要让A作为B的一个参照偏移位置，并不需要A元素以及它周围的元素有所改变。

5.通过设置浮动float达到左右对齐（注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。)

6.设置left=50%,然后利用margin减去元素的宽度

2、垂直居中：

1.元素的头部顶部都使用padding使它垂直方向居中。

2.使用 line-height垂直居中。

3.使用flex布局，align-items属性垂直居中。

4.使用position 和 transform 属性来设置水平和垂直居中。translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动

{ position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);}