1. 技术文章
  2. css入门基础

css入门基础

由 痞子三分冷 提交于 2021-02-02 11:59:02

css入门基础笔记

一.元素模式

1.块元素

在这里插入图片描述

2.行内元素

在这里插入图片描述

3.行内块元素

在这里插入图片描述

4.元素显示模式总结

在这里插入图片描述

5.元素显示转换

在这里插入图片描述

直接写在样式声明里

二.背景

1.背景颜色

在这里插入图片描述

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

4.背景固定

在这里插入图片描述

5.背景图片位置

在这里插入图片描述

注意

在这里插入图片描述

6.背景复合写法

在这里插入图片描述

7.背景色半透明

在这里插入图片描述

8.背景总结

在这里插入图片描述

三.三大特性

1.层叠性

在这里插入图片描述

2.继承性

在这里插入图片描述

2.1行高的继承性

在这里插入图片描述

3.优先级

在这里插入图片描述

选择器权重如下表所示

在这里插入图片描述

注意点

在这里插入图片描述

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

四.css盒子模型

1.盒子模型组成

在这里插入图片描述

1.1边框

在这里插入图片描述

常用的边框样式：

  • solid 实现边框
  • dashed 虚线边框
  • dotted 点线边框

边框复合写法

在这里插入图片描述

注：

当需要制作上边框为红其他为蓝的边框时，合理运用边框的层叠性可较为方便

表格的细线边框

在这里插入图片描述

1.2内边距

在这里插入图片描述

内边距复合写法

在这里插入图片描述

注：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

1.3外边距

在这里插入图片描述

1.4外边距典型应用

在这里插入图片描述

注：

此方法是让块元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align;center即可。

1.5外边距合并

使用margin定义块元素的垂直边距时，可能会出现外边距的合并。

1.相邻块元素垂直外边距的合并

在这里插入图片描述

2.嵌套块元素垂直外边距的塌陷

在这里插入图片描述

1.5清除内外边距

在这里插入图片描述

标签
Solid
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!