CSS基础 2（2）-阿里云开发者社区

CSS基础 2（1）https://developer.aliyun.com/article/1517387

元素显示模式的切换

行内元素切换为块级元素

下面的手机电话卡这个栏目为一个a 标签, 但是现在我们需要将其设置宽度,让他能有下图显示的这么大, 这个时候我们就需要用到元素显示模式的切换.

特殊情况下, 我们需要元素显示模式的切换, 简单理解, 就是一个模式的元素需要另外一种模式的特性, 就例如我们上面这个例子, 需要增加连接a的触发范围.

一个例子, 我们对a设置宽度高度和背景颜色如下:

<a href="#">hahahha</a>
    <style>
        a {
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>

对a的高宽设置是不管用的, 没有任何效果.

因为a是行内元素, 这个时候我们就需要将其转化为块级元素,

设置属性. display: block;

<a href="#">hahahha</a>
    <style>
        a {
            height: 100px;
            width: 100px;
            background-color: orange;
 
            /* 将a 转换为块级元素 */
            display: block;
        }
    </style>

块级元素切换为行内元素

下面有两个块级元素div, 如下:

<div>我是块级元素</div>
    <div>我是块级元素</div>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>

效果图如下:

如何将其设置为行内元素? 使用属性 display: inline;

<div>我是块级元素</div>
    <div>我是块级元素</div>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
            display: inline;
        }
    </style>

转化为行内块元素

设置属性 display: inline-block;

元素显示模式的案例

小米侧边栏简洁版

小米官网的侧边栏如下:

我们要做的简洁版如下:

我们在写这个的时候, 先不要着急, 不要上来就直接写代码, 应该是先分析一下.

案例核心思路:

把连接a转化为块级元素, 这样子连接就独占一行, 并且拥有高度和宽度
鼠标a给链接设置背景色

<div>
        <a href="#">手机电话卡</a>
        <a href="#">电视盒子</a>
        <a href="#">笔记本平板</a>
        <a href="#">出行穿戴</a>
        <a href="#">智能路由器</a>
        <a href="#">健康儿童</a>
        <a href="#">耳机音响</a>
    </div>
 
 
    <style>
        div {
            background-color: #535758;
            width: 280px;
            height: 350px;
        }
 
        a {
            text-decoration: none;
            display: block;
            color: white;
            height: 50px;
            text-indent: 2em;
            line-height: 50px;
        }
 
        a:hover {
            background-color: #FF6F00;
        }
    </style>

(这里设置line-height 和 height 的值相同, 来实现垂直居中)

单行文字垂直居中

CSS中没有给我们提供文字垂直居中的代码, 但是我们这里可以有一个小技巧来实现.

小tip :

让文字的行高等于盒子的高度, 就可以让文字在当前盒子内垂直居中.

例如:

<div>hello</div>
    <style>
        div {
            background-color: gray;
            color: white;
            width: 200px;
            height: 200px;
            line-height: 200px;
        }
    </style>

原理:

行高由上间隙和下间隙, 还有文字本身的高度组成.

这里假如盒子高度为40, 然后设置行高为40, 那么当这个文字插入到盒子之后

由于上间隙和下间隙是看不到的, 是透明的, 这就会显示文字到垂直居中了.

CSS背景

通过CSS背景属性, 可以给页面元素添加背景样式.

背景属性可以设置背景颜色, 背景图片, 背景平铺, 背景图片位置, 背景图像固定等.

背景颜色

设置CSS属性: background-color

语法如下:

一般情况下, 元素背景颜色默认值是transparent(透明), 我们也可以手动指定背景颜色为透明色.

我们现在设置一个div标签属性如下:

<div></div>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px;
            border-style: dashed;
        }
    </style>

可以看到这个div标签的背景是透明的, 也就是相当于在这个div属性中设置了:

background-color: transparent;

如果要将此div标签的背景颜色改为红色, 那就设置background-color属性为red即可:

<div></div>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px;
            border-style: dashed;
            background-color: red;
        }
    </style>

背景图片

background-image 属性描述了元素的背景图像, 实际开发常见于logo 或者一些装饰性的小图片, 或者是超大的背景图片, 有点事便于控制位置, 精灵图也是一种运用场景, 例如:

background=image 的默认值为none, 也就是没有背景图片, 他可以传入一个url来设置图片.

