2018_IFE 9-11天任务 心得体会与读书笔记

原本看到这次设计稿的时候一脸懵逼，觉得很难，因为这学期学业繁忙。所以做了很多天，有时候写累了又去玩一会，做的还是太慢了。

    下面将实现设计稿过程中遇见的疑难杂症和解决办法记录下来。

     HTML:

1.页面中遇见文字前面跟小图标的，一共有两种，分别是img、list-syle-image。但是list-syle-img和list-style-type都有一个问题，在一个文档中不能多次定义list-style属性。不然后设置的list-style将失效。

2.页面为了防止浏览器最上层出现白条，必须初始化css。

*{
    padding: 0;
    margin:0;  /*不是body、html标签初始化样式，二是用*标签，不然body上外边距取消不了*/
}

3.输入框需要设置背景颜色透明才能显示外层背景颜色，transparent

4.如果单是设置图片float，图片会脱离文档流布局上，段落的范围会穿过图片，但是文字会被图片所阻挡。如果将文字段落也设置为float，则段落范围也被图片所阻挡

5.要想背景图片自适应高度宽度，必须bg-size 100% 100%

6.当文字段落标签（例如p,h1这次只遇见这两个，其他的应该也是，下次遇见测试一下）设置与另一个文字段落标签的margin的时候，使用padding，如果使用margin标签，会导致的是增大父盒子与其相邻盒子间的margin。我理解为是p、h1标签没有盒子模型，是裸露着的这与div以及Img等等元素不太一样，需要注意

7.子元素的width、height百分比设置取决于父元素的宽高，并且子元素的padding、margin百分比设置全部是基于父元素的width；并不是margin-top、padding-top基于高度，margin-left、pading-left基于宽度，其余方向同理。

8.使段落两端对齐使用justify，一般用于报刊版面等对格式外观要求较严格的布局

9.hr背景色设置常用方法，高度设置为1像素，无边框，背景色为想设置的hr颜色

hr{                               /*hr背景色设置常用方法，高度设为1像素，无边框背景色为想设置的hr颜色*/
    height:1px;
    border:none;
    background-color: rgba(24, 17, 17,0.2);
}


github预览地址：https://rollingj.github.io/2018_IFE/9-11%E5%A4%A9%E8%AE%BE%E8%AE%A1%E7%A8%BF1/layout1.html
                                                点击打开链接