20210112冯佳丽
知识点总结
css易忽略点
1、定义
网页三要素:
HTML标签决定页面上元素的基本结构
CSS用于设置HTML元素的样式
JavaScript用于控制页面上的行为
2、四种css导入的用法
CSS 有四种不同的用法
1、 内联样式
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > </div>2、内部样式
<style type="text/css"> .... </style>3、外部样式表
注：单独的 CSS (后缀是 .css )文件
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>4、 @import
注：在
style中导入注：@import 用于从其他样式表导入样式规则
@import url;url 表示要引入资源位置
@import 'custom.css'; @import url("fineprint.css") print;例：
<style type="text/css"> @import url("css/123.css"); </style><div></div>
3、link和@import的区别
- 从属关系
1.1 link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
1.2 @import：@import是css提供的语法，只有导入样式表的作用- 加载顺序
2.1 link：link在页面加载时CSS同时被加载
2.2 @import：引入的CSS要等页面加载完毕后再加载- 兼容性问题
3.1 link是HTML提供的语法，不存在兼容性问题
3.2 @import是css2.1提供的语法，ie5以上才兼容- DOM可控性
js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变- 权重问题（有争议）
link标签引入的样式权重大于@import标签
4、关于重置按钮
注：关于重置按钮的初始值是其设置的value值，若输入后点击重置按钮，它会恢复原来的初始value值。
<input type="text" name="" id="" value="hhh" />
<input type="reset" name="" id="" value="重置" />
5、优先级
5.1、样式的优先级
内联样式 > 内部样式 > 外部样式
可以在属性值的后面添加 !important 提升样式的优先级
5.1、选择器的优先级
id选择器>class选择器>标签选择器
注：其他选择器根据情况而定，具体可以参照菜鸟
6、选择器（属性选择器）
[attributeName] {
.....
}
7、伪类的顺序
a:link未访问状态
a:visited访问过后状态
a:hover鼠标悬停状态
a:active激活选定状态注：定义顺序必须是此顺序
8、外边距折叠
如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
注：此案例中按照我们的理解的应该是80px，但是由于这个现象它们的间隔是50px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</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>
</html>
9、display
9.1、display属性的值
block（块元素）：元素呈现块元素特征，此元素前后会带有换行符
inline（行元素）：元素呈现行内元素特征，元素前后没有换行符
inline-block（行内块元素）：元素呈现行内并保持宽和高的属性，行内块元素
none：元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。
flex：弹性布局
10、盒子模型
10.1、盒子模型
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属
性设置。
注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。
10.2、替代（IE）盒模型
注：默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。
11、背景样式
11.1、背景附加（background-attachment ）
scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背
景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始
终保持在屏幕上相同的位置。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，
因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元
素上，因此当您滚动元素时，背景也随之滚动。
11.2、background-clip
border-box 背景延伸至边框外沿（但是在边框下层）
padding-box 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区（content box）外沿
12、书写模式（writing-mode ）
writing-mode 属性使我们从一种模式切换到另一种模式。
writing-mode 的三个值分别是：
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
13、overflow属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条，即使没有足够多引起溢出的内容
auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容
14、自定义鼠标的样式
cursor:url(xxx),auto
15、溢出文本处理
.xxx{
overflow: hidden; /* 溢出部分 隐藏 */
white-space: nowrap; /* 空白部分 不换行 */
text-overflow: ellipsis; /* 溢出的文本变成省略号 */
}
<div class="xxx" title="全部原文字">
文字部分.....
</div>
16、关于网站整体变黑
filter:grayscale(1);
17、在线编辑渐变色工具
18、关于尺寸
px:像素
%:父元素宽度的百分比
em:1em指其font-size的大小 默认大小为16px
rem:1rem指其根节点font-size的大小
心得体会
老师讲的讲很实用和平时不注意的点，项目中遇到的东西，也是我们需要注意的地方。还是要多多练习吧，然后发现其中的问题。
近期评论