css总结
温故之CSS
简述：重新整理了一下当初学习css的笔记，复习css主要以实操所需知识点为主，面试系列的css总结会以八股文为主。那些很简单的知识点就没有写入此文中，只将自己比较容易遗漏的或较重要的知识点在此记录，方便日后复习查看。
1. CSS样式的引入
- 行内样式（内联样式）：直接在标签内用style设置，注意样式属性和值中间用: 隔开，多组属性值之间用;隔开，此方法易造成代码冗余和阅读性差
<标签名 style="属性1:属性值1; 属性2:属性值2"> 内容 </标签名>
<div style="color: red; font-size: 15px;">我又红又专</div>
- 在head标签中用style标签写样式
<head>
<style>
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
}
</style>
</head>
- 外部引入（推荐）
<link rel="stylesheet" href="style.css" />
2.字体样式
- 字体样式综合写法
{ font: font-style font-weight font-size/line-height font-family;}
p{font: italic 600 15px "宋体";}
- text-align:文本水平对齐方式,对行内元素、行内块元素都有效果的
- line-height:行间距,行高等于高度可以让单行文本垂直居中
- text-indent:首行缩进
- white-space:nowrap:让文字强行在一行显示
3.复合选择器
- 后代选择器：两选择器间空一格，后代的任一选择器样式都能生效
- 子选择器（>）:只选相邻标签名为指定子代的（可有多个子代）
div>p {
color: red;
}
<!-- 生效 -->
<div>
<p>子代</p>
<p>子代</p>
<strong>儿子</strong>
</div>
<!-- 不生效 -->
<div>
<h1>
<p>孙子</p>
<p>孙子</p>
</h1>
</div>
- 交集选择器 既是..又是 ...的关系，有一个不符合则样式不生效
比如： p.one 选择的是： 类名为 .one 的 p标签。 - 并集选择器用逗号，为了方便阅读最好一个选择器占一行
- a标签的伪类：
a:link未访问, a:visited已访问， a:hover鼠标经过重点记住，a:active点击时
注意：a标签一定要转化为行内块元素才可以设置宽高
4.背景与图片
background-image: url(路径);：url 里面的地址不要加引号- 必须先制定background-image属性才可以用background-positon（背景图片定位方法
- 简写：
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; - 解决图片太大的方法：先用固定宽高的父盒子把它装起来，再设置
max-width/height:100%,但注意设置了最大宽高就不能再放缩 - Vertical-align针对行内元素和行内块元素，常用于控制图片与文字对齐，消除文字与图片的间隙
5.边距合并
- 为了布局稳定：width>padding>margin
- 防止父元素上外边距与子元素上外边距合并：为父元素定义上内边距（浮动、绝对定位、固定定位则不会有边距合并问题，因为触发了BFC）
6.解决标签之间空白间隙（主要为inline和inline-block）
- 在HTML中的标签之间不留空格，但代码可读性会变差
<div>
<span>你</span>
<span>好啊</span>
<span>吃了没</span>
</div>
<div>
<span>你</span><span>好啊</span><span>吃了没</span>
</div>
效果如下：
你
好啊
吃了没
你好啊吃了没
- 父元素 font-size:0，子元素再单独设置字体样式
- margin 负值
- 设置父元素的letter-spacing属性
- word-spacing 词间距
- float: left
7.清除浮动
最好的方法：
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
一定要有的属性content 、display
8. CSS初始化样式
/*清除元素默认的内外边距*/
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*清除列表样式*/
ol, ul,li {
list-style: none;
}
/*去掉button 默认自带的边框*/
button {
border: none;
}
a {
text-decoration: none;
}
/*清除浮动的*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
PS:若更好兼容浏览器的css样式初始化，推荐一个库Normalize.css，Github star数量接近5万
Normalize.css
9.CSS样式兼容
- CSS3添加浏览器私有属性（兼容性写在前，把标准写法放到最后）
-webkit-transform:rotate(-3deg); /*为Chrome、Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);
- css样式初始化推荐使用Normalize.css
- CSS hack（有 Selector Hacks、Attribute Hacks、 @media Hacks）
1.条件注释主要用于IE浏览器
< head >
< title >测试</ title >
< link href = "all_browsers.css" rel = "stylesheet" type = "text/css" >
<!--[if IE]> <link href="ie_only.css " rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type=" text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--> <![IGNORE[]]> < link href = "最近的.css" rel = "样式表" type = "text/css" > <!--<![endif]-->
<!--[if !IE]--> < link href = "not_ie.css" rel = "stylesheet" type = "text/css" > <!-- <![endif]-->
</ head >
2.属性前缀
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10生效
“\9\0″ 只对IE9/IE10生效
/* IE6 */
#once { _color: blue }
/* IE6, IE7, IE8, IE9 ，IE10 */
#test{ color: blue\9; }
3.用媒体查询@media
body {
background: red;
}
/* IE6、IE7变成绿色 */
@media all\9 {
body {
background: green;
}
}
/* IE8变成蓝色 */
@media \0screen {
body {
background: blue;
}
}
- 使用自动化插件，如Autoprefixer
10.Flex布局（可通过实现骰子加强对flex的应用）
- Flex中有align的属性都作用于侧轴
- flex中子元素order越小越靠前
- align-items适用于单行， align-content适用于多行
- 若父元素设置了flex布局则行内元素不用转化为block就可以设置宽高
- 骰子布局
11.CSS3
- IE盒子模型：
box-sizing:border-box(加border和padding不会撑大盒子)，标准盒子模型就会撑大，默认为标准 - 新增属性选择器：
/* 1.直接写属性 */
button[disabled] {
}
/* 2. 属性等于值 */
input[type="search"] {
}
/* 3. 以某个值开头的 属性值 */
div[class^="test"] {
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
}
/* 5. 值可以在任意位置的 */
div[class*="icon"] {
}
nth-child(-n+5)：选前5个
nth-child(n+5)：从第五个开始往后面选择（包含第五个）
:nth-child(n) 选择 父元素里面的 第 n个孩子，可为不同类型
/* :nth-of-type（n）选择指定类型的元素 */
- translate类似定位，不会影响到其他元素的位置，对行内标签没有效果
- 动画简写：
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode - 开启
3D：父亲添加transform-style: preserve-3d;影响的是子盒子，为子元素开启立体空间
透视perspective需要写在被视察元素的父盒子上面，如果想要产生 3D效果需要透视 - 此外，css3有阴影、圆角属性、渐变等，用css3可以写出许多绚丽的动画效果，有兴趣可自行百度，但个人觉得其实实际开发中较少会用到很多绚烂的动画（可查看个大公司官网），把更多时间花在js和框架上可能会更好。
11.移动web布局
- 流式布局：即百分比布局
- flex 布局（推荐）
- rem+媒体查询布局(响应式布局)：VSCode px 转换rem 插件
cssrem
可用画x轴的方法观察用max-width或min-width
/* 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 大于540px页面颜色改为绿色 */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 注意and 和px不能省略 */
拓展
less
- Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，CSS预处理器。简化了 CSS 的编写并且降低了 CSS的维护成本
- 定义@变量名：值； 使用@变量名
@color: green;
p {
color: @color;
}
- 嵌套：
#div .logo {
width: 300px;
}
等价于
#div {
.logo {
width: 300px;
}
}
- 若要选择交集、伪类或伪元素用&进行连接
a:hover{
}
a{
&:hover{
}
}
- less运算规则：+ - * / 运算符左右有个空格隔开：
1px + 1
若两个值单位不同，运算结果的值取第一个值的单位 ；若只有一个值有单位则结果为那个单位
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~