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.1 link:link是HTML提供的标签,不仅可以加载CSS,还可以定义rel等属性
    1.2 @import:@import是css提供的语法,只有导入样式表的作用
  2. 加载顺序
    2.1 link:link在页面加载时CSS同时被加载
    2.2 @import:引入的CSS要等页面加载完毕后再加载
  3. 兼容性问题
    3.1 link是HTML提供的语法,不存在兼容性问题
    3.2 @import是css2.1提供的语法,ie5以上才兼容
  4. DOM可控性
    js控制DOM时,可以通过插入link标签来改变样式,不能通过@import改变
  5. 权重问题(有争议)
    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、在线编辑渐变色工具

https://cssgradient.io/

18、关于尺寸

px:像素

%:父元素宽度的百分比

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

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

心得体会

老师讲的讲很实用和平时不注意的点,项目中遇到的东西,也是我们需要注意的地方。还是要多多练习吧,然后发现其中的问题。

评论

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