张宇_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;
            }

心得体会

​ 今天学的东西不少,有些还是比较陌生的,其中对外边距和内边距这一部分用的还不是很熟,子元素选择器还是第一次接触,用的不是很好。我印象最深的就是对文字省略处理和改变鼠标悬停样式的这一部分,我感觉挺有趣的,也比较实用,我要多练一练。

标签

评论


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