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链接默认指定了一个样式>>> 蓝色的有下划线
权重叠加
如果是符合选择器, 则会有权重叠加, 需要计算权重
