日志

一、知识点总结

1、外边距：margin属性设置元素的外边距

（1）设置四周填充一致

margin:value

（2）使元素居中显示

margin:value auto;

2、内边距

padding设置元素的填充

3、盒子模型

（1）Content box:用来显示内容，可以通过width 和 height 设置大小

（2）Padding box: 区域外部的空白区域，大小通过 padding 设置。

（3）Border box: 边框盒包裹内容和内边距。大小通过 border 设置。

（4）Margin box: 盒子和其他元素之间的空白区域。大小通过 margin 设置

（5）margin不计入实际大小

（6）border-box用来定义替代盒模型的大小

4、display：display生成框的类型

（1）block：块元素、前后会带有换行符

（2）inline：内元素、前后没有换行符

（3）inline-block：元素呈现行内并保持宽和高的属性，行内块元素

（4）none:元素不做呈现，不占网页空间。

（5）visibility不显示但占用网页空间。

5、背景样式

（1）background-color：定义了CSS中任何元素的背景颜色

（2）transparent 指定背景颜色应该是透明的

（3）inherit 指定背景颜色，应该从父元素继承

（4）background-image： 在元素的背景中显示图像.

（5）background-repeat属性

​ no-repeat — 不重复

​ repeat-x —水平重复

​ repeat-y —垂直重复

​ repeat — 在两个方向重复

（6）background-size 可以设置长度或百分比值

（7）background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置

（8）linear-gradient 线性梯度渐变

（9）scroll : 使元素的背景在页面滚动时滚动

（10）fixed : 使元素的背景固定在视图端口上

（11）background-clip 设置元素的背景是否延伸到边框、内边距盒子、内容盒子下面。

（12）border-box 背景延伸至边框外沿

padding-box 背景延伸至内边距外沿

content-box 背景被裁剪至内容区外沿

text 背景被裁剪成文字的前景色

6、处理文本

（1）writing-mode 切换文字的排列方向

（2）writing-mode 的值

horizontal-tb : 块流向从上至下

vertical-rl : 块流向从右向左

vertical-lr : 块流向从左向右

7、overflow 控制元素溢出式

（1）visible 默认值

（2）hidden 隐藏掉溢出，其余内容不可见

（3）scroll 显示滚动条

（4）auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。

8、阴影

（1）box-shadow 属性可以设置一个或多个下拉阴影的框

（2）h-shadow 设置水平阴影的位置

v-shadow 设置垂直阴影的位置

9、opacity 设置元素的透明度，1：不透明。0：透明

二、心得体会

​ 今天一天的学习进度可以跟上，也可以听懂，受益不浅。但是有好多前一天的课的内容不是很明白，在编程序的时候有点迷惑，耗费的时间较长。继续加油。