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会让左右自动平均分配

结果

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

相关推荐
breeze jiang7 小时前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
何时梦醒8 小时前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽8 小时前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
BreezeJiang8 小时前
写了 display:flex,为什么三栏布局还没完成?
前端·css
用户9385156350720 小时前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
莫问ABC1 天前
HTML、CSS、JavaScript 前端三件套
前端·css·html
fangzhanpeng1681 天前
(前端)5.盒子模型的宽高和边距
前端·javascript·css
用户059540174461 天前
把大模型记忆召回测试从 30 分钟手工核对压到 3 秒自动化,pytest + FAISS 这套组合救了我
前端·css
可视之道2 天前
CSS Container Queries 在组态大屏中的实战
css
雪碧聊技术3 天前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略