CSS基础学习

一、CSS元素的显示模式（了解）

在HTML中将所有标签分为容器级和文本级两类
在CSS中将所有的标签分为块级元素和行内元素

1.什么是块级元素和行内元素？

块级元素会独占一行而行内元素则不会

2.块级元素和行内元素的区别：

2.1 块级元素（容器级）：
独占一行
如果没有设置宽度，那么默认和父元素一样

2.2 行内元素（文本级）：
不会独占一行
如果没有设置宽度，默认和内容一样宽
行内元素是不可以设置宽度和高度的
2.3 行内块级元素

二、CSS元素显示模式转换

1.如何转换CSS元素的显示模式
通过设置display属性
其中：inline 行内
block 块级
inline-block 行内块级

三、背景颜色

1.如何设置标签的背景颜色？
在CSS中，通过backgroun-color属性设置标签的背景颜色

四、背景图片

1.如何设置背景图片？
在CSS中通过background-image:url();
注意：（1）图片必须放在 url() 中，图片地址可以是本地的也可以是网络上的
（2）如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充
（3）如果网页上出现了图片，那么浏览器会在此发送请求获取

五、背景平铺

1.如何控制背景图片的平铺方式？
在CSS中通过background-repeat属性控制背景图片的平铺方式
取值：
repeat 默认，在水平是垂直方向都需要平铺
no-repeat 在水平和垂直方向都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

六、背景定位

1.如何控制背景图片的位置？
在CSS中通过background-position属性控制背景图片的位置
2.格式：
background-position:水平方向垂直方向
3.取值：
3.1 具体的方位名词如：left center right
top center bottom
3.2 具体的像素：
例：5px 20px 100px（一定要写单位）
具体的像素是可以接收负数的
注意：（1）同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色

七、CSS精灵图（了解）

1.什么是CSS精灵图？

一种图像合成技术

2.CSS精灵图的作用

可以减少请求的次数，以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS精灵图需要配合背景图片和背景定位来使用

CSS学习笔记（3）【CSS元素显示模式以及背景设置】相关推荐

超细的CSS学习笔记（CSS详解）
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录一.CSS介绍 1.CS ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
CSS学习笔记11 CSS背景
background-color:背景色前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...
CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素内联元 ...
HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...

CSS学习笔记（3）【CSS元素显示模式以及背景设置】