CSS复习总结

最新推荐文章于 2024-12-08 12:33:48 发布
原创 最新推荐文章于 2024-12-08 12:33:48 发布 · 431 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细回顾了CSS的重要概念，包括选择器的使用、盒模型、布局方式（如Flexbox和Grid）、响应式设计以及CSS动画。通过实例解析，深入理解CSS在网页样式控制中的关键作用，帮助提升网页设计能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.css介绍
层叠样式表   、级联样式表   、简称 样式表
文件后缀  .css

2.作用：
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性

3.css语法
属性:属性值;

4.css特点
1）继承性
具有继承性的属性：
color、font-*、text-*、line-height、list-style-*等

不具有继承性的属性：
background-*、margin、padding等

2）层叠性
3）优先级
优先级高的样式生效，优先级相同，后写的样式生效

5.引入方式
1）行内样式、内联样式   只对当前元素生效
<div style="属性:属性值;"></div>
2）内部样式    只对当前页面生效
<head>
    <style>
        选择器{
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>
3）外部样式  实现了内容与表现的分离，提高了代码的可重用性和可维护性
<head>
    <link rel="stylesheet" href="1.css"/>
</head>
4）导入式
<head>
    <style>
        @import "1.css";
    </style>
</head>

@import和link的区别：
1）@import先加载HTML文件，再加载css文件；link同时加载HTML和css文件
2）@import只能引入css，link还可以引入其他内容
3）@import有兼容性（IE5以上支持），link没有兼容性
4）但js操作DOM时，只能操作link引入的css文件
5）@import会增加页面的http请求

6.选择器
1）基本选择器
1、全局选择器、通用选择器
*{}
选中页面所有元素

2、元素选择器
div、a、b、i、span、img、input、button.....
选中页面所有指定的元素

3、类选择器
.className{}
选中所有class属性为className的元素
类型可以重复，一个元素可以有多个类名，用空格隔开

4、ID选择器
#idName{}
一个网页中的ID名字唯一

选择器的优先级：
行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：1000  100     10        1

5、合并选择器
选择器1,选择器2,...{

}

2）关系选择器
1、后代选择器
选择器1 选择器2{}
选中所有后代

2、子代选择器
选择器1>选择器2{}
选中所有直接子代

3、相邻兄弟选择器
选择器1+选择器2{}
下一个兄弟

4、通用兄弟选择器
选择器1~选择器2{}
后面所有兄弟


3）伪类选择器
:link   点击之前（只适用于a）
:visited  点击之后（只适用于a）
:hover    鼠标悬停（适用于所有元素）
:active   鼠标按下（适用于所有元素）
LVHA

css3新增
写在子元素上
:first-child  第一个子元素是...
:last-child   最后一个子元素是...
:only-child   唯一一个子元素
:nth-child(number|odd|even|倍数)   第几个子元素是....

:empty  空的子元素
:not(选择器)  否定

:focus    获取焦点
:checked  被选中


4）伪对象选择器
1、:before|::before{
    content:"";
}
2、:after|::after{
    content:"";
}

①插入文字
1、:before|::before{
    content:"text";
}
2、:after|::after{
    content:"text";
}

②插入图片
1、:before|::before{
    content:url("");
}
2、:after|::after{
    content:url("");
}

③自定义插入内容
1、:before|::before{
    content:"";
    display:block;
}
2、:after|::after{
    content:"";
    display:block;
}

5）属性选择器
元素[HTML的属性="属性值"]
元素[HTML的属性^="值"]   以什么开头
元素[HTML的属性$="值"]   以什么结尾
元素[HTML的属性*="值"]   包含

7.背景属性
1）背景颜色
background-color:transparent;

颜色的取值：
1、关键字  red、blue
2、十六进制   #000
3、rgb(0,0,0)
4、rgba(0,0,0,.5)

2）背景图片
background-image:url("");
默认水平垂直平铺

3）背景图片是否平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y;

4）背景图片大小
background-size:x y;

5）背景图片定位
background-position:x y;
默认 0 0
只取一个值时，第二个值默认居中

6）背景固定
background-attachment:scroll|fixed:

7）简写
background:颜色 图片 平铺 大写 定位 固定;


8.雪碧图、css精灵、css sprite
一种图片整合技术、把多张小图放在一张图片里

优点：
1）减少页面的http请求
2）减少图片字节数
3）减少图片命名困扰

9、字体属性
1）字体颜色
color:;
2）字体大小
font-size:16px;
3）字体是否加粗
font-weight:normal|bold|100-900;
normal=400
bold=700
4）字体是否倾斜
font-style:normal|italic;
5）字体
font-family:;

10、文本属性
1）内容水平对齐
text-align:left|right|center;
2）文本装饰
text-decoration:none|underline;
3）英文大小写转换
text-transform:;
4）首行缩进
text-indent:;

11、列表属性
1）项目符号样式
list-style-type:none;

2）项目符号为图片
list-style-image:url();

3）项目符号位置
list-style-position:;

4）简写
list-style:none;

12、溢出
overflow:hidden|auto|scroll;

13、文字溢出省略号显示
在同一行显示
white-space:nowrap;
溢出部门隐藏
overflow:hidden;
文字溢出省略号显示
text-overflow:ellipsis;

14、盒模型
1）标准盒模型、w3c盒模型
1、组成部分
content+padding+border+margin

2、实际宽度
width+padding+border+margin

3、content  内容区域
width  取值px、%（相对于父元素）
块级元素默认宽度为100%，行内元素宽度由内容撑开

height  取值px、%（相对于父元素）
块级元素和行内元素高度由内容撑开

min-width:;
max-width:;
min-height:;
max-height:;

4、border  边框
border-style:solid|dotted|dashed|double|none;
border-color:;
border-width:;

简写：border:1px solid red;

单边属性：
border-top:1px solid red;
    border-top-style:;
    border-top-color:;
    border-top-width:;
border-bottom:1px solid red;
    border-bottom-style:;
    border-bottom-color:;
    border-bottom-width:;
border-left:1px solid red;
    border-left-style:;
    border-left-color:;
    border-left-width:;
border-right:1px solid red;
    border-right-style:;
    border-right-color:;
    border-right-width:;


5、margin  外边距
设置盒子与盒子之间的距离
取值正负  auto
外边距时透明的

margin:value;   四周
margin:value value;   上下  左右
margin:value value value;   上  左右   下
margin:value value value value;   上 右  下 左

单边：
margin-top:;  上外边距
margin-bottom:;  下外边距
margin-left:;  左外边距
margin-bottom:;  右外边距

注意：
1）垂直方向上外边距合并问题
垂直方向上，当外边距相撞时，取较大值
浮动元素不合并
2）第一个子元素设置margin-top问题
①父元素加overflow:hidden;
②父元素或者子元素浮动
③父元素加border:1px solid transparent;
④父元素加padding-top:1px;

6、padding  内边距
设置内容距边框的距离
内边距会撑大容器
不可以取负值和auto

padding:value;   四周
padding:value value;   上下  左右
padding:value value value;   上  左右   下
padding:value value value value;   上 右  下 左

单边：
padding-top:;  上内边距
padding-bottom:;  下内边距
padding-left:;  左内边距
padding-bottom:;  右内边距


2）怪异盒模型、IE盒模型
1、组成部门
content+padding+border+margin

2、实际宽度
width+margin
    宽度包含了border和padding

box-sizing:content-box;  默认值、标准盒模型
box-sizing:border-box;   怪异盒模型

3）弹性盒模型
弹性盒中float和clear不生效

1、父元素上的属性
display: flex;  开启弹性盒，子元素默认水平排列
flex-direction: column;    设置子元素垂直排列
justify-content: flex-start|flex-end|center|space-around|space-between;  设置子元素在主轴的对齐方式
align-items: flex-start|flex-end|center;   设置子元素在侧轴的对齐方式
                居上      居下

2、子元素上的属性
flex-grow: number;
设置子元素之间宽度的比例


15、定位
1）普通流定位
2）浮动定位
3）元素定位

4）浮动
①原理
浮动后在页面中不占据位置
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动

②语法
float:left|right|none;

③清除浮动的影响
1）浮动元素的父元素加overflow:hidden|auto;
2）受影响的元素加clear:both;
3）浮动元素的父元素加高(父元素的高度已知)
4）空div法
浮动元素的后面加空div
空div clear:both;
5）伪对象法
浮动元素的父元素:after{
    content:"";
    display:block;
    clear:both;
}


5）元素定位
①静态定位
position:static;
默认值

②相对定位
position:relative;
相对于自己原位置定位
定位后原位置保留
配合top、bottom、left、right移动

③绝对定位
position:absolute;
相对于已经定位的父元素定位（相对、绝对、固定），
如果父元素没有定位，逐级往上找
最后相对于body定位

配合top、bottom、left、right移动


④固定定位
position:fixed;
相对于浏览器窗口定位
定位后原位置不保留

配合top、bottom、left、right移动

⑤堆叠顺序
z-index:number;
默认为1  可以正负
取值越大、层级越往上

必须配合定位使用（相对、固定、绝对）
同时定位后，后面的元素再上

16、display属性
属性值：
block  块级元素
inline 行内元素
inline-block  行内块，即在同一行显示，又可以设置宽高
none   隐藏
flex   弹性盒
table-cell   单元格


display:none;和visibility:hidden;和opacity:0;的区别和联系：
联系：隐藏元素
区别：
display:none;  隐藏后不占据页面位置
visibility:hidden;和opacity:0;  隐藏后占据页面位置

不占据页面位置的属性：
display:none;
float:;
position:absolute;
position:fixed;

17、居中问题
1）内容水平居中
text-align:center;

2）块级元素水平居中
div{
    width:;
    margin:0 auto;
}

3）一行文字垂直居中
行高等于高
line-height:;

4）多行内容垂直居中
padding:20px 0;

5）子元素在父元素中水平垂直居中
<div class="parent">
    <div class="child"></div>
</div>
①弹性盒法
<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
    }
