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

结果

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

相关推荐
一心赚狗粮的宇叔17 小时前
VScode常用扩展包&Node.js安装及npm包安装
vscode·npm·node.js·web
干前端18 小时前
Vue3 组件库工程化实战:BEM 命名规范与 useNamespace 深度解析
前端·css
RFCEO18 小时前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
小满zs19 小时前
Next.js第二十五章(CSS方案)
开发语言·javascript·css
曲幽19 小时前
FastAPI部署实战:聊聊CORS跨域那些坑
python·fastapi·web·cors·corsmiddleware·origins
红色的小鳄鱼20 小时前
Vue 监视属性 (watch) 超全解析:Vue2 Vue3
前端·javascript·css·vue.js·前端框架·html5
Hacker_Z&Q1 天前
CSS 笔记2 (属性)
前端·css·笔记
一心赚狗粮的宇叔2 天前
mongosDb 安装及Mongosshell常见命令
数据库·mongodb·oracle·nosql·web·全栈
CappuccinoRose2 天前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局