20210112冯娜

知识点总结

一、选择器

1、ID选择器:#xxx 唯一标识。

2、伪类选择器:鼠标不同放置状态的不同表现

(1)a:link 未访问状态

(2)a:visited 访问后的状态

(3)a:hover 鼠标选定状态

(4)a:active 激活选定状态

注意:定义时的顺序必为此顺序

3、后代选择器(包含选择器)空格

例如:

li span{};
#div p{};
li a:hover{};

4、子代选择器 >

例如:

h1>em{};

注意:子代选择器使用时不能隔代继承

5、通用(配)选择器 *

6、组合选择器 用逗号隔开即可

例如:

p,#div,.box{};

二、常用CSS属性

1、元素尺寸

(1)宽度:width:value

(2)高度:height:value

(3)尺寸单位:px(常用)、%(常用)、em、rem

注意:em指其font-size的大小,默认1em=16px

​ rem指其根节点的font-size的大小

2、边框(border)

(1)四周边框:

border-width:value;

(2)边框风格:

border-style:none、solid、double、dotted;

(3)边框颜色:

border-color:value;

(4)边框设置:

border:width style color;
border:2px solid red;

(5)顶部边框:

border-top-width:width;

注意:其风格、颜色设置一样;底部、左边、右边同理。

(6)边框圆角:

border-ridius;

3、外边距(margin)

(1)四周设置外边距与四周边框一致

margin:value;

(2)可以分别设置四周的外边距

margin:value1,value12,value3,value4;/*分别是上左下右*/

(3)块级元素水平居中显示

margin:0px aoto;/*value值可自定义*/

(4)外边距折叠

当两个元素外边距相接,这些外边距会合并为一个外边距,就是最大的那个外边距,不是两个元素的外边距之和

4、内边距(padding)

(1)四周内边距与四周边距一致

padding:value;

(2)可以分别设置四周的内边距

padding:value1,value12,value3,value4;/*分别是上左下右*/

5、盒子模型

(1)标准盒模型

宽度:margin-left+border-left+padding-left+content+padding-right+border-right+margin-right

高度:margin-top+border-top+padding-top+content+padding-bottom+border-bottom+margin-bottom

注意:margin不计入实际大小,影响盒子外部空间,盒子的大小范围到border为止。

(2)怪异(替代)盒模型

宽度:border-left+padding-left+content+padding-right+border-right

高度:border-top+padding-top+content+padding-bottom+border-bottom

注意:怪异盒模型的宽度都是可见宽度,若想使用怪异盒模型,设置 box-sizing:border-box 即可

(3)盒模型和内联盒子

上述两个盒模型完全适应于块级盒子,有些属性适应于内联盒子,如我们在一个段落中使用了 ,并对其应用了宽度、高度、边距、边框和内边距。可以看到,宽度和高度被忽略了。外边距、内边距和边框是生效的,但它们不会改变其他内容与内联盒子的关系,因此内边距和边框会与段落中的其他单词重叠

6、display

(1)该属性规定元素应该生成的框的类型

(2)display属性值

dispaly:block;/*元素呈现块元素特征,此元素前后会带有换行符*/
dispaly:inline;/*元素呈现行内元素特征,元素前后没有换行符*/
dispaly:inline-block;/*元素呈现行内并保持宽和高的属性,行内块元素*/
dispaly:none;/*元素不做呈现,不占网页空间。注意与visibility:hidden不同,visibility不显示但占用网页空间。*/

7、背景样式(background)

(1)背景颜色

background-color:#0000FF;

color:#0000FF、red、rgb(255,255,255)、rgba(255,255,255,.5)、hsl(色相:0~360,饱和度:0%~100%,透明度:0%~100%)、hsla(色相:0~360,饱和度:0%~100%,透明度:0%~100%,透明度:0~1)

(2)指定透明:transpaernt

(3)指定背景颜色:inherit 从父元素继承过来

(4)背景图片

background-image:url(图片地址);

a、控制背景平铺:

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;

b、背景图片大小:

/*图片等比例缩放*/
background-size:cover;/*铺满整个区域*/
background-size:contain;/*按照一边覆盖显示区域,会有白边*/

c、背景图片定位:

background-position:value1,value2,value3,value4

(5)渐变背景:

渐变生成器:https://cssgradient.io/

background: linear-gradient(0deg, rgba(34,193,195,1) 20%, rgba(253,247,45,1) 88%); /*线性渐变*/
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); /*圆形渐变*/

(6)多个背景图片:

使用逗号分隔

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)背景设置滚动

background-attachment: scroll;/*使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。*/
background-attachment: fixed;/*使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始终保持在屏幕上相同的位置。*/
background-attachment: local;/*局部值将背景固定在设置的元素上,因此当您滚动元素时,背景也随之滚动。*/

(8)设置背景是否延伸到边框、内边距盒子、内容盒子下面

8、不同方向的文本

9、溢出

overflow:visible;/*默认,不修剪*/
overflow:hidden;/*溢出隐藏*/
overflow:scroll;/*显示滚动条,无论内容多少*/
overflow:auto;/*内容需要被修剪时,显示滚动条*/
/*溢出的使用:文字溢出隐藏*/
<style type="text/css">
        .box{
            width: 500px;
            height: 40px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
    <body>
        <div class="box" title="由全体股东(出资人)制定的代表或共同委托的代理人,向工商局申请名称预先核准。股东需要签署《企业名称预先核准申请书》,提供公司名称2~10个,写明经营范围,连同股东出资协议、股东身份证明、《指定代表或者共同委托代理人的证明》及指定代表或者共同委托代理人的身份证复印件一并提交给工商局。工商局核准的,发给《企业名称预先核准通知书》。">
            由全体股东(出资人)制定的代表或共同委托的代理人,向工商局申请名称预先核准。股东需要签署《企业名称预先核准申请书》,提供公司名称2~10个,写明经营范围,连同股东出资协议、股东身份证明、《指定代表或者共同委托代理人的证明》及指定代表或者共同委托代理人的身份证复印件一并提交给工商局。工商局核准的,发给《企业名称预先核准通知书》。
        </div>
    </body>

10、修饰字体文字

常用总结:text-decoration、underline、text-align、line-height、text-shadow...

11、阴影

(1)box-shadow:水平、竖直、模糊程度、大小、颜色、inset(内阴影)

12、透明度(opacity)值的范围是 0~1 。1 为不透明, 0 为完全透明

13、鼠标样式(cursor)

(1)pointer 小手

(2)wait 等待

(3)自定义:cursor:url(地址),aoto

<style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            cursor: url(img/3.png) , auto;
        }
    </style>
    <body>
        <div class="box"></div>
    </body>

14、滚动条样式可以修改

心得体会

​ 今天是冬令营的第二天,昨天的心得体会忘记写了(啊哦),这两天都在复习以前所学的知识,虽然说是复习,但是学到啦不少新知识,比如知道了em和rem是什么,它们的区别是什么,这次的复习让我查漏补缺了很多知识点,也弄明白了之前学的稀里糊涂的东西,比如后代选择器和子代选择器,以前很少用这些,相信这一个月会是满载而归的一个月。

评论


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