CSS复习总结

_时雨_

已于 2022-07-20 10:56:42 修改

阅读量311

点赞数

于 2022-05-15 15:57:40 首次发布

本blog上原创文章未经本人许可不得商用，转载请注明出处

本文链接：https://blog.csdn.net/qq_45881272/article/details/124776705

版权

复习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

温故之CSS
拓展
- less
参考资料

温故之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: 背景颜色背景图片地址背景平铺背景滚动背景位置;
解决图片太大的方法：先用固定宽高的父盒子把它装起来，再设置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 、clear

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
若两个值单位不同，运算结果的值取第一个值的单位；若只有一个值有单位则结果为那个单位

参考资料

CSS hack维基百科

_时雨_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS复习总结

简述：重新整理了一下当初学习css的笔记，复习css主要以实操所需知识点为主，面试系列的css总结会以八股文为主。那些很简单的知识点就没有写入此文中，只将自己比较容易遗漏的或较重要的知识点在此记录，方便日后复习查看。在head标签中用style标签写样式外部引入（推荐）2.字体样式字体样式综合写法text-align:文本水平对齐方式,对行内元素、行内块元素都有效果的line-height:行间距,行高等于高度可以让单行文本垂直居中text-indent:首行缩进whi
复制链接

扫一扫