例如, 我们设置一张背景图片

    <div></div>
    <style>
        div {
            width: 1024px;
            height: 1536px;
            border: 2px;
            border-style: dashed;
            background-image: url(https://img2.baidu.com/it/u=3357715627,3311806369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750);
        }
    </style>

背景平铺

我们位置荣耀的一个logo是图中那个小红框那么大, 但是我们的盒子有外边最大的红框那么大. 于是就吧我们背景图片重复复制了几份.

这种重复的情况就是称为背景平铺, 如果需要在HTML页面上对背景进行平铺, 那么就需要使用欧冠background-repeat属性来设置:

<div></div>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px;
            border-style: dashed;
            background-color: red;
            background-image: url(https://img0.baidu.com/it/u=1271524887,2752212953&fm=253&fmt=auto?w=130&h=170);
 
        }
    </style>

默认情况下, 背景图片是平铺展示的, 也就是默认设置了:

background-repeat: repeat;

如果设置不平铺, 也就是:

background-repeat: no-repeat;

代码如下:

<div></div>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px;
            border-style: dashed;
            background-color: red;
            background-image: url(https://img0.baidu.com/it/u=1271524887,2752212953&fm=253&fmt=auto?w=130&h=170);
            background-repeat: no-repeat;
        }
    </style>

设置x方向平铺, 选择属性:

background-repeat: repeat-x;

设置y方向的平铺. 选择属性:

background-repeat: repeat-y;

背景图片会压着我们的背景颜色

背景图片位置

利用background-position 属性可以改变图片在背景中的位置

如果指定的两个值都是方位名词, 那么两个值的前后顺序无关, 比如left top和top left 效果是一样的.

例如:

图片居中: center center
图片居右下: right bottom (同bottom right)
图片居左下: left bottom ( 同bottom left)
等等, 以此类推.

一个案例如下;

<div></div>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px;
            border-style: dashed;
            background-color: red;
            background-image: url(https://img0.baidu.com/it/u=1271524887,2752212953&fm=253&fmt=auto?w=130&h=170);
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>

注意: 如果只指定了一个方位名词, 另外一个省略, 则第二个默认居中对齐

背景位置-精确单位

还是使用background-position参数来设置, 只不过这个参数不是left right top和bottom, 而是准确的像素值, 例如我们想设置一个背景图片距离左侧20px, 距离上侧30ox, 就可以设置如下:

<div></div>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px;
            border-style: dashed;
            background-color: red;
            background-image: url(https://img0.baidu.com/it/u=1271524887,2752212953&fm=253&fmt=auto?w=130&h=170);
            background-repeat: no-repeat;
            background-position: 20px 30px;
        }
    </style>

注意: 如果这里只写一个, 例如 :

background-position: 30px;

那么这个30px就一定指的是x轴的方向, 另外的y轴的默认是center的, 也就是相当于如下设置:

background-position: 30px center;

背景位置-混合位置

我们即可以使用left right等方位词, 也可以使用精确的像素值, 例如 30px等等, 但是除了这两种还有一种混合使用的位置, 也就是将这两种位置表达的方式结合起来的方法, 但是需要注意的是, 这种混合位置的表示方法需要注意方位的顺序, 例如, 第一个参数一定是x轴, 第二个参数一定是y轴.

背景图像固定

background-attachment 属性设置背景图片是否固定或者随着叶念的其余部分滚动.

背景透明

    <div class="test2">
 
    </div>

        .test2 {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.3);
        }

半透明背景色, 使用background: argb选项来设置, 案例如上图显示.

其中最后前三个参数为rgb色彩的值, 最后一个参数是alpha透明度, 取值范围在0~1之间

越接近于1, 越不透明

CSS 三大特性

css有是哪个非常重要的特性: 层叠性, 继承性, 优先级

层叠性

相同的选择器设置相同的样式, 此时的样式就会覆盖另外一个冲突的样式, 层叠性主要解决样式冲突的问题.

例如现在有一个div, 但是有两个选择器选择了这个div :

<div>
        哈哈你好啊
    </div>
 
    <style>
        div {
            color: blue;
        }
 
        div {
            color: aqua;
        }
    </style>

结果是哪个呢?? :

结果是aqua

层叠性原则:

样式冲突, 遵循的元组是后来者居上的原则, 总是执行最后一个样式
样式如果不冲突, 就不会进行从层叠

继承性

CSS子标签可以继承父标签的样式, 例如文本颜色和字号, 简单理解就是: 子承父业

现在有一个例子如下:

<div>
        <p>hello world</p>
    </div>
 
    <style>
        div {
            color: red;
        }
    </style>

恰当的继承可以简化代码, 降低CSS样式的复杂性
子元素可以继承父元素的样式, 例如 text, font, line,
口诀> 龙生龙, 凤生凤, 老鼠生的孩子会打洞

行高的继承

子元素可以继承父元素的行高:

    <style>
        body {
            line-height: 30px;
        }
    </style>
    <div> 这是一个div标签</div>
    <p>这是一个p标签</p>

行高可以跟单位, 也可以不跟单位

优先级

当同一个元素指定多个选择器, 就会有优先级的产生

如果选择器相同, 则执行层叠性
选择器不同, 则选择器的权重执行

优先级注意点:

权重是有四组数字组成, 但是不会有进位
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器. 一次类推
等级判断从左向右, 如果数值相同, 则判断下一位数值
简便记忆方法: 通配符和继承权重为0, 标签选择器为1, 类选择器为10, id选择器为100, 行内样式表为1000, !important为无穷大.

需要注意的是: a链接默认指定了一个样式>>> 蓝色的有下划线

权重叠加

如果是符合选择器, 则会有权重叠加, 需要计算权重

CSS基础 2（2）