CSS详细基础（四）显示模式-编程知识

CSS详细基础（四）显示模式

本帖开始介绍CSS中更复杂的内容

一.显示模式

1.行内元素

2.块级元素

3.行内块元素

二.背景样式

一.显示模式

顾名思义，在CSS中，元素主要有3种显示模式：行内元素、块级元素、行内块元素~

所谓块级元素，指的是该元素在页面中独自占用一行；而行内元素则允许多个元素共处一行；而行内块元素，则兼具两者特点

1.行内元素

常见的行内元素如下：

a - 锚点
em - 强调
br - 换行
img - 图片
font - 字体设定(不推荐)
span - 常用内联容器，定义文本内区块
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框

行内元素的特点：

相邻行内元素在一行，一行可以显示多个。

高度、宽度的设置无效，只会被文字撑开。

默认宽度就是文本撑开的长度

行内元素只能容纳行内元素和文本

如下代码展示一下行内元素的效果：

 <span class="red">我是第一个行内元素</span><span class="orange">我是第二个行内元素</span><span class="red">我是第三个行内元素</span> <div>  <img src="/小米图标.jpg" class="small"><img src="/小米图标.jpg" class="small"><img src="/小米图标.jpg" class="small"></div>

需要特别说明的是，span与img均为行内元素，理应归纳在同一行；但由于此时三张小米的img标签均被包裹在了一个独立的div内，div这种块级元素的存在使得三个图标必须换行 ~

2.块级元素

常用的块级元素：

p - 标签定义段落
h1 - 定义最大的标题
h2 - 定义副标题
h3 - 定义标题
h4 - 定义标题
h5 - 定义标题
h6 - 定义最小的标题
ul - 定义无序列表
ol - 定义有序列表
li - 标签定义列表项目
dl - 定义列表
dt - 定义列表中的项目
dd - 定义列表中定义条目
hr - 创建一条水平线
div - 定义文档中的分区或节
form - 创建 HTML 表单

块级元素的特点：

自身独占一行

高度、宽度、内外边距都可以自定义
宽度默认是父元素的100%
块元素里可以放行内、行内块、块元素

    <div class="purple">我是第一个块元素，可以设置大小，放置其他块元素和文字 <a href="#">我是另一个元素</a></div><div class="skyblue">我是第二个快元素</div><div class="purple">我是第三个块元素</div>

如上的样例充分反应了块级元素与行内元素的主要区别：可自定义自身的长宽，亦或包含其他的块级元素等~

总的来说，行内元素与块级元素的区别可以归纳如下：

块级元素默认占一行高度，默认情况下宽度自动填满其父元素宽度；行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化。
块级元素可以设置宽高；行内元素不可以设置宽高。

3.行内块元素

顾名思义——兼具上两者的共同点~

常见的行内块元素如下：

<img />、<input />、<td>

行内块元素的特点：

和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙
一行可以显示多个（行内元素特点）
默认宽度就是内容的宽度（行内元素特点）
高度、宽度、内外边距都可以自定义（块元素特点）

    <span class="skyblue change">我是第一个转换型</span><span class="purple change">我是第二个转换型</span><span class="skyblue change">我是第三个转换型</span>

如上，虽然span是行内元素，但在change类选择器里面定义了让块级转化为块级的语法，因此每个span会独占一行~

4.转换方式

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

显示模式的熟练运用非常重要，多加练习才能应对实际开发中的多种需求~

二.背景样式

css的背景：所有background的默认值均为transparent~（即透明）

常用的两个属性：

background-color: burlywood;
background-image: url(img/拜仁.jpg);

分别以16进制颜色及背景图片作为底色 ~

如下为div的3个样例样式：

        .one{background-color: blueviolet;width: 250px;height: 250px;}.two{background-color: burlywood;width: 250px;height: 250px; }.three{   width: 250px;height: 250px;background-image: url(img/拜仁.jpg);}

当设置的长款大于图片本身的大小时，通过如下的方式可以避免采用重复的图片补齐~
background-repeat: no-repeat;
background-position属性用于设置背景图像的位置~
background-repeat: no-repeat;
如下的代码使得在屏幕滚动时，背景不会随之移动（即attachment）
        body{background-image: url(../19号以后的图片/2.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}
如下，在16rgb三色表达中多加一位，用于控制透明度的程度——此处表示0.4
        .hezi{background-color: rgba(255, 106, 0, 0.4);width: 300px;height: 300px;}