css入门基础

2021年09月15日 阅读数:1
这篇文章主要向大家介绍css入门基础,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一.元素模式


1.块元素

在这里插入图片描述

2.行内元素

在这里插入图片描述

3.行内块元素

在这里插入图片描述

4.元素显示模式总结

在这里插入图片描述

5.元素显示转换

在这里插入图片描述

直接写在样式声明里css

二.背景


1.背景颜色

在这里插入图片描述

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

4.背景固定

在这里插入图片描述

5.背景图片位置

在这里插入图片描述

注意

在这里插入图片描述

6.背景复合写法

在这里插入图片描述

7.背景色半透明

在这里插入图片描述

8.背景总结

在这里插入图片描述

三.三大特性


1.层叠性

在这里插入图片描述

2.继承性

在这里插入图片描述

2.1行高的继承性

在这里插入图片描述

3.优先级

在这里插入图片描述

选择器权重以下表所示

在这里插入图片描述

注意点

在这里插入图片描述

权重叠加

若是是复合选择器,则会有权重叠加,须要计算权重。spa

四.css盒子模型


1.盒子模型组成

在这里插入图片描述

1.1边框

在这里插入图片描述

经常使用的边框样式:

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

边框复合写法

在这里插入图片描述

注:

当须要制做上边框为红其余为蓝的边框时,合理运用边框的层叠性可较为方便3d

表格的细线边框

在这里插入图片描述

1.2内边距

在这里插入图片描述

内边距复合写法

在这里插入图片描述

注:

若是盒子自己没有指定width/height属性,则此时padding不会撑开盒子大小blog

1.3外边距

在这里插入图片描述

1.4外边距典型应用

在这里插入图片描述

注:

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

1.5外边距合并

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

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

在这里插入图片描述

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

在这里插入图片描述

1.5清除内外边距

在这里插入图片描述