20210523 于晓雯

日志

一、学习总结

1、margin 属性设置元素的外边距，外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

2、margin 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上，则和下一样，左和右一样 （对称的值。

3、让块元素横向居中显示：margin: value auto;

4、padding 属性设置元素的填充，以值必须是0或正的值；padding 如果值超过一个，按上右下左的顺序渲染，如果缺省则上，则和下一样，左和右一样 （对称的值一样）。

5、盒子模型：

​ 1）Content box: 内容区域，可以通过width 和 height设置大小 。
​ 2）Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
​ 3）Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性置。
​ 4）Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域；大小通过 margin 相关属性设置。

6、替代（IE）盒模型可以设置 box-sizing: borderbox 来实现。

7、盒子模型和内联盒子。

8、display 属性规定元素应该生成的框的类型。display属性的值：
1）block:块元素特征，此元素前后会带有换行符。
2）inline:内联元素特征，元素前后没有换行符。
3）inline-block：内联并保持宽和高的属性，行内是块元素。
4）none:不显示，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。

9、background 属性设置背景样式。包括background-color 属性定义背景颜色；background-image 属性允许在元素的背景中显示图像；background-size 属性，它可以设置长度或百分比值，来调整图像的大小；background-position 属性背景选择图像显示在盒子中的位置；使用 background-image 属性也设置渐变背景；background-attachment 属性设置背景附加；background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

10、书写模式：writing-mode 的三个值分别是：
1）horizontal-tb :从上至下。文本方向是横向的。
2）vertical-rl : 从右向左。文本方向是纵向的。
3）vertical-lr : 从左向右。文本方向是纵向的。

11、overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值为 visible：

​ 1）visible 默认值。内容不会被修剪，会呈现在元素框之外。
​ 2）hidden 隐藏掉溢出。其余内容是不可见的。
​ 3）scroll 显示滚动条，即使没有足够多引起溢出的内容。
​ 4）auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。

12、长度：length; color:字体颜色；font-size:字体大小,通常用像素(px)来定义大小；font-weight:字体粗细;font-famliy:字体;font-style:字体风格;text-decoration：字体加横线;text-align:字体所处位置;vertical-align 设置元素的垂直对齐方式。

13、box-shadow 属性可以设置一个或多个下拉阴影的框：

box-shadow: h-shadow v-shadow blur spread color inset;

​ 1）h-shadow 必需的；水平阴影的位置；允许负值。
​ 2）v-shadow 必需的；垂直阴影的位置；允许负值。
​ 3）blur 可选。模糊距离（程度）。
​ 4）spread 可选。阴影的大小。
​ 5）color 可选。阴影的颜色。
​ 6）inset 可选。从外层的阴影（开始时）改变阴影内侧阴影。

14、opacity 用于设置元素的透明度， 值的范围是 0~1 。1 为不透明， 0 为完全透明

15、cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair，用户也可以自定义一个鼠标样式:

​ cursor: url(地址),auto;

16、list-style：列表属性
1）list-style:none; 没有点的呈现。
2）list-style: disc; 呈现圆点。
3）list-style: circle; 空心圆。
4）list-style: square;正方块。

二、心得体会

今天知识点比较多，在嵌套的时候偶尔会出问题，总而言之就是痛并快乐着，还有就是许多问题能想到解决办法，但实现起来就会出问题，就比如说九宫格里嵌套小宫格时，明明已经设置了内联，就是不出现该有的效果，怎么改也出不来效果。

三、疑难问题

1、做九宫格时各个方块之间的间隔处理除了用块元素头尾相连的方法外，还有什么快捷方法？

2、在进行块元素居中时，用margin：0px auto为什么不能居中？