代码格式化
代码格式化，主要是整理原代码的缩进，以及运算符的间隔等。目的是使代码缩进清晰，更容易阅读。
1、HTML里面的注释
<!-- -->
2、CSS里面的多行注释
/* */
3、CSS选择器
1）常用选择器
元素、id、类
2）复合选择器
交集 div.a.b.c、分组 #b1,h1（并集）
3）关系选择器
子元素选择器
作用：选中指定父元素的子元素
语法：父元素 > 子元素{}
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代{}
选择紧挨着的下一个兄弟
语法：前一个 + 下一个{}
选择下边所有的兄弟元素
语法：兄 ~ 弟{}
4）属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
5）伪类选择器
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素……
- 伪类一般情况下都是使用 : 开头
：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child（）选中第n个子元素
:only-child 只有一个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
-这几个伪类分功能和上述的类似，不同点在他们是同类型元素中进行排序
- :not()否定伪类
-将符合条件的元素从选择器中去除
6）伪元素选择器
伪元素使用 ：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
4、lorem自动生成长文本
5、CSS学习遇到的问题：
1）父元素添加padding-top时，为什么下面也增加了？
并不是增加了，而是padding-top的背景颜色跟内容区一致，背景颜色会延伸到内边距上。
2）HTML中元素分类？
| 块级元素 | 行内元素 | 空元素 | 内联块状元素 |
|---|---|---|---|
| <div>、<p>、<h1> ...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form> | <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> | <br/>、<hr/>、<img/>、<input/>、<link/>、<meta/> | <img>、<input> |
3)如何实现元素居中？
（一）CSS中的属性归纳
1、float
脱离文档流
2、外边距折叠
消除外边距折叠问题：overflow：hidden
3、bfc 高度塌陷
常用解决方法：overflow：hidden
最佳方法：
.box1::after{
content:'';
display:block;
clear:both;
}4、相对定位，绝对定位（包含块）
5、transition（设置元素当过渡效果）用法 ps:例子08_01
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
6、 transform
（应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。）ps:例子08_04
translate：平移
7、box-shadow：
设置一个或多个下拉阴影的框。
box-shadow（水平阴影位置（必需） 垂直阴影位置 （必需） 模糊距离（可选） 阴影大小（可选） 阴影颜色（可选） 从外层的阴影开始时改变阴影内侧阴影（可选））
8、旋转 transition： rotateX(45deg/1turn)
记得html或body开（视距）perspective: 800px;
和transform相结合使用
9、 animation (动画属性）
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 （linear ease ease-in ease-out ease-in-out steps(int,start|end)
|
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 |
| inherit | 从父元素继承属性。 |
10、图标字体
（记得引入图标css<link rel="stylesheet" href="./fa/css/all.css">）
通过伪元素来设置图标字体
1、找到要设置图标的元素通过before或after选中
2、在content中设置字体的编码
3、设置字体的样式
fab
font-family：'Font Awesome 6 Brands';
fas
font-family:'Font Awesome 6 Free';
font-weight:900;
fontawesome 使用步骤
1、下载
2、解压
3、将css和webfonts移动到项目中
4、将all.css引入到网页中
5、使用图标字体
- 直接通过类名来使用图标字体
class="fas或者fab fa-dog"
11、响应式布局（使用媒体查询）
@media 查询规则{}
例子：
@media only screen and (min-width:500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
12、text-indent
1）text-indent是CSS缩进功能，一般设置文字缩进两个文字字符。比如一般文章段落习惯设置每段首行开头文字内容缩进两个汉字位置来实现文章排版。
2）div css布局中text-indent:-999px或text-indent:-9999px作用介绍
text-indent:-999px和text-indent:-9999px功能一样的，其实设置这两个任意一个都是实现将内容往左托出999px或9999px远（缩进-999px或-9999px）这样盒子内就不见内容了。
3）text-indent:-999px和text-indent:-9999px常见应用场景：
一般我们布局图标时，会使用图片设置为对象背景，然后使用a超链接放文字，如果不设置text-indent:-999px这样图片背景上就能看见超链接文字， 但是我们只想显示背景图片又要有超链接，这个时候对a设置text-indent:-9999px或text-indent:-999px，这样A盒子里文字就隐藏掉了，但是超链接也被保留了。
————————————————
版权声明：本文为CSDN博主「张棺儿zz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhangguaner/article/details/125298646
（二）难点：
1、 less预处理多加练习，里面的函数运用
&代表父元素 ：extend 扩展 直接引用 mixins 混合函数
2、 弹性盒 display：flex 的相关练习
弹性容器 ：flex-direction 弹性元素排列方式 flex-wrap 是否换行 justify-content 主轴空白分配 align-items 辅轴对齐 align-content 辅轴空白分配 align-self 覆盖当前弹性元素上的align-items
弹性元素： flex-grow 伸展系数 flex-shrink 收缩系数 flex-basis 元素基础长度 order 弹性元素的排列顺序
1）align-items 和 align-content区别
align-items
align-content必须多行才能使用
扫一扫
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
