透明度
(1)opacity,它设置的是整个元素的透明度(包括内容,边框,内外边距),取值为 0 ~ 1
(2)在颜色位置设置alpha通道(raba) 例: (0,0,0,0.5)
盒子的隐藏
(1) display: none 不生成盒子,其他的元素当它不存在 // 不保留其位置
(2) visibility(默认值为visible):hidden 生成盒子,盒子类型与display一样,盒子仍然占空间 // 保留其位置
背景图
- img元素与背景图的区别
(1)说明: img元素属于HTML的概念,背景图属于CSS的概念
(2)当图片为网页内容时,必须使用img元素
当图片仅用于网页的美化时,必须使用背景图
- 涉及的CSS属性
(1)background-image [url(路径)] // 注:[]表示可选,实际运用不需要加
(2)background-repeat [repeat(默认),no-repeat,repeat-x,repeat-y]
(3)background-size [fill(默认值),contain,cover,类似于img元素的object-fit属,也可以是数值或百分比(相对于自身的盒子)]
> 例:background-size:宽度 高度;
(4)background-position [left,bottom,right,top,center(相对于自身位置)]
(5) background-attachment [fixed(固定元素位置,相对于浏览器视口进行定位)]
(6)背景图和背景颜色混用
> background-color [直接在背景图下设置背景颜色,背景颜色会填充背景图没有覆盖的地方]
样式补充
- list_style属性
(1)"list-style-type" 设置的是次盒子中内容的类型,子父元素中设置,子元素可以继承
(2)"list-style-position" 设置次盒子相对于主盒子的位置 // 该属性常用于 ul li 元素的初始化
(3)速写属性 "list-style"
(4)清空次盒子,list-style:none;
- 图片失效时的宽高问题
如果img元素的图片链接无效,img元素的特性和普通行盒一样,无法设置宽高
解决办法:可以将img设置为块盒或者行块盒
-
行盒中包含行块盒或者可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
解决方法: 1.设置父元素的字体大小为0;[缺点:不能显示div中的文字]
2.将图片设置为块盒(display:block)
如果想给图片加上边框,可以将行盒元素设置为块盒子
- text-align属性
(1)text-align属性取值
- left 左对齐
- right 右对齐
- center 居中 (空白均分)
-justify 除最后一行外,分散对齐(空白均分)
(2)可以用作盒子并排排列,如例
例: .container{
width:500px;
background: lightblue;
text-align: justify;
}
.container::after{ 在末尾添加一个元素
content:"";
display:inline-block;
width:100%
}
.container .item{
width: 150px;
height:100px;
outline: 2px solid;
display:inline-block;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>