CSS的进一步学习过程

本文深入探讨CSS中的三种布局模型:流动模型、浮动模型和层模型,并详细解析float和position属性的应用,包括relative、absolute及fixed定位。同时,介绍了常用的CSS样式属性,如font、text-indent、text-align等,以及超链接的状态样式。

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

布局

有三种布局模型,分别是流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)
基本上布局都会用到float和层模型
float就是div{float:left;}  div{float:right;}
那里面的元素就会向左或向右排过去,比如输<ul><li>就会出现列表,是竖直的,但加上float,就会浮动,变成水平的了,制作menu作业时就用到了float;
层模型就是那三个位置,相对定位、绝对定位、固定定位
输上position:relative就是相对定位,在一开始没输relative的图的位置上进行移动
同样position:absolute,是在div的位置上进行移动,用术语就是具有定位属性的父包含块进行绝对定位,如果没有div就是在整个页面上进行定位,或者说body元素。
最后是position:fixed,也很常用,顾名思义就是固定,固定在页面上不动,滚动条往下滚也不会让它消失,设置广告小窗口就需要它(hhhhhh)
这只是最开始的步骤,调整位置还需要margin、padding等等

我知道的样式

字体就是font,font-size;
font-style:italic(斜体);
font-weight:bold(加粗);
text-decoration:underline;line-through;blink(删除线);none(取消掉修饰,这个比较常用)
改变字体就要用到font-family:YaHei Consolas
缩进text-indent:10px;国庆作业就用到了这个
text-align:right;
text-align:left;
text-align:center;
text-align:justify;(水平方向)
vertical-align:top;
vertical-align:bottom;
vertical-align:middle; (竖直方向)
a是超链接的属性
a:hover 鼠标移到超链接会变样式
a:link 超链接初始样式
a:visited 点击过后的样式
a:active 点击时的样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值