王斌_2021.1.12王斌
知识点总结
1.后代选择器又称为包含选择器：空格即代表是后代
2.子元素选择器：直接子标签适用此样式
<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>
3.常用CSS属性
元素尺寸
宽度：在CSS代码中通过width属性可以控制元素的宽度，其用法为：
width : value ;
比如：
width ；500px ;
宽度取值可以使用像素为单位，也可以使用百分比，比如：
width : 50%
高度：在CSS代码中通过 height 属性可以控制元素的高度，其用法为：
height : value ;
4.外边距折叠
<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>
设置四周外边距
margin: value;
让块元素横向居中显示
margin: value auto;
5.盒子模型
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
</style>
</head>
<body>
<p>
I am a paragraph and this is a <span>span</span> inside thatparagraph. A span is an inline element and so does not respect width and height.
</P>
6.渐变背景
linear-gradient 线性梯度渐变，延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复
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 值，用逗号分隔每个值，其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image
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;
7.处理不同方向的文本
溢出的文字内容
<style>
.box {
border: 1px solid #333333;
width: 200px;
height: 80px;
}
</style>
<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多，就会出现溢出的情况。如果溢出设置为隐藏，则任何溢出都将不可见。</div>
<p>此内容在方框之外。</p>
overflow属性
overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值为 visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
visible ：默认值。内容不会被修剪，会呈现在元素框之外。
hidden ：隐藏掉溢出。其余内容是不可见的。
scroll ：显示滚动条，即使没有足够多引起溢出的内容
auto： 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。
8.鼠标样式
cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair；用户也可以自定义一个鼠标样式:
cursor: url(xxx),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:
心得体会
今天学习了许多知识，如常用的CSS属性元素尺寸（宽度和高度）边框（border）四周边框的粗细、风格、颜色，还学了设置四周外边距，总感觉自己跟不上学习进度，可能是自身的原因吧，尽快改正让自己能认真学习。
评论留言