姜玉琪_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; /* 溢出的文本变成省略号  */
            }

心得体会

对以前的知识复习,同时也学到了很多新的知识。

标签

评论

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