css知识点汇总(包括css思维导图，文章最后)

淳淳在努力

已于 2023-01-09 09:50:46 修改

阅读量3.1k

点赞数 11

分类专栏： html、css、js的课堂笔记文章标签： css html5 html

于 2021-09-01 18:25:16 首次发布

本文链接：https://blog.csdn.net/weixin_44641804/article/details/120045607

版权

html、css、js的课堂笔记专栏收录该内容

3 篇文章 3 订阅

订阅专栏

一、css三种引入方式

1.内部样式表-----head标签内部的style

2.内联样式----在标签里写style（开发时不要使用）

(5)派生选择器-----隔离作用域-------（常用）

外边距 --- margin 应用场景：两个独立的块与块之间的距离

padding 和 margin的区别：核心知识点

margin自身存在外边距合并问题------取最大值进行合并

十、浮动---应用场景（横向导航）

十一、定位 (脱离了文档流)

position: absolute; //绝对定位

position: relative; //相对定位

position: fixed; //固定定位

5.如何能让一个盒子在当前的浏览器中---水平居中、垂直居中

10.项目小技巧：

11.小知识点：VS code快捷写法ul>li*6>a[href="#"]然后按回车

一、css三种引入方式

1.内部样式表-----head标签内部的style

<style>

        #yy{color: blue;}

 </style>

2.内联样式----在标签里写style（开发时不要使用）

<h1 style="background-color: red;" id="yy">淳淳</h1>

3.外链式---- <link rel="stylesheet" href="css/style.css"> ----推荐使用

<link rel="stylesheet" href="style.css">

二、css选择器有哪几种？

（1）id选择器

相当于每一个的身份证号，id唯一(id的名不能重复)开发一个页面时，id不能出现多次（以京东网页为例）

（2）class选择器

类选择器（可以实现重复使用）

（3）标签选择器

（4）伪类选择器 a标签

a:link----------定义了正常链接的样式（有可能存在缓存问题）

a:visited-------定义访问过链接的样式

a:hover------鼠标悬停时候的链接样式

a:active-----鼠标按下时的链接样式

(5)派生选择器-----隔离作用域-------（常用）

.work h1 {

color: violet;

background: orangered;}

(6)后代选择器

1. A B------A选择器里层的B选择器

2. A,B------它的样式既有A选择器的样式，也满足B选择器的样式

3. A>B-----直接子元素（只能管ul的一级目录li, 也就是li里层的ul li 样式不会被外层影响）空格表示里层

· 样式写法:

#id {

   属性名1: 属性值1,

   属性名2: 属性值2 }

.class {

   属性名1: 属性值1,

   属性名2: 属性值2 }

标签 {

   属性名1: 属性值1,

   属性名2: 属性值2}

·选择器优先级:

!important>内联选择器>id选择器>类选择器>标签选择器>伪类>*通配符选择器（匹配页面中所有的标签）

技巧: 选择器选择的范围越广，那么它的优先级越低

!important(慎用)

三、行标签和快标签

行标签 ---- 宽度和高度设置无效

span a

块标签 --- 宽度和高度设置有效

div p h1-h6 ul li dl dt dd

(1)如何把行标签转化成块标签:

属性: display:block;(常用)

(2)块转行

属性: display:inline;(基本不使用)

(3)将块元素转成行内块

属性: display:inline-block; (既能让块元素并排显示，同时也能设置容器的宽度和高度) (常用)

* {padding: 0;----内边距

margin: 0;----外边距}

清空默认边距-----同时处理了不同浏览器的兼容问题（默认边距）

！浏览器默认的外边距 8px

！display:inline-block;本身存在bug （默认有空隙）

四、文字相关的样式

（1）文本颜色

关键字 --- color:red;

十六进制 --- color:#333333;

rgb --- (255,255,0)---------red green blue

权重相同的情况下，后面的样式会覆盖前面的样式

(2) 文字大小

浏览器默认的字号16px 最小字号12px，不允许比12px再小啦！

font-size:16px;

(3) 文字背景色

background: red;

(4) 文字加粗

font-weight:bold;

(5) 文字字体

font-family: '微软雅黑'

(6)文字下划线

去掉下划线 text-decoration:none;

加下划线 text-decoration:underline;

(7) 边框线

实线-----solid border: 1px solid #333333; (常用)

虚线-----dashed border: 1px dashed yellow;

点状-----dottded border: 1px dotted red;

(8)默认加粗文字样式去掉（h1）

font-weight:normal;

(9) 如何让文字水平居中

text-align:center; left; right;

text-align:center;作用是让块元素里的行内元素居中

(10) 如何让文字垂直居中

height = line-height时

(11)段落首行缩进

实际应用场景（文章详情页面）

text-indent:2em; 首行缩进了2个文字的宽度 em单位必须加

如果数值为0，后面不用加单位（px em rem）

文字省略号:

overflow:hidden;----溢出隐藏

overflow: auto;----自适应（内容过多会自动出滚动条）

text-overflow: ellipsis;---省略号

文字自动出省略号

overflow:hidden;

text-overflow: ellipsis;

容器的宽度；

white-space: nowrap;不换行

p{

           width: 200px;

           /* height: 100px;  */

           border: 1px solid blue;

           color: palevioletred;

           /* text-indent: 2em; */

           overflow: hidden;

           text-overflow: ellipsis;

           white-space: nowrap;
}

行高

段落 line-height:2; (不用加单位)

首行缩进 line-height:2em;（加单位）

2em=首行缩进了2个文字的大小

五、背景:

背景图片的写法

background:url("img/a.jpg");

背景不平铺

background-repeat: no-repeat;

背景图片的位置 x,y

(x--------水平方向单位可以是 px % left/right/center 任意均可）

(y--------垂直方向单位可以是 px % top/bottom/center 任意均可）

background-position: x,y;

background-position: left center;(常用)

background: url("img/a.jpg") no-repeat left center;

实现带有背景颜色的背景图片

background:#333 url("img/a.jpg") no-repeat left center;

六、前端规范:

· html页面部分

(1)标签要成对出现

(2)标签与标签对齐，里层的标签要有一个tab缩进

(3)开发项目的时候一定要写好注释

/* 初始化 */

*{margin: 0;padding: 0;}

ul, li { list-style-type: none; }

a{text-decoration: none;}

· css

(1)有注释

(2)*通配符 { } 直接用*并不是不可以

最好把所有标签体现：

html,body,h1,h2,h3,h4,h5,h6,p{

padding: 0;

margin: 0;}

* {

            padding: 0;

            margin: 0;

        }

七、有关border

下边框

border-bottom:1px solid #333;

上边框

border-top:1px solid #333;

左边框

border-left:1px solid #333;

右边框

border-right:1px solid #333;

八、图片如何实现居中

img----行内块

（1）将img转成块------ display: block;

（2）一定要给图片宽度

（3）居中（margin: 0 auto;）（~~margin: auto auto;~~是错误的，auto不能上下居中）

img {

    width: 645px;

    margin: 0 auto;

    display: block;

}

宽度与margin: 0 auto;要结合使用

·注意事项：

·img外层没有套块级标签 ----- <img src="img/sy.jpg" alt="最新消息">

在这种情况下

text-align: center; 无效（只适用于文本）

·img外层套块级标签 ------

text-align: center;

</div>

将text-align: center;这个属性给在div.pic上，那么此时 text-align: center; 有效

八、目录

./和直接文件名.文件格式----------是一样的

../ ------回退一层

九、盒模型

内边距 --- padding 应用场景：嵌套的

左内边距 padding-left: 20px;

右内边距 padding-right:20px;

上边距 padding-top:20px;

下边距 padding-bottom:20px;

（同下）

外边距 --- margin 应用场景：两个独立的块与块之间的距离

(1)-----一个值

左外边距 margin-left: 20px;

右外边距 margin-right:20px;

上外边距 margin-top:20px;

下外边距 margin-bottom:20px;

(2)-----两个值

margin: 10px 20px; (第一个值指的是上下第二个值指的是左右)

(3)----三个值

margin: 5px 8px 15px;(第一个值指的是上第二个值指的是左右第三个是下)

(4)----四个值

margin: 5px 10px 8px 20px; (上右下左) 顺时针

padding 和 margin的区别：核心知识点

外边距能够调盒子的位置

内边距能够改变盒子的大小

margin自身存在外边距合并问题------取最大值进行合并

·如何解决:

一般在开发页面中（给其中一个盒子下边距，那么就一直下边距）不要一个盒子给下边距一个盒子给上边距

·注意事项：

块元素-------支持上下左右 padding margin

行标签-------只支持左右padding 上下padding不支持只支持左右margin ，上下margin不支持（跟转成块无关）

想让上下内边距生效-----------把行标签转成块标签 display：block；

下午

十、浮动---应用场景（横向导航）

display:inline-block; （本身存在一个小bug）默认存在空隙

·li标签自带的样式去掉 list-style:none;

float:left; ----左浮动

float:right; ----右浮动

只要元素浮动，那么就会出现问题（外层容器无法包裹住里层元素）

清除浮动解决-----清除浮动给在浮动元素的父级

· .clearfix:after{

display: block; //转成块

clear: both; //我自己不跟左边浮动，也不跟右边浮动

content:''; // 用了：after------伪类}

/* 便捷 */

.clearfix:after{

    display: block;

    clear: both;

    content: '';

}

.fl{

    float: left;

}

.fr{

    float: right;

}

把清除浮动的类clearfix，给在浮动元素的父级元素上即可

清除浮动，相当于一个挡板，隔离的作用

·文字颜色给在a身上

十一、定位 (脱离了文档流)

和浮动一样（脱离了文档流）

position: absolute; //绝对定位

top:0; 距离上方

bottom:0; 距离下方

left:0; 距离左方

right:0; 距离右方

position: relative; //相对定位

top:0; 距离上方

bottom:0; 距离下方

left:0; 距离左方

right:0; 距离右方

position: fixed; //固定定位

top:0; 距离上方

bottom:0; 距离下方

left:0; 距离左方

right:0; 距离右方

注:只要有position就用top/bottom/right/left

原理：子绝父相

（父亲是相对position: relative; 孩子是绝对position: absolute; ）

类似于float----浮动

float: left ; 左浮动

float: right ; 右浮动

float:none; 不浮动（了解）

对比

position: absolute; //绝对定位：不占原来位置，盒子有父级时使用，定位指相对于body

position: relative; //相对定位：占原来位置，定位指相对于自己原来位置

position: fixed; //固定定位：相对于页面，但不滚动

注意事项:

关于绝对定位，一定要给父代相对定位（因为有时我们只给了绝对没有相对，在ie浏览器上会出现问题）如果没有给相对，那么就会逐层向上查找，直到找到body标签为止。

十二、常遇问题

1.防止父代随子代中的margin塌陷

法一：给父代加一个透明border。

法二：给父代加overflow:hidden;

2.img标签---会有留白如何解决？

将img行内块标签转化为块就可以 disply:block;

但是注意转成块以后的居中就不能用行居中的方式text-align:center;了，得用块居中的方式magin:auto;

3.z-index：设置元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index：取值范围0---------9999999 值越大层级越高，但是需要注意的是一定要与position连用
z-index:3;

4.画圆

·圆形---先做正方形宽度和高度一致 border-radius:50%;

border-radius: 50%;

5.如何能让一个盒子在当前的浏览器中---水平居中、垂直居中

position: absolute;

            left:50%;

            top:50%;

            margin-left: -100px;

            margin-top: -100px;

负margin就可以实现负的盒子宽度的一半负的盒子高度的一半

10.项目小技巧：

做项目时高度尽量不要写死，让内容自己填高度，省的加内容需要来回调。
当margin的bug影响了父盒子时，给父代加一个透明border。border: 1px solid transparent;

11.小知识点：VS code快捷写法ul>li*6>a[href="#"]然后按回车

（如果有问题删]再打一遍]）

<ul>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

    </ul>

例如这种就用ul套li再套a

12.VS code快捷替换代码:

Ctrl加 F键打开搜索栏，点开左侧的小箭头，出现两行搜索栏，

上行填需要被换掉的代码如：

下行填需要换成的代码：

13.img标签会有留白如何解决？

将img行内块标签转化为块就可以 disply:block;

但是注意转成块以后的居中就不能用行居中的方式text-align:center;了，得用块居中的方式magin:auto;

13.背景渐变

background:-webkit-linear-gradient(top,#fff7f0,#eef3f8)

14.PS里保存切片

快捷键ctrl+alt+shift+s，按shift选切片，存储为PNG-24，点保存，在弹出的页面里点保存选中的切片。

15.PS里创建图层：

Ctrl加C、Ctrl加N、Ctrl加V

16.鼠标指在某处出现手的形状：

cursor:pointer

17.错题

1.下列哪个样式定义以后，行内（非块）元素可以定义宽度和高度（C和D）1

A、 display:inline;

B、 display:none;

C、 display:block;

D、 display:inline-block;转成行内块（display=定义块or行or行内块）

18.不换行必须设置( A错选C )

A.word-break

B.letter-spacing

C.white-space

D.word-spacing

19.文字位于图片的垂直居中

vertical-align:middle; 此属性只对行内元素生效

十三、css标准初始化

/* 初始化 */
*{
    padding: 0;
    margin: 0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    display: block;
}
.clearfix::after{
    display: block;
    content: '';
    clear: both;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

十四、css思维导图

淳淳在努力

关注

11
点赞
踩
92

收藏

觉得还不错? 一键收藏
3
评论
css知识点汇总(包括css思维导图，文章最后)

目录一、css三种引入方式1.内部样式表-----head标签内部的style2.内联样式----在标签里写style（开发时不要使用）3.外链式---- ----推荐使用二、css选择器有哪几种？（1）id选择器（2）class选择器（3）标签选择器（4）伪类选择器 a标签(5)派生选择器-----隔离作用域-------（常用）(6)后代选择器· 样式写法:·选择器优先级:三、行标签和快标签(1)如何把行标签转化成块标签:(2)块转行.
复制链接

扫一扫