今天完成的事情：

做完了任务10，基本没有问题。

明天计划的事情： 

任务11

遇到的问题：

<div class="col-lg-2 col-md-12 col-xs-12">
    <div class="female single-choice-style">
        <input type="radio" id="diameter" name="sex" />
        <label for="diameter">外径</label>
    </div>
</div>

单选框改变颜色的问题，改变样式的问题，有俩种方法 

 1.使用背景图片代替选中效果 
主要原理就是将原来的checkbox隐藏：visibility: hidden属性但它依然占据位置，用图片代替它的位置。 

2.使用css3实现 
主要是利用after，缺点是存在兼容性问题。

还有就是我用的方法，先给他写一个圆的新样式，然后把颜色改变，然后把原来的样式隐藏掉。

input[type="radio"] + label::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 1px 1px 1px 1px #d1d2d4;
    text-indent: .15em;
    line-height: 1;
}
input[type="radio"]:checked + label::before {
    border-color: #1d7ad9;
    background-clip: content-box;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

第一个是写一个div圆，因为自己写的是可以改变样式，先固定样式，然后改变点击事件，它的样式，最后把，它原来的样式改变，直接隐藏。

还有就是导入背景图片，改变背景图片的位置。

.select{
    outline:none;
    height: 32px;
    width: 90px;
    margin-bottom: 30px;
    background-image: url("../img/css10.1.png");
    background-repeat:no-repeat;
    background-position:64px 1px;
    -moz-appearance:none;
    -webkit-appearance:none;
}

你可以在你的CSS图片属性里加上background-position:10px 50px;位置在CSS中有专门的属性来调整：background-position:x y;x的意思是x轴的数值、百分比，位置。y的意思是y轴的数值、百分比，位置。background-position可以设置它的位置，在这个div里面的位置，一个是上下，一个是左右。

@media screen and (min-width: 1200px){
    .one{
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
    }
}

还有就是垂直居中

1. 使用绝对定位和负外边距对块级元素进行垂直居中

2. 使用绝对定位和transform

3. 另外一种使用绝对定位和负外边距进行垂直居中的方式

4. 绝对定位结合margin: auto

5，相对定位相对于整个html50，加上transform

还有就是下拉框居中问题，放小了之后不垂直居中就会，不好看放大了之后，不靠右边就没法对齐，所以

 @media screen and (min-width: 1300px) {
    .all-eyes{
        float: right;
    }
}

我用媒体查询，先给他一个垂直居中的属性，然后在屏幕放大时给他一个浮动让他向右边。

收获：

学会了单选框改变样式，做完了任务10.