贺佳磊_20210112贺佳磊
知识点总结
1、视频播放javascrip
（1）获取到 video 元素
（2）获取 video 元素的播放状态(是不是暂停的)
（3）根据视频的状态判断
<script type="text/javascript">
var video=document.querySelector('#video');
var but=document.querySelector('#but');
function cont(){
console.log(video);
var videostat=video.paused;
if (videostat) {
video.play();
but.innerText='暂停';
} else{
video.pause();
but.innerText='播放'
}
}
**2、选择器**
标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择
器。
**3、元素尺寸**
元素尺寸设计元素宽度（width）和高度（height）两个属性。
**4、边框**
元素的边框涉及属性较多，不仅涉及 粗细 、样式 、颜色 等属性，
还可以针对某一条边来设置边框的 粗细、样式、颜色 等。
```css
img{
width: 400px;
height: 400px;
border-width: 10px;
border-style: solid;
border-color: aquamarine;
border-radius:200px ;
}
5、外边距
padding: 20px;
6、内边距
margin: 50px;
7、盒子模型
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。
CSS中组成一个块级盒子需要:
| 属性 | |
|---|---|
| Content box | 这个区域是用来显示内容，大小可以通过设置 width 和 height 。 |
| Padding box | 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。 |
| Border box | 边框盒包裹内容和内边距。大小通过 border 相关属性设置。 |
| Margin box | 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。 |
8、display
display 属性规定元素应该生成的框的类型。
display属性的值：
| 属性 | |
|---|---|
| block | 元素呈现块元素特征，此元素前后会带有换行符 |
| inline | 元素呈现行内元素特征，元素前后没有换行符 |
| inline-block | 元素呈现行内并保持宽和高的属性，行内块元素 |
| none | 元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间 |
9、背景图片
9.1 控制背景平铺
background-repeat 属性用于控制图像的平铺行为。
| 值 | |
|---|---|
| no-repeat | 不重复 |
| repeat-x | 水平重复 |
| repeat-y | 垂直重复 |
| repeat | 在两个方向重复 |
9.2 调整背景图像的大小
background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
| 值 | |
|---|---|
| cover | 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外 |
| contain | 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽 |
9.3背景图像定位
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置，它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
9.4 渐变背景
| 值 | |
|---|---|
| linear-gradient | 线性梯度渐变，延伸到整个盒子上 |
| radial-gradient | 有一个固定的大小，因此会重复 |
9.5 背景附加
可供选择的背景是指定他们如何滚动时，内容滚动，这是由 background-attachment 属性控制。
| 值 | |
|---|---|
| scroll | 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。 |
| fixed | 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。 |
| local | 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。 |
9.6 多个背景图像
也可以有多个背景图像—在单个属性值中指定多个 background-image 值，用逗号分隔每个值。
9.7 background-clip
| 值 | |
|---|---|
| border-box | 背景延伸至边框外沿（但是在边框下层） |
| padding-box | 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。 |
| content-box | 背景被裁剪至内容区（content box）外沿 |
| text | 背景被裁剪成文字的前景色(这是一个实验性的 API，请尽量不要在生产环境中使用它。) |
9.8 使用background的简写
10、处理不同方向文本
CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换
到另一种模式。
writing-mode 的三个值分别是：
| 值 | |
|---|---|
| horizontal-tb | 块流向从上至下。对应的文本方向是横向的。 |
| vertical-rl | 块流向从右向左。对应的文本方向是纵向的。 |
| vertical-lr | 块流向从左向右。对应的文本方向是纵向的。 |
11、溢出的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>溢出</title>
<style>
.box {
border: 1px solid salmon;
width: 200px;
height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">一个人的成长是需要适度压力的存在的，也只有适度压力的存在，我们才可以才能够不断的进步，不断的拥有成功的喜悦，才能够健康快乐的成长。</div>
</body>
</html>
| 值 | |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 隐藏掉溢出。其余内容是不可见的。 |
| scroll | 显示滚动条，即使没有足够多引起溢出的内容 |
| auto | 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
12、css的值
长度：最常见的数字类型是
对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
13、修饰字体文字
| 属性 | |
|---|---|
| color | 字体颜色 |
| font-size | 字体大小,通常用像素(px)来定义大小 |
| font-weight | 字体粗细 |
| font-famliy | 字体 |
| font-style | 字体风格 |
| text-decoration | 字体加横线 |
| text-align | 字体所处位置 |
| line-height | 行高，一般要纵向居中设置为 height 的高度 |
| text-indent | 首行字的缩进 建议用em（缩进多少倍数）做为单位 |
| text-shadow | 3px 4px 5px #AAA阴影 (CSS3的效果) |
| vertical-align | 设置元素的垂直对齐方式。 |
14、阴影
box-shadow 属性可以设置一个或多个下拉阴影的框
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离（程度） |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
15、透明度
opacity 用于设置元素的透明度， 值的范围是 0~1 。1 为不透明， 0 为完全透明
16、鼠标样式
cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair……
用户也可以自定义一个鼠标样式:
cursor: url(xxx),auto;
17、修改滚动条样式
| 属性 | |
|---|---|
| webkit-scrollbar | 滚动条整体部分（宽高等） |
| webkit-scrollbar-thumb | 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是 垂直滚动条还是水平滚动条） |
| webkit-scrollbar-track | 滚动条的轨道（里面装有Thumb） |
| webkit-scrollbar-button | 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 |
| webkit-scrollbar-track-piece | 内层轨道，滚动条中间部分（除去） |
| webkit-scrollbar-corner | 边角，即两个滚动条的交汇处 |
| -webkit-resizer | 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 |
心得体会
今天是在云创动力学习的第二天，老师来到教室的第一件事就是互相交流昨天学习的感受或者学习中的疑惑，很幸运的是我被点名了，我提了昨天课堂上的疑问，老师第一时间解决我的问题，我也是很认真听，虽然有些吃力，但老师讲的真的很细，每一步的代码能实现什么作用，为什么这样写都讲的很清楚，听完后瞬间懂了，后面又讲了些css，有些属性是很简单，老师也过的很快，可是自己基础差，有很多都不太会用，这需要我自己下去多练，多熟悉熟悉。今天是收获满满，明天打起精神，要更加努力了，加油！
近期评论