css扫盲

最新推荐文章于 2022-07-27 20:33:23 发布

SEHDY

最新推荐文章于 2022-07-27 20:33:23 发布

阅读量142

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42384816/article/details/110929063

版权

1. font复合属性

body {
    font: font-style font-weight font-size/font-height font-family;
}

使用font属性时，必须按上面语法格式顺序书写，不能更换顺序，每个属性之间用空格隔开
font-size和font-family必须设置，其他可以省略
行高的继承性：font: 12px/1.5 Microsoft YaHei;
- 行高没有单位时，表示字体的倍数
- 如果子元素没有行高，则会继承父元素的倍数（子元素行高 = 子元素文字大小 * 1.5）

2. 文字对齐、线、缩进、行高

text-align：设置盒子内文本的对齐方式：left, right, center
text-decoration：none（取消线）、underline（下划线，链接a自带）、overline（上划线）、line-through（删除线）
text-indent：设置首行缩进。单位可以是px和em。em：是一个相对单位，就是当前元素（font-size）1个文字的大小 p{ text-indent: 2em }
line-height：line-height（行高）=上间距+文本高度+下间距

3. emmet语法

4. 块元素、行内元素、display

块元素：
- 独占一行
- 宽高内外边距都可以控制
- 宽度默认是父级宽度（容器）的100%
- 是一个容器及盒子，里面可以放任何元素
- 文字类元素（p、h1）内不能存放块级元素
行内元素
- 一行可以显示多个
- 宽高直接设置是无效的
- 默认宽度是本身内容的宽度
- 只能容纳文本或其他行内元素（链接a除外，a标签中可以放块级元素）
特殊：行内块元素
- img, input, td等
- 一行可以多个（行内元素特点）
- 默认宽度是内容本身宽度（行内元素特点）
- 宽高内外边距都可以控制（块元素特点）
相互转化
- display: block;：行内元素转换为块级元素，可以设置宽高内外边距了
- display: inline;：块级元素转换为行内元素，宽高内外边距无效了
- display: inline-block;：转换为行内块元素

5. 文字垂直居中、文字水平居中

垂直居中：让文字的行高line-height等于盒子的高度！（原理参考知识点2）
水平居中：text-align: center;

6. 背景

装饰性图片一般不用img插入，而使用背景，因为背景图片操作位置更方便！
背景颜色background-color、背景图片background-image、背景平铺background-repeat、背景位置background-position、背景附着background-attachment

background-image: url(XXX);
background-repeat: opt;：

no-repeat 不平铺，只显示一次
- repeat 默认，平铺容器
- repeat-x
- repeat-y

background-position: x y;：
- 参数是方位名词：
  - 前后顺序无关，left top与top left效果一样
  - 只指定一个参数，默认另一个为center居中
- 参数是精确单位：
  - x，y顺序不能换
  - 只指定一个参数，那一定是x，另一个为y且默认居中
- 参数为混合单位：
  - x，y顺序不能换
background-attachment: opt;：
- scoll(默认)：背景图像随内容滚动
- fixed：背景图像固定

复合写法：（不要求顺序）

background: red url(XXX) no-repeat fixed top
半透明：（参考css文件2.1）

7. 盒子模型

border-collapse: collapse;：相邻边框合并到一起
padding、margin参数个数：
- 1个：上下左右
- 2个：上下；左右
- 3个：上；左右；下
- 4个：上；右；下；左（顺时针）
注：如果盒子本身没有指定width/height属性（继承的也不算），则padding不会撑宽/撑高
块级元素水平居中：（盒子必须指定了width）

margin: 0 auto;
外边距合并：
- 嵌套块元素margin塌陷：对于两个嵌套关系（父子关系）的块元素，父元素和子元素都有上边距，此时两个元素外边距会塌陷（合并）为一个那个较大的外边距的值
- 解决方法：
  - 父元素添加overflow: hidden（推荐）
  - 父元素添加上边框
  - 父元素添加内边距
内外边距清除：
- 不同浏览器都有默认元素边距且不一致，布局前首先要清除边距
```
//编写css时的第一行代码
* {
    padding: 0;
    margin: 0;
}
```

8. 网页布局第一准则

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

9. 浮动特性

float: left/right/none;

浮动元素会脱离标准流（脱标），不再保留原来的位置

（浮动的盒子只会影响之后的标准流，不会影响之前的标准流）
浮动元素一行内显示且顶部对齐
浮动元素具有行内块元素的特性，可以直接给宽高

10. 清除浮动

本质：子元素都是浮动时，父元素高度默认为0，会影响之后的标准流

清除浮动，父级就会自动检测高度，就不会影响下面的标准流了（若父盒子有高度，不需要清除浮动）

方法：

额外标签法：
- 在浮动元素末尾添加一个块级空标签如：<div style="clear: both"></div>
父级添加overflow：
- 设置overflow属性为hidden、auto或scroll

父级添加伪元素：

（额外标签法升级版）

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {	/* 兼容IE6、7 */
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix:after {
    clear: both;
}
.clearfix {	/* 兼容IE6、7 */
    *zoom: 1;
}

11. 定位

定位组成：

定位 = 定位模式 + 边偏移
- 定位模式：position: static（默认，无定位的意思）/relative（相对）/absolute（绝对）/fixed（固定）;
- 边偏移：top/bottom/left/right: 80px;
relative：
- 相对于自己原来的位置移动
- 原来在标准流的位置继续占有，不会脱标
- 最典型的应用：给绝对定位当爹的
absolute：
- 相对于最近一级祖先元素的位置移动
- 如果没有祖先元素或祖先元素没有定位，则以浏览器为准进行定位（document文档）
- 绝对定位会脱标
子绝父相：
- 子级绝对定位，不占位置，可以放在父盒子任何地方，不影响兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子中显示
- 父盒子在布局中需要占位置，因此只能是相对定位
fixed：
- 以浏览器可视窗口为参照点移动，与父元素没任何关系，不随滚动条滚动
- 是脱标的
- 特殊应用：固定在版心右侧
  - 先让固定定位的盒子走到浏览器可视区一半的位置：left: 50%;
  - 再利用margin让盒子再走版心宽度一半的距离：margin-left: d/2 px;
定位叠放次序z-index：
- 当盒子出现重叠时，控制前后次序（Z轴）：z-index: 5/0/-2;

12. 绝对/固定定位水平/垂直居中

先让盒子走到浏览器可视区一半的位置：left（top）: 50%;
再利用margin让盒子再反着走盒子宽度/高度一半的距离：margin-left（margin-top）: -d/2 px;

13. 定位的拓展

浮动元素和绝对/固定定位都会压住下面标准流的盒子，但浮动不会压住标准流盒子里的文字，绝/固会压住所有内容（因为浮动最初设计的目的就是做文字环绕的）

14. 元素的显示与隐藏

- display: none;：隐藏对象，位置不保留
- display: block;：显示对象
- visibility: visible;：元素可见
- visibility: hidden;：元素隐藏，但位置保留
- overflow: hidden;：溢出部分隐藏
- overflow: scroll;：溢出不溢出都显示滚动条
- overflow: auto;：溢出时显示滚动条