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

结果

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

相关推荐
Xzh04231 小时前
Web 前端开发 — 期末复习指南(Html、Css、Js)
css·html5·web·js·期末
就叫_这个吧3 小时前
HTML或JSP页面链接CSS,link标签没问题,但不显示样式问题解决
java·前端·css·html·intellij-idea·jsp
古怪今人3 小时前
Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具
前端·css·scss
小此方3 小时前
【别传:Web前端开发(二)】重塑视觉视界:CSS核心机理与弹性排版全景草稿
前端·css
粉末的沉淀3 小时前
css:隐藏video标签的下载按钮
前端·css
韩曙亮3 小时前
【Flutter】Flutter 编译 Web 网站 ① ( Tomcat 部署 Web 网站 )
前端·flutter·tomcat·web
kyriewen14 小时前
CSS Container Queries:彻底告别 @media 写到手软,附 5 个真实布局案例
前端·css·面试
川冰ICE19 小时前
JavaScript实战④|天气查询应用,调用API与异步处理
javascript·css·css3
爱看老照片1 天前
浏览器的同源策略以及跨源问题 ( 浏览器的同域策略以及跨域问题)
浏览器·web·同源策略·跨域
艾伦野鸽ggg1 天前
CSS容器查询和悬浮间隙问题
前端·css