张宇_20210112张宇
知识点总结
CSS
1、reset按钮
<input type="text" name="" id="" value="111" />
<input type="reset" value="重置"/>
<button type="reset">重置</button>
2、后代选择器
又称为包含选择器:空格即代表是后代
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:first-child{
color: red;
}
p:last-child{
color: blue;
}
</style>
</head>
<body>
<p>背影 (red)</p>
<div class="content">
<p>第一段 (red)</p>
<p>第二段</p>
<p>第三段</p>
<div>
<p>第四段 (blue)</p>
</div>
</div>
<p>...(略) (blue)</p>
</body>
</html>
3、子元素选择器：直接子标签适用此样式
只出现在当前容器下的子类，不出现隔代继承。
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
4、边框
4.1四周边框粗细
border-width:width;
4.2四周边框颜色
border-color:color
4.3四周边框
批量设置四边边框的 粗细（width）、风格(style)、颜色(color) 可以通过 border 属性来实现:
border:width style color;
4.4圆角边框
div{
border:2px solid;
border-radius:25px;
}
5、外边距
margin 属性设置元素的外边距 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以 为负。设置负值会导致和其他内容重叠。
5.1设置四周外边距
设置四周填充一致
margin:value;
margin 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上和下一样，左和右一样 （对 称的值一样）
margin:value1 value2 ...;
5.2外边距折叠
理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一 个外边距，即最大的单个外边距的大小。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one {
padding: 20px;
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>
6、盒子模型
6.1盒模型 的各个 部分
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属 性设置。
6.2标准盒模型
padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
6.3替代盒模型
所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和 填充部分。
7、display
display 属性规定元素应该生成的框的类型。
display属性的值：
- block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符inline-block：元素呈现行内并保持宽和高的属性，行内块元素- none:元素不做呈现，不占网页空间。与
visibility：hidden不同，visibility不显示但占用网页空 间。
7.1display：inline-block
这对于以下情况 非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
8、背景样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.first{
width: 100px;
height: 120px;
border: 10px greenyellow solid;
background-color: hotpink;
background-repeat: no-repeat;
background-image: url(img/img2.jpeg);
/* 改变图片大小*/
/*background-size: contain;*/
/*background-size: cover;*/
/* 背景图片位置*/
/*background-position: top center;*/
/*background-position: 30px 20%;*/
/* 渐变背景*/
background: linear-gradient(90deg, rgba(15,71,233,1) 9%, rgba(34,121,9,1) 35%, rgba(221,237,59,1) 51%, rgba(243,45,60,1) 64%, rgba(0,212,255,1) 100%);
/* 使元素的背景在页面滚动时滚动 */
background-attachment: scroll;
/* 使元素的背景固定在视图端口上 */
/*background-attachment: fixed;*/
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
9、文本的处理
对溢出的文本做省略处理
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 500px;
height: 30px;
font-size: 24px;
/* 溢出文本处理 */
overflow: hidden; /* 溢出部分 隐藏 */
white-space: nowrap; /* 空白部分 不换行 */
text-overflow: ellipsis; /* 溢出的文本变成省略号 */
}
</style>
</head>
<body>
<div class="box" title="央行：征信机构不得过度采集信用信息，采集的个人不良信息的保存期限 自不良行为或事件终止之日起5年">
央行：征信机构不得过度采集信用信息，采集的个人不良信息的保存期限 自不良行为或事件终止之日起5年
</div>
</body>
</html>
10、鼠标悬停时的样式
.lyric-container::-webkit-scrollbar-thumb:hover{
background: #333;
}
心得体会
今天学的东西不少，有些还是比较陌生的，其中对外边距和内边距这一部分用的还不是很熟，子元素选择器还是第一次接触，用的不是很好。我印象最深的就是对文字省略处理和改变鼠标悬停样式的这一部分，我感觉挺有趣的，也比较实用，我要多练一练。
点赞
评论留言