今天完成的事情：完成任务10深度思考，CSS的负margin值之理解和应用

明天计划的事情：整理自适应布局的相关知识，选择less或sass中的一门进行学习

遇到的问题：radio单选框无法实现单选

没有给每个radio添加相同的name属性

收获：

一、日常收获

1、CSS的负margin值之理解和应用

第一种情况：元素没有设置浮动且没有设置定位或者 position 为 static

如果元素没有设置浮动并且没有设置定位或者 position 属性为 static 的情况下，对元素的 margin 设置负值会有以下的效果：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素会按照设置的方向移动相应的距离。

比如，设置 margin-left: -100px;。 那么，元素会往左移动 100px。对于设置 margin-top 也是一样的道理。

设置的 margin 的方向为 bottom 或者 right

当设置负值的 margin 的方向为 bottom 或者 right 的时候，元素本身并不会移动，元素后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。

比如，设置 margin-right: -100px;。那么，元素本身并不会移动，后面的元素会向左移动 100px 到该元素上。对于设置 margin-bottom 也是同样的道理。

同时，在元素不指定宽度的情况下，如果设置 margin-left 或者 margin-right 为负值的话，会在元素对应的方向上增加其宽度。效果就和设置 padding-left 或者 padding-right 一样。

第二种情况：元素没有设置浮动且 position 为 relative

如果元素没有设置浮动，但是设置了相对定位，设置 margin 为负值的时候，表现如下：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

当设置 margin-bottom/left 的时候，元素本身也不会移动，元素后面的其他元素也会往该元素的方向移动相应的距离，但是，该元素会覆盖在后面的元素上面 (当然，此处说的情况肯定是后面的元素没有设置定位以及 z-index 的情况)。

第三种情况：元素没有设置浮动且 position 为 absolute

如果元素没有设置浮动，但是设置了绝对定位，设置 margin 为负值的时候，表现如下：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

由于设置绝对定位的元素已经脱离了标准文档流，所以，设置 margin-right/bottom 对后面的元素并没有影响。

第四种情况：元素设置了浮动

肯定没有既设置了浮动又设置绝对定位的情况，那样太荒唐了。

设置了浮动的元素，再设置 postion: relative; 的话，元素的行为和单独设置 float 是一样的。

对于设置了浮动的元素，设置 margin 为负值的时候，表现如下：

如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。

如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。

二、任务九深度思考

1.如何改变默认radio和select的样式？

改变默认radio样式

label::before{
    display: inline-block;
    content: "";
    width: 10rem;
    height: 10rem;
    border: 10px solid #d7d7d7;
    border-radius: 50%;
}

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

input[type="radio"]:checked + label::before {
    background-color: #01cd78;
    background-clip: content-box;
    padding: .2em;
}

改变默认select样式

HTML代码

<div>
    <select name="">
        <option value="芝士">芝士</option>
        <option value="奶油">奶油</option>
    </select></div>
1
2
3
4
5
6

给select添加父元素div目的是为了，用div的样式覆盖住select样式。

CSS代码

div{

                //用div的样式代替select的样式

                width: 200px;

                height: 40px;

                border-radius: 5px;

                //盒子阴影修饰作用,自己随意

                box-shadow: 0 0 5px #ccc;

                position: relative;

            }

            select{

                //清除select的边框样式

                border: none;

                //清除select聚焦时候的边框颜色

                outline: none;

                //将select的宽高等于div的宽高

                width: 100%;

                height: 40px;

                line-height: 40px;

                //隐藏select的下拉图标

                appearance: none;

                -webkit-appearance: none;

                -moz-appearance: none;

                //通过padding-left的值让文字居中

                padding-left: 60px;

            }

            //使用伪类给select添加自己想用的图标

            div:after{

                content: "";

                width: 14px;

                height: 8px;

                background: url(img/xiala.png) no-repeat center;

                //通过定位将图标放在合适的位置

                position: absolute;

                right: 20px;

                top: 45%;

                //给自定义的图标实现点击下来功能

                pointer-events: none;

            }

2.自适应小屏幕设备时，该如何布局？

页面能适配众多不同的终端设备，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）

2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

1 学会运用 css3 Media Queries，根据不同的屏幕分辨率，选择应用不同的css规则

@media screen and (max-width:400px){    

    .class  {   

         background:#ccc;    

     }   

 }  

2 在网页头部加上viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

该属性可以控制视窗口宽度的大小。它可以被设置为实际的具体像素width= 600或为特殊设备设置宽度值。 viewport设置属性如下： 

width：可设定数值，或者指定为 device-width 

height：可设定数值，或者指定為 device-height 

initial-scale：第一次进入页面的初始比例 

minimum-scale：允许缩小最小比例 

maximum-scale：允许放大最大比例 

user-scalable：允许使用者缩放，1 or 0 (yes or no)

3 不使用绝对宽度

4 字体最好不要用绝对大小(px)，而使用相对大小(em)

5 流动布局（fluid grid）

.main { float: rightright; width: 70%; }        

.leftBar { float: left; width: 25%; }   

6 图片的自动缩放，等比缩放

img{   max-width: 100%; }   

任务开始时间：2018年5月11日

预计结束时间：2018年5月13日