冯娜_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是什么，它们的区别是什么，这次的复习让我查漏补缺了很多知识点，也弄明白了之前学的稀里糊涂的东西，比如后代选择器和子代选择器，以前很少用这些，相信这一个月会是满载而归的一个月。
近期评论