css基础之显示模式、背景、三大特性

显示模式、背景

一、元素显示模式

1.块级元素

独占一行，例如div,p，hr,h1-h6,ul,ol,form,table

可以设置高度宽度，外边距，内边距

宽度默认容器宽度

里面可以放行内或块级元素

注意：

文字类元素不能使用块级元素

css 复制代码

<p>或<h1>等里不能放<div>

2.行内元素

例如：span,a,i,em

相邻行内元素一行可以放多个

宽高直接设置没有效果

默认宽度是本身内容宽度

行内元素只能放文本或其他行内元素

注意：

链接里不能放链接

链接里可以放块级元素

3.行内块元素

一行可以放多个

默认宽度是本身内容宽度

可以控制高度宽度，外边距，内边距

4.显示模式的转换

（例如a是行内元素，不能设置宽度，但我们想改变链接点击的宽度，也就是要改变为块级元素）

（常用）转化为块级元素：display: block;

转化为行内元素：display: inline;

（常用）转化为行内块元素：display: inline-block;

css 复制代码

<style>
    a {
        color: pink;
        text-decoration: none;
        width: 150px;
        height: 50px;
        display: block;
    }
</style>
<a href="#">小猪佩奇</a>c

5.qq截图ctrl+alt+a

6.让文字行高等于盒子高度时可以实现文字垂直居中

二、背景(logo一般用background实现)

1.背景元素(默认透明transparent)

background-color: pink;

2.背景图片

(当既有图片又有背景颜色，图片会压住颜色)

background-image: url(image/Logo.png)

3.背景平铺(默认平铺repeat)

background-repeat

background-repeat: no-repeat;没有平铺

background-repeat: repeat-x;沿x轴平铺

background-repeat: repeat-y;沿y轴平铺

4.背景图片位置

background-position: 方位名词;

方位名词：

x轴:right,left,center

y轴:center,top,bottom

当只有一个方位名词，另外一个轴默认居中

当两个方位名词时，与前后顺序无关

background-position: center top;

background-position: 精确方位；

当只有一个精确单位的值时，一定为x轴，y轴默认居中

当为精确方位时，必须先x轴再y轴

background-position: 20px 50px;

background-position: 混合单位

background-position: center 20px;

5.背景固定(默认scroll)

background-attchment: scroll背景随对象滚动

background-position: fixed背景固定

6.背景复合写法

background: black url() repeat-y fixed top;无顺序要求

7.背景色半透明

background: rgba(0,0,0,0.3);最后一个数字取值范围 $0,1$ 控制透明度

三大特性

1.层叠性

当给结构设置了相同的样式时，根据层叠性的就近原则，实现离结构近的样式，或者说后面的代码会覆盖

2.继承性

子标签会继承父标签的与文字相关的某些样式

行高的继承性:font: 12px/1.5 Microsoft YaHei;1.5指的是行高为当前文字大小的1.5倍也可以写带单位px的模式

3.优先级

选择器相同根据层叠性

选择器不同根据选择器权重

选择器权重：!important(color: pink!important)为无穷>style (
)为1000>id为100>类,伪类为10>元素为1>继承为0

注意:

浏览器单独给链接a设置了样式,不能通过body来修改样式

复合选择器有权重叠加，但不会进位

此时的字为红色,虽然id的权重比元素的大,但是p继承的权重最低为0

css 复制代码

<style>
    #father {
        color: pink;
    }
    p {
        color: red;
    }
</style>
<body>
    <div id="father">
        <p>好看</p>
    </div>
</body>