CSS中的一些背景相关的学习

今天讲了CSS一些相关的属性,其中包括背景相关属性、尺寸相关属性、显示相关属性等,还有盒子模型和定位的一些知识。现在就让我们详细的了解一下吧!

先说背景相关的属性吧,其中就分好多项:

(1)background-color:背景颜色
(2)background-image:设置背景图片,需要设置图片的url地址
(3)background-repeat:图片的复制选项
   ①repeat:在水平和垂直两个方向上进行复制
   ②no-repeat:不复制
   ③repeat-x:在水平方向上复制
   ④repeat-y:在垂直方向上复制
(4)background-position:背景出现的位置

为了方便书写,也可以将这一组属性值都封装到一个background中,这样能使表达简洁。

2、尺寸相关属性,最常见的就要数width和height了,分别是宽度和高度,其他还有:max-width:最大宽度、max-height:最大高度、min-width:最小宽度、min-height:最小高度。

3、显示相关属性

(1)隐藏元素的方法

①  visibility:hidden,仅仅隐藏内容,该元素所站位置依然存在;
②display:none,不仅隐藏内容,且不占位置。

其中display还可以设置元素的显示模式,

(2)inline:将块级元素以内联元素形式显示,此时width和height实行无效,其空间取决于元素的内容

(3)inline-block:将块级元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置大小。

4、下一个内容,它就是盒子模型,

用margin(外边距)来表示,其中还有以下几个属性:

margin-top、margin-right、margin-legt、margin-bottom

使用方式:

(1)margin:30px;表示上下左右外边距都为30px

(2)margin-left:30px。单独设置上下左右外边距

(3)margin:10px、20px、30px、40px;分别设置上右下左四个边距为10px、20px、30px、40px。

padding:内边距,也有上下左右边距,和margin类似

(1)边框也可设置属性,让人看着简单明了:

①border:边框

②border-width:边框宽度

③border-style:边框的线条类型

④border-color:边框用颜色

也可以使用更优化的方式:

border: 50px groove skyblue;

outline:轮廓线,用法同border一样。

5、好了,现在来说说今天的最后一个内容吧,定位。在现实生活中,有GPS定位,在计算机语言中也是有自己定位的语言的。如下:

(1)定位方式有:定位方式有:static(静态的,默认的)、fixed(固定的)、relative(相对的)、absolute(绝对的),还有个无定位,元素正常是出现在流中,是不受left、right、bottom属性的影响的。

就举几个例子看看吧,用fixed来演示:

#div1{
    width: 200px;
    height: 200px;
    background-color: gold;
}
#div2{
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    position: fixed;
    left: 30px;
    top: 20px;
}

这个从显示结果看,fixed定位会将元素从流中“摘”出来单独进行定位,其定位取决于left、top。(因为不知道怎样上传截图,所以没有图片观看结果)

重新定位之后可能会出现重叠,通过z-index可以调整其顺序,但是静态定位z-index无效。

今天就写怎么多了,现在越学习,就感觉计算机的世界也是很复杂的,现在的决定只能是努力学习,打下基础,为以后的未来奠定基石!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值