</style>

②绝对定位法
<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

③绝对定位计算
<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
        position: absolute;
        left: 150px;
        top: 150px;
    }
</style>


④margin
<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        overflow: hidden;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
        margin: 0 auto;
        margin-top: 150px;
    }
</style>

⑤表格法
<style>
    .parent{
        width: 500px;
        height: 500px;
        background-color: red;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: paleturquoise;
        margin: 0 auto;
    }
</style>

18、三栏布局
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

①弹性盒法
<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: red;
    }
    .right{
        width: 200px;
        height: 500px;
        background-color: paleturquoise;
    }
    .center{
        height: 500px;
        background-color: plum;
        flex-grow: 1;
    }
</style>

②绝对定位法
<style>
    .box{
        position: relative;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
    }
    .right{
        width: 200px;
        height: 500px;
        background-color: paleturquoise;
        position: absolute;
        right: 0;
        top: 0;
    }
    .center{
        height: 500px;
        background-color: plum;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>

③浮动
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
<style>
    .box{
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: red;
        float: left;
    }
    .right{
        width: 200px;
        height: 500px;
        background-color: paleturquoise;
        float: right;
    }
    .center{
        height: 500px;
        background-color: plum;
    }
</style>

19、css3新特性
1）选择器（属性选择器、伪对象选择器、伪类选择器）
2）弹性盒display:flex;
3）圆角
border-radius:;
border-radius:50%;   画圆
4）盒阴影
box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 扩展值 颜色 位置;
                正负              正负        正值   正负        outset|inset

5）字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
                 正负              正负        正值

6）背景渐变
①线性渐变
background: linear-gradient(方向,color1,color2,.....);
②射线渐变、径向渐变、扇形渐变
background: radial-gradient(渐变中心点,渐变的形状,color1,color2,.....);

7）变型、转换
作用：使元素在位置或者形状上发生一定的改变

属性：transform:;
属性值：
①位移  单位px
transform:translate(x,y);

当只有一个值，代表水平方向
当有两个值，代表水平和垂直

transform:translateX();
transform:translateY();

②旋转  单位deg
transform:rotate(deg)

取值为正，顺时针旋转
位置为负，逆时针旋转

transform:rotateX(deg)
transform:rotateY(deg)

旋转默认的中心点为宽高的一半
transform-origin:;

注意：旋转会旋转整个坐标轴，当位移和旋转同时存在，旋转写在位移的后面


③缩放  取值数值  0-1  缩小  ，>1  放大
transform:scale(x,y)

当只取一个值，等比例缩放
当取两个值，代表水平方向和垂直方向

transform:scaleX()
transform:scaleY()


④倾斜  单位deg
transform:skew(x,y)

当只取一个值，代表水平方向
当有两个值，代表水平和垂直

transform:skewX()
transform:skewY()


8）过渡
作用：使元素从一种样式平滑的过渡到另外一种样式
必须有触发事件,例如鼠标悬停、点击

属性:transition:all 2s linear 1s;
属性值：
1）过渡的属性
transition-property: ,,,;

可以过渡的属性：
①取值为颜色
②取值为数值
③转换  transform
④阴影  box-shadow:;  text-shadow:;
⑤背景渐变

简写为  all


2）过渡的持续时间
transition-duration: s|ms;

3）过渡的速度变化类型
transition-timing-function: ;
ease  默认值  先加速后减速
ease-in  加速
ease-out  减速
ease-in-out  先加速，后减速
linear  匀速

4）过渡延迟时间
transition-delay:s|ms ;
取负值

9）动画
1、动画和过渡的区别
1）过渡只能制作简单的动画，动画可以制作复杂的动画
2）过渡必须有触发事件，动画可以没有

2、关键帧动画属性
animation:;

3、定义动画
@keyframes name {
    0%|from{
        css样式
    }
    百分比{
        css样式
    }
    100%|to{
        css样式
    }
}

4、调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数（infinite） 播放方向（alternate） forwards（动画停在最后一帧）;

5、动画属性
animation-name: ;
animation-duration: ;
animation-timing-function: ;
animation-delay: ;
animation-iteration-count: ;
animation-direction: ;
animation-fill-mode: ;

10）媒体查询
作用：写一次样式，适用于各种终端
语法：
<!--pc端-->
@media screen and (min-width:992px;){

}
<!--ipad端-->
@media screen and (min-width:768px;) and (max-width:991px){

}
<!--移动端-->
@media screen and (max-width:767px;){

}

11）兼容性
1、厂商前缀
浏览器              厂商前缀                 内核
谷歌、苹果          -webkit-                 苹果味webkit，谷歌为blink
火狐                -moz-                    gecko
欧朋                -o-                      一开始为presto，后改用blink内核
IE                  -ms-                     trident内核（IE内核）

2、css hack
兼容IE 6 7 8

1）条件注释法
<!--[if IE]>

<![endif]-->

2）属性前缀或后缀
前缀  - _ + * #
后缀  \0   \9    \9\0   ！important

12）多列
column-count: number;   列的数量
column-gap: ;   列之间的距离
column-rule: 1px solid red;   列之间的边框
CSS基础知识总结复习
天山小雏菊的博客
09-10 280
CSS基础知识总结复习
普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）
热门推荐
weixin_52791256的博客
04-05 1万+
普歌-HTML5+CSS复习总结一.HTML基础二级目录三级目录 一.HTML基础 二级目录 三级目录
CSS的简单复习总结
ahlt90852036的博客
12-20 155
如果说网页是人的话那么CSS就是化妆品了哈哈哈，所以网页离不开CSS的装饰。id选择器和Class选择器 二者都是用来选择元素进行装饰的，我个人理解是类选择器包含了id选择器，class选择器不进能选出单个元素还能还能选出一类元素。外部样式表 在外部进行编写代码在网站的代码进行调用内部样式表 在网页的<head>中用加<style>然后用类选择器...
css复习
03-25
### 关于CSS的学习资料和基础知识 #### 什么是CSS？ 层叠样式表（Cascading Style Sheets，简称 CSS）是一种专门用于描述文档呈现方式的语言。... ...print("以上是对CSS基本知识点的一个总结") ```
javascript与CSS复习（《精通javascript》）
10-29
总结来说，JavaScript与CSS共同工作，可以提供强大的Web交互功能。通过JavaScript访问和操作CSS样式的技巧，以及对CSS定位特性的理解，是开发动态Web页面的基础。掌握这些知识点可以帮助开发者创建出更加吸引人的...
【人机交互期末复习】HTML、CSS与JavaScript核心知识点及布局技巧总结：简答题汇总与解析
最新发布
05-18
内容概要：本文档为《人机交互（期末复习简答题）》，涵盖了前端开发中HTML、CSS和JavaScript的基础知识点。主要包括清除浮动的方法、盒子模型的属性及其解析方式、各类列表的应用场景、引入CSS样式的异同、背景属性...
CSS缩写6个图例总结
09-27
本文将通过CSS实例，讲解六种缩写的形式。它们分别是margin和padding、border、background、font、list和color。...如果你对CSS缩写已经掌握，仅当复习，如果你对CSS缩写还不够熟悉，本文将让你对CSS缩写了如指掌
CSS复习汇总
小白菜的博客
05-09 2158
1，CSS样式表的规则    CSS由两部分组成:选择器和声明，其中声明由属性和属性值组成，简单的CSS规则如下:body{margin:32px}(1)body:选择器  (2)margin:属性  (3)32px:属性值  (4){margin:32px}:声明选择器：选择器用于指定对文档中哪个标签进行定义。声明：声明包含在大括号"{}"中，在大括号中首先给出属性名，接着是冒号，然后是属性值。...
总结CSS基础知识【复习之一】
weixin_30770495的博客
08-12 206
知识解析： CSS规定的定位机制有三种：分别是标准流、浮动及绝对定位。 W3C标准：结构化标准语言（HTML和XML）、表现标准语言（CSS）、行为标准语言（DOM和ECMAScript） 　　　　　 倡导结构、样式、行为分离 CSS中，存在3种的定位机制：标准文档流（Normal flow）、浮动（float）、绝对定位（absolute positioning） 标准文档...
HTML+CSS+js复习总结
qq_45610112的博客
09-19 416
老师用两周的时间给我们复习了一些以前学过的内容，下面我对这两周所复习的内容做一个总结 1、基础标签 标题 <h1></h1> <h6></h6> 段落 <p></p> 图片 <img src=""/> 超链接anchor <a target="_blank" href=""...
前端面试题之CSS篇
爱是与世界平行
05-28 1788
前端面试题之CSS篇一、CSS基础1. CSS选择器及其优先级2. CSS中可继承与不可继承属性有哪些3. display的属性值及其作用4. display的block、inline和inline-block的区别5. 隐藏元素的方法有哪些6. link和@import的区别7. transition和animation的区别8. display:none与visibility:hidden的区别9. **伪元素和伪类的区别和作用？**10. 对requestAnimationframe的理解11. 对盒
CSS中可以继承和不能继承的属性
sinat_38342319的博客
09-29 895
一、无继承性的属性 1、display 2、文本属性： vertical-align、text-decoration、text-shadow、white-space、unicode-bidi 3、盒子模型的属性： width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、bo...
CSS中继承性属性和非继承性的属性
crkres9527
05-27 5336
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-bre...
CSS中可以和不可以继承的属性
weixin_30344995的博客
09-18 265
一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、...
css属性不具有可继承性,CSS有哪些属性可以继承？
weixin_30941189的博客
08-03 3840
1.背景介绍了解css样式表的继承，我们先从文档树(HTML DOM)开始，文档树由HTML元素组成,文档树和家族树类似，也有祖先、后代、父亲、孩子、兄弟css样式表继承指的是，特定的css属性向下传递到后代元素2.知识剖析对于一些可以继承的属性，可以只设置上级的CSS样式表树形，子级(下级)不用设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。那么有哪些属性可以自动继承呢有继承性的属性...
【CSS 面经】CSS中可继承与不可继承属性有哪些
lph159的博客
12-08 1074
CSS继承是指某些属性会从父元素“继承”到子元素。当父元素的某个属性被设置时，子元素也会自动获得该属性的相同值。这种机制避免了重复为每个子元素单独定义样式，提升了代码的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值