金小刚_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添加不同的特效,让自己的网页制作不在局限于以前的那么僵硬。并且在学习过程中发现了很多以前不知道的知识,通过今天的学习我深切的感受到了自己的不足,通过这次的学习我的知识库又得到了补充。自己的学习就是痛并快乐着。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1