发表于: 2016-01-29 22:17:10

2 2297


有大神师哥回复我了    @css-L1T001C01-19 @css-L1T001C01-19  @css-L1T001C01-19  (重要的事情说三遍,谢谢了)  感觉好激动,发现好人无处不在 !!!!                                           



这是师兄给我的建议,讲的非常好!!!!!


第一:九宫格其实就是9个div盒子模型 外面包裹着一个更大的div盒子模型

第二:首先先定义外面最大的一个盒子模型。。(例如宽度 高度)

第三:里面定义9个小div盒子模型,也要定义宽度 。但是每一行需要3个div盒子,所以3个div盒子模型加起来的宽度不能超过或等于 最大div的设置宽度。

第四:九宫格里面,每个小格子会隔开距离。。想过没有?怎么隔开? W3C也有(其实就是外边距margin)

第五:颜色怎么弄呢? 就是背景颜色background

然后还是的不懂话请点击这里


---------------------------------------------------------------------------------------------------------------


今天完成的事

1按照师兄的教导,自己重新敲了一遍

2配置好Nginx

3开始了task2


明天计划的事情

1去注册GitHub

2下载WebStorm

3将代码上传到github


--------------------------------------------------------------------------------------------------------------

遇到的问题


已解决

Q:dispaly的使用以及深入了解块级元素行内元素的区别

A:

在标准文档流里面,块级元素具有以下特点:

①总是在新行上开始,占据一整行;
②高度,行高以及外边距和内边距都可控制;
③宽带始终是与浏览器宽度一样,与内容无关;
④它可以容纳内联元素和其他块元素。

行内元素的特点:

①和其他元素都在一行上;
②高,行高及外边距和内边距部分可改变;
③宽度只与内容有关;
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用


Q:em 和rem 和 px 的使用(刚开始px使用的较多,对em不是很了解,学习之后发现rem用处很大啊)

A:

EM特点 

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

(链接:http://www.cnblogs.com/leejersey/p/3662612.html)

让我更加深刻了解了  {font-size: 62.5%};的作用(一开始是一头雾水啊)


Q:九宫格的圆角矩形中的圆角

A:border-radius


Q:如何外联css(以前都是直接在页面中添加,看了师兄的代码学会了外联)

A:<link href="###.css" rel="stylesheet">


Q页面的响应和宽度自适应

A:<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

---------------------------------------------------------------------------------------------------------------


未解决的问题

我代码的截图:


问题

A:margin 和padding的理解还是有点模糊

当我设置div{margin:5%;padding:5%}时结果是


求讲解啊~~~~~~~~~


A:{background: coral none repeat scroll 0 0;}中最后两个00代表什么????????


A:还有最后

@media not all {
.html {
    font-size: 42.5%;
}

这个42.5%是怎么来的,有什么用呢????


收获:今天一天去练车了,收获的都是一些细节问题,自己还是要好好去w3school上敲一些案例

希望能获得师兄的点评和讲解,在下跪谢!!!!!!!!




返回列表 返回列表
评论

    分享到