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

结果

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

相关推荐
EatFan12 小时前
HTML前端利用flex解决input定位的问题
前端·css·html·css3
labixiong16 小时前
告别scroll 监听:CSS 滚动驱动动画,主线程堵死也仍跟手
前端·css·html
King of fraud1 天前
HTML 页面的 CSS 选择器详解
前端·css·html
我的div丢了肿么办1 天前
grid布局justify-items和align-items、justify-content和align-content
前端·css
BillKu2 天前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
兜里只有三分钱~2 天前
翻卡_3D 的仪式感,和三个让它穿帮的写法
javascript·css·3d
山甫aa2 天前
【从零开始的 Web 后端学习】令牌技术一篇搞定(JWT 登录认证保姆级)
后端·学习·spring·web·jwt
Beyond_System|系统之外2 天前
一个网页如何同时适配投影仪、1366×768 和 1920×1080?我重新理解了“自适应布局”
开发语言·css·html
llxxyy卢2 天前
polar秋季赛部分题目wp(web全解)
web
Claire_882 天前
从零搭建网页:我用AI生成HTML/CSS/JS的实践与工具整理
css·人工智能·html