javaweb CSS

1.引入方式

1.行内式

2.内嵌式

3.外部样式表

注意左侧有一个专门的css文件夹

href是超链接引用,rel是关系属性,用来描述当前文档与被链接文档之间的关系。

2.选择器

1.元素选择器

这里使用button标签,就不会使用Input预设

结果

2.id选择器

这里"#"其实是选择的意思,意思是对第四个生效

结果

3.class选择器

分模块作用,需要的就调用class模块

结果

3.浮动

选right 向右浮动了,而剩下的两个格子递补

都向右浮动,既能保持特征,又能保证块元素在同一个区域内

第一个浮动到左边,覆盖了c.

仔细看,c还在,在b的"肚子里"

4.定位

定位方块的位置

这里的left top等属性都意味着距离此属性多远,一般不与right bottom一起用,容易冲突

此时使用的是abolute

这个结果随着浏览器框的长宽变动,也会随之变动

5.盒子模型

这里对div1设置右外边距,可以看到确实有了边距,把div2向右推了

给div2设置左外边距,也可以看到又有了边距

也可以在浏览器按f12选中对象然后看对应的盒子模型

让大边框居中,auto会让左右自动平均分配

结果

更多的不赘述,这里了解即可

相关推荐
COOLMO研究AI13 小时前
企业官网服务页的信息架构怎么设计:从用户问题到语义化 HTML
前端·css·html
kali-Myon14 小时前
ARTEX:AI 驱动的自动化漏洞挖掘平台
人工智能·安全·ai·自动化·web
hengdonghui14 小时前
Writeup 4 红帽杯 2021 Web Find_It
web·ctf·备份文件泄露
DsirNg1 天前
断点不该认识设备:组件布局的容器状态治理
css·前端工程化·组件化·响应式布局·css grid·设计系统·container queries
溪语流沙2 天前
【每天一个CSS | Day11】赛博朋克故障风文字:红青分离 + 切片抖动
前端·css
utmhikari2 天前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding
熊猫钓鱼>_>2 天前
MetaAI深度研究研究报告
ai·meta·大模型·llm·agent·web·metaai
两个西柚呀2 天前
JS事件总结
前端·javascript·css
ss2733 天前
AI全栈实战 | 2.1-02 CSS 布局:垂直居中为什么是经典面试题?所有布局在解决什么矛盾
前端·css
peter67684 天前
css揭秘-背景和边框
前端·css