web前端 -- Day4基础知识

本文深入解析CSS背景属性及浮动布局技巧,涵盖背景图定位、复合选择器使用及网页布局方式,帮助读者掌握关键CSS技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景属性

在css中,背景值通过background控制,它也是一个复合属性。
背景图定位坐标的书写方式:
1、方向特殊值:水平位置:left center right ; 垂直位置:top center bottom;
2、具体像素值:例如:100px 20px ,这里可以接受负值。
如果背景图固定模式设置为fixed,可展现背景图固定于屏幕。

background:背景颜色 背景图 平铺方式 水平位置 垂直位置 固定模式;
平铺方式:no-repeat — 不平铺; repeat-x — 横向平铺;   repeat-y — 纵向平铺;
background-color  — 背景颜色
backgroud-image  — 背景图片
backgroud-repeat  — 背景平铺方式
backgroud-postion  — 背景定位

注意事项:应用背景图的标签左上角是坐标原点(0 0)。

选择器

选择器:标签选择器、类选择器、id选择器、通配符*

复合选择器
在css中常用的复合选择器:后代选择器、并集选择器、交集选择器

**后代选择器 **
通过一个空格表示后代管子,通过父级标签找到他的后代标签;例如:.box span{},表示.box里面的span标签

并集选择器
将多个选择器用逗号隔开表示共同选中,作用是一起选中书写样式;例如:h1,div,.box{}

交集选择器(指令式选择器)
通过不同选择器连续书写,表示志玲选择,作用是选中指定的标签;例如:p.box{},表示选中带有box类名的那个p标签

网页布局

任何复杂的网页的都是由标签堆砌而成。网页布局是什么?网页布局就是指标签的不同的排列方式。这些排列方式看起来复杂,其实只有两种,上下垂直排列和左右水平排列;而且水平排列是在垂直排列的基础上进行拆分排列。

浮动布局
float表示浮动属性,它的值left/right(没有center),作用是实现盒子水平排列,要么是左对齐,要么是右对齐。
注意事项:
1、网页布局中,最稳定的排列方式就是块级标签上下垂直排列;
2、在网页布局中保证结构的稳定,同级标签中只能有有一种排列方式,要么是上下垂直排列,要么是左右水平排列。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值