春节碎片化学习笔记总结————

这些天完成的事：

1.盒模型的认识

padding的四个方向：上（top），右（right），下（bottom），左（left）

小属性的表达：

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

综合表达：

padding:10px 20px 30px 40px; ——分别对应 上、右、下、左（顺时针方向，用空格隔开）

padding:10px 20px 10px; ——上、右、下（左右相同）

padding:10px 20px; ——上、右 （上下 左右各相同） 等价于:10px 20px 10px 20px;

Margin的方位表示相同

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

2.盒子的大小计算【W3C网站可以进行模拟，实践脑中更清晰】

250px (宽) 

+ 20px (左 + 右 填充) 

+ 10px (左 + 右 边框) 

+ 20px (左 + 右 边距) 

= 300px

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

3.各个名称的熟悉

内容 content

边框 border

填充 padding （因为内边距包含在盒子内部，所以可以理解为填充，名称可以区别于外边距margin）

                  外  margin

边距 ——<

                  内  padding

****border-color  单独使用是不起作用的！ 必须配合使用border-style

一般不这样分开写  

CSS:

div.xx

{

border-style:solid;

border-color:gray

}

这样并在一起写

div.xx

{

border:5px solid gray;

}

HTML:

<div class="xx">dasfsdggsbgss</div>

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

4.块级元素 行级元素分别有哪些，区别何在

块级元素：div , p, form, ul,  li , ol, dl, form...

行内元素：span, strong, em, br, img , input...

1）块级元素会独占一行，其宽度自动填满其父元素宽度

  行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2） 块级元素可以设置 width, height属性，行内元素设置width,  height无效  【注意：块级元素即使设置了宽度，仍然是独占一行的】

3) 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,

  margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平  方向有效，竖直方向无效）

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

5.div&span 的区别【图】

  div是块级元素，可以比喻成盒子，自己独占一行，还能把<div> <span> 封装在里面，用来组成段落和布局。

  span是行内元素，可以比喻成袋子，视觉上和<p>一样，能和其他元素在一行，内容有多宽它就有多宽，但是里面不能添加<span>，它能把段落中的某一   段“装起来”定义样式，呈现更好的效果。

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

6.浮动

学习了CSS定位之一：绝对定位

以最左边为基准点，建立absolute，计算出每个格子的盒子大小，利用left和top来定位

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

7.完成了任务一初步的格布局

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

遇到的问题：

1. margin padding 能不能用百分比表示？？【图】

2.绝对定位的时候，设置了 left和top 但是方块不会移动。显示为 invalid property value

设置left和top的距离，数值没有加像素px单位，导致无法移动

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

明天的计划：

*继续深入学习任务一

**每天写日报记录点滴进步