金小刚_20210112金小刚
一：知识点总结
常用CSS属性
### 四周边框风格
批量设置四边边框风格可以通过 border-style 属性来实现:
border-style : none | solid | double | dotted | ... ;
外边距折叠
理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一
个外边距，即最大的单个外边距的大小。
在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为
30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>
</body>
</html>
标准盒模型
在标准模型中，如果你给盒设置 width 和 height ，实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。
margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空
间。盒子的范围到边框为止 —— 不会延伸到margin。
display
使用display: inline-block
display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况
非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
一个元素使用 display: inline-block ，实现我们需要的块级的部分效果：
设置 width 和 height 属性会生效。
padding , margin , 以及 border 会推开其他元素。
但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大
背景样式
.box {
background: linear-gradient(105deg, rgba(255,255,255,.2) 39%,
rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, rebeccapurple;
}
背景颜色
background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色扩展到元素的内容和内边距的下面。
color:指定背景颜色。
transparent：指定背景颜色应该是透明的。这是默认值
inherit：指定背景颜色，应该从父元素继承
背景图片
background-image 属性允许在元素的背景中显示图像.
#### 控制背景平铺
background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
background-repeat 是 background-repeat-x 和 background-repeat-y的简写
#### 调整背景图像的大小
background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
cover ：—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况
下，有些图像可能会跳出盒子外
contain： — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽
比不同，则可能在图像的任何一边或顶部和底部出现间隙。
背景图像定位
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
渐变背景
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%,
rgba(51,56,57,1) 96%);
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%,
rgba(51,56,57,1) 96%);
多个背景图像
background-image: url(image1.png), url(image2.png), url(image3.png),
url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;
背景附加
scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背
景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始
终保持在屏幕上相同的位置。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，
因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元
素上，因此当您滚动元素时，背景也随之滚动。
书写模式
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
溢出的内容
overflow属性
overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值
为 visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 隐藏掉溢出。其余内容是不可见的。 |
| scroll | 显示滚动条，即使没有足够多引起溢出的内容 |
| auto | 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
溢出文字处理
/* 溢出文本处理 */
overflow: hidden; /* 溢出部分 隐藏 */
white-space: nowrap; /* 空白部分 不换行 */
text-overflow: ellipsis; /* 溢出的文本变成省略号 */
阴影
box-shadow 属性可以设置一个或多个下拉阴影的框
| h-shadow | 必需的。水平阴影的位置。允许负值 |
|---|---|
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离（程度） |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
鼠标样式
自定义鼠标样式
cursor: url(xxx),auto;
滚动条样式
::-webkit-scrollbar 滚动条整体部分（宽高等）
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是
垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
二：心得体会
通过今天的学习深度的理解了以前学习过的知识点，通过使用不同的知识点来给html添加不同的特效，让自己的网页制作不在局限于以前的那么僵硬。并且在学习过程中发现了很多以前不知道的知识，通过今天的学习我深切的感受到了自己的不足，通过这次的学习我的知识库又得到了补充。自己的学习就是痛并快乐着。
近期评论