CSS的重点基础知识

陈闲之

已于 2022-05-24 20:54:59 修改

阅读量1.5k

点赞数 3

文章标签： html css 前端 css3

于 2022-03-20 11:06:00 首次发布

本文链接：https://blog.csdn.net/weixin_50939386/article/details/123609035

版权

这篇博客主要介绍了CSS的重点基础知识，包括背景颜色、图片、平铺、透明度等，详细讲解了元素的显示方式、转换模式，如块级、行内、行内块元素的转换。此外，还阐述了盒子模型的各个组成部分以及浮动、定位的概念，如浮动的作用、清除浮动、静态定位、相对定位、绝对定位和固定定位等。

摘要由CSDN通过智能技术生成

文章预览：

CSS的重点基础知识

背景

1.背景颜色

属性名：background-color

属性值：

rgb
rgba
十六进制
关键字

注意点：为了不影响盒子大小，一般给盒子设置背景颜色

2.背景图片

属性名：background-image:url(‘’);

括号里面的引号可以不写，但一般都推荐写

背景图片一般作为装饰作用，需要在放在div里面，但是它不能撑开盒子。

3.背景平铺

属性名：background-repeat

背景平铺就是把图片铺满整个盒子。那如何不让背景图片平铺或者让它按我们想要的方向平铺呢。

取值	效果
repeat	水平和垂直方向都平铺(默认效果)
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

属性名：background-position

有许多方向上的位置表示方法，水平方向的left,right,center,垂直方向的top.bottom.center

还有像素px的的移动位置表示，负值向左，正值向右

以原点的表示方法，将图片位置比成一个坐标轴，表示方法为background-position(水平，垂直)

5.背景连写

background(color,images,repeat,position)

一般情况下推荐连写，这样浏览器能更高效处理

6.背景透明

1. opacity

盒子连同背景和内容都变成透明了

2. background-color: rgba(值)

rgba代码背景会透明而文字不会透明

background-color: transparent

透明色

默认的代码transparent

设置Div的背景颜色等于父元素的背景颜色

元素的显示方式及转换模式

1.块级元素

特点：

通常是独占一行，非常的霸道
可以设置宽高

通常的标签的div ， p ，h，ul，li，dl，dt，dd，form

2.行内元素

特点：

一行可以显示多个，非常的宽容
不可以设置宽高

通常的标签span ， a 、b、u、i、s、strong、ins、em、del

3.行内块元素

特点：

一行可以显示多个，非常的宽容
可以设置宽高

非常的不同，能够拥有块级元素和行内元素的特点

通常的标签 • input、textarea、button、select……

• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素的转换模式

在编写代码过程中，我们就经常会遇到需要转换元素的显示模式来满足我们的需求。

1.1.转换块级元素

display:block

转换情况：一般是为了能让行内元素可以设置宽高

1.2.转换行内块元素

display:inline-block

转换情况：一般是为了能让元素既可以设置宽高又可以在一行显示

注意点：块级元素转换为行内块元素时，会因为换行产生空白占位符

这种情况下我们可以设置块级元素父容器的字体大小为font-size:0;来解决这个问题

<div style="height:5mm;font-size:0">
<span id="year" style="display: inline-block;width:10mm;line-height:5mm;font-size:10.5pt">2018</span>
<span id="month" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">10</span>
<span id="day" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">18</span>
</div>

浮动html块级元素

<div style="height:5mm">
<span id="year" style="float:left;display: inline-block;width:10mm;line-height:5mm">2018</span>
<span id="month" style="float:left;display: inline-block;width:8mm;line-height:5mm">10</span>
<span id="day" style="float:left;display: inline-block;width:8mm;line-height:5mm">18</span>
</div>