本文详细介绍了CSS中的各种属性和技巧，包括多类名的使用、字体样式设置、文本对齐、背景图像处理、浮动与定位、伪类选择器、盒模型以及布局策略。重点讲解了定位模式，如静态、相对、绝对和固定定位，以及如何利用z-index控制叠放次序。此外，还提到了粘性定位和解决浮动元素带来的问题。内容涵盖了从基础到高级的CSS应用，对于前端开发者具有很高的参考价值。
1.多类名：
<div class="red font20">
多个类名中间必须用空格分开
2.字体系列：
font-family:‘微软雅黑’，‘宋体’;
font-size: 22px;
font-weight: bold(粗体)=700 | 数字（700{后面不要跟单位}）| normal=400；
font-style: italic(斜体) | normal；
3.字体复合属性:
font: font-style font-weight font-size/line-height font-family;
(font-szie和font-family必须有，其他可有可无，并且顺序不能改变)
4.文本样式：
text-align: center | right | left;
text-decoration: none | underline | overline | line-through；(适用于超链接)
text-indent: 2em;(首行缩进，2个文字大小的距离)
line-height: 26px;（设置行间的距离{行高}）
5.外部样式表：
(1)新建css文件
(2)引入css样式表
6.emmet语法：
生成多个div标签：div*3
父子级关系的标签：div>span , ul>li
兄弟关系：div+p
生成带有类名或者id名字的：.demo或#demo或p.demo等
生成的div类名是有顺序的：可以用自增负号
，
例
：
.
d
e
m
o
，例：.demo
，例：.demo*5
想要在生成的标签内部写内容：用{}，例：div{我是你爸爸}
7.快速格式化代码：
shift+alt+f
8.后代选择器：
元素1 元素2 {样式声明} （儿子孙子都可）
9.子选择器：
只能选择某元素最近的元素 （只能是亲儿子，不对孙子进行调整）
元素1 > 元素2 {样式声明}
10.并集选择器：
元素1，元素2 {样式声明} （1和2）
11.伪类选择器：
链接伪类：a : link //选择所有未被访问的链接
a : visited //选择所有已被访问的链接
a : hover //选择鼠标指针位于其上的链接
a : active //选择活动链接（鼠标按下未弹起的链接）
要按lvha顺序。
focus伪类选择器：input：focus{
background-color：yellow；
}
12.块元素：
h1~h6,p,div,ul,ol,li等
块级元素的特点：
1，比较霸道，自己独占一行
2，高度，宽度，外边距以及内边距都可以控制
3，宽度默认是容器（父级宽度）的100%
4，是一个容器及盒子，里面可以放行内或者块级元素。
13.元素显示转换：
把行内元素转换为块级元素：display：block;
把块级元素转换成行内元素：display: inline;
转换成行内块元素：display：inline-block;
14.单行文字垂直居中：
让文字的行高等于盒子的高度
line-height：40px;
height: 40px;
15.背景平铺：
background-repeat：repeat | no-repeat | repeat-x | repeat-y
16.背景图片的位置：
background-position：x y;(可以是方位名词 ，也可以是具体数据）
17.背景图像固定：
background-at tachment：scroll（滚动） | fixed（固定）
18.背景复合写法：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
19.背景色半透明：
background：rgba(0,0,0,a) a属于0~1
20.选择器权重：
继承 0,0,0,0
元素选择器：0,0,0,1
类选择器，伪类选择器：0,0,1,0
ID选择器：0,1,0,0
行内样式style=“”：1,0,0,0
！important重要的：无穷大
21.盒子模型边框：
border：border-width | | border-style（solid实现边框，dashed虚线的，dotted点线） | | border-color
边框分开写法：border-top:
22.细线表格：
border-collapse：collapse；合并相邻边框
23.内边距（padding）简写：
padding: 5px; 1个值，导表上下左右都有5像素内边距
padding: 5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding：5px 10px 20px 30px; 4个值，代表上右下左内边距像素分别为，5,10,20,30px （按顺时针）
外边框（margin）与内边距一致
24.块级盒子水平居中对齐：
margin：0 auto；（前提是盒子必须指定宽度）
25.解决父子盒子外边距合并：
给父元素添加 overflow：hidden；
26.去掉li里面的小圆点：
list-style：none；
27.圆角边框：
border-radius：50px
圆角矩形（设置为高度的一半）
分开写：border-top-left-radius，border-top-right-radius，border-bottom-left，border-bottom-right
28.阴影：
盒子 box-shadow：10px（水平位置） 10px（垂直位置） 10px（模糊程度） 10px（阴影尺寸） rgba(0,0,0,0.1) （颜色）；
文字 text-shadow：10px（水平位置） 10px（垂直位置） 10px（模糊程度） rgba(0,0,0,0.1) （颜色）；
29.浮动：
float：left（right）；（将元素移动到一边，直到左边缘或右边缘触及包含或另一个浮动框的边缘 ）
浮动以后具有行内块元素的特点
30.清除浮动：
1、额外标签法，在最后添加一个div ，clear：both（清除两侧的浮动）
2、给父元素添加 overflow：hidden；
3、：after伪元素法
.clearfix：after{
content：“”；
display：block；
height：0；
clear：both；
visibility：hidden；
}
.clearfix{
*zoom：1;
}
31.一行上一个盒子浮动，其他盒子都要浮动
32.修改图片让其沾满box：
width:100%;
33.定位：
将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
#### 33.1定位模式:
通过position属性来设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位（按照自己原来位置来移动） |
| absolute | 绝对定位（相对巨献元素来移动） |
| fixed | 固定定位 |
33.2边偏移：
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px; | 定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px; | 定义元素相对于其父元素下边线的距离 |
| left | left:80px; | 定义元素相对于其父元素左边线的距离 |
| right | right:80px; | 定义元素相对于其父元素右边线的距离 |
33.3绝对定位：
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
如果祖先有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不占有原先的位置（可以浮起来）
口诀：子绝父相
让绝对定位的盒子水平居中，left走50%父容器宽度的一半，margin-left负值往左边走自己盒子宽度的一半
33.4固定定位：
固定定位是元素固定于留恋其可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
固定定位的特点：
1.以浏览器的可视窗口座位参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动
2.固定定位不在占有原先的位置
固定定位的小技巧：固定在版心右侧位置。
小算法：
1.让固定定位的盒子left：50%。走到浏览器可视区的一半的位置。
2.让固定定位的盒子margin-left：版心宽度的一半距离。（多走的版心宽度一半的位置就可以 让固定定位的盒子贴着版心右侧对齐了）
33.5粘性定位：
语法：
选择器
{
position：sticky;
top:10px;
} （top：10px是指当混动条往下使得模块距top10px时，它就不动了）
特点：
1.以浏览器的可是窗口为参照点移动元素（固定定位的特点）
2.粘性定位占有原先的位置（相对定位的特点）
3.必须添加 top、left、right、bottom其中一个才有效
33.6总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fh80sJCe-1647854134092)(C:\Users\seraphine\AppData\Roaming\Typora\typora-user-images\image-20220220160129428.png)]
33.7定位的叠放次序：
在使用定位时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序
语法：选择器{z-index : 1;}
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才以后z-index属性
33.8定位拓转：
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
加了定位的盒子可以直接设置宽高
扫一扫
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
