姜玉琪_20210112- 姜玉琪
知识点总结：
1、重置按钮:
<form>
<input type="text" name="" id="" value="初始值" />
<input type="reset" value="重置"/>
<button type="reset">重置</button>
</form>
2、选择每个
中的每个 元素并设置其样式，其中的
元素是其父元 素的第一个子元素：
p:first-child{
color: red;
}
p:last-child{
color: blue;
}/*最后一个子元素 */
3、与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
4、尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸</title>
<style>
html{
font-size: 20px;
}
span{
width: 800px;
}
div{
background-color: green;
/*
px 像素
% 父元素宽度的百分比
em 1em 指其 font-size 的大小
rem 1rem 等于 其根节点的 font-size 大小
*/
font-size: 20px;
width: 300px;
height: 300px;
/* 边框宽度 */
border-width: 5px;
/* 边框样式 */
border-style: solid;
/* 边框颜色 */
border-color: pink;
/* boder: 5px solid pink; */
/* border-radius: 0px; */
margin: 10px auto;
}
section, aside{
width: 300px;
height: 300px;
}
section{
background-color: red;
}
aside{
background-color: black;
}
</style>
</head>
<body>
<span>内联元素</span>
<aside></aside>
<div></div>
<section></section>
</body>
</html>
5、边距
外边距：margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
例子：
margin:10px 5px 15px 20px;
/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/
内边距：padding 简写属性在一个声明中设置所有内边距属性。
注意：不允许指定负边距值。
例子：
padding:10px 5px 15px 20px;
/*上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px*/
6、替代盒模型：
你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因， css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和 填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
.box {
box-sizing: border-box;
}
8、背景样式
（1）背景颜色：
background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色 扩展到元素的内容和内边距的下面。 元素的背景是元素的总大小，包括填充和边界（但不包括外边距）
/* h 色相 0 到 360 s 饱和度 0% 为灰色， 100% 全色 l 亮度 0% 为暗, 50% 为普通, 100% 为白 */
background-color: hsla(120, 100%, 50%, .5);
rgba(255,255,255,.5) hsl(h 色相 0 到 360, s 饱和度 0% 为灰色， 100% 全色, l 亮度 0% 为暗, 50% 为普通, 100% 为白)
（2）背景图片
background-image 属性允许在元素的背景中显示图像.
默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方 框。
如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加 一个background-color属性，看看效果如何。
background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
调整背景图片的大小：
background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景
也可以使用关键字:
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况 下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽 比不同，则可能在图像的任何一边或顶部和底部出现间隙。
背景图片定位：
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系 中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
注意：默认的背景位置值是(0,0)
可以使用像 top 和 right 这样的关键字
background-position: top center;
或者使用 长度值, and 百分比：
background-position: 20px 10%;
你也可以混合使用关键字，长度值以及百分比:
background-position: top 20px;
还可以使用4个值的语法来指示到盒子的某些边的距离:
background-position: top 20px right 10px; /* 将背景从顶部调 整20px，从右侧调整10px*/
渐变背景：
渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置。 网上有许多渐变生成器https://cssgradient.io/。
linear-gradient 线性梯度渐变，延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复
9、溢出内容
我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢 出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。
（1）
overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值 为 visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
<style>
.lyric-container{
width: 300px;
height: 500px;
overflow: auto;
cursor: url(img/favicon.ico), auto;
}
/* 滚动条整体部分 */
.lyric-container::-webkit-scrollbar{
width: 15px;
height: 15px;
}
/* 定义滚动条的轨道颜色、内阴影及圆角 */
.lyric-container::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
/* 滚动条里面的小方块 */
.lyric-container::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
/*定义两端按钮的样式*/
.lyric-container::-webkit-scrollbar-button {
background-color:cyan;
}
/* 滚动条里面的小方块鼠标悬停的样式 */
.lyric-container::-webkit-scrollbar-thumb:hover{
background: #333;
}
</style>
.box{
width: 500px;
height: 30px;
font-size: 24px;
/* 溢出文本处理 */
overflow: hidden; /* 溢出部分 隐藏 */
white-space: nowrap; /* 空白部分 不换行 */
text-overflow: ellipsis; /* 溢出的文本变成省略号 */
}
心得体会
对以前的知识复习，同时也学到了很多新的知识。
评论留言