css知识点总结（部分知识点）

最新推荐文章于 2022-08-23 17:19:40 发布

DOVE52155

最新推荐文章于 2022-08-23 17:19:40 发布

阅读量98

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_47221942/article/details/112552774

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS知识点总结

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、overflflow属性

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、在线编辑渐变色工具

https://cssgradient.io/

18、关于尺寸

px:像素

%:父元素宽度的百分比

em:1em指其font-size的大小默认大小为16px

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

DOVE52155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css知识点总结（部分知识点）

CSS知识点总结css易忽略点1、定义网页三要素:HTML 标签决定页面上元素的基本结构CSS 用于设置HTML元素的样式JavaScript 用于控制页面上的行为2、四种css导入的用法CSS 有四种不同的用法1、内联样式<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > </div>2
复制链接

扫一扫