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

结果

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

相关推荐
玉米Yvmi3 小时前
从零理解 CSS 弹性布局:轻松掌控页面元素排布
前端·javascript·css
西洼工作室3 小时前
前端js汉字手写练习系统
前端·javascript·css
Flystone5 小时前
CSS 有什么奇技淫巧?
css
我血条子呢5 小时前
【CSS】类似渐变色弯曲border
前端·css
用户1887871069845 小时前
CSS3 clip-path+animation实现不规则容器中的粒子下落
css
用户1887871069845 小时前
CSS3 实现16:9大屏居中显示
css
海市公约5 小时前
CSS 核心知识点精讲:基础概念、样式规则与布局技巧
前端·css·盒子模型·选择器·网页布局·网页样式设计
elangyipi1235 小时前
使用CSS Contain 优化你的页面(重排和重绘)
前端·css
未来可期wlkq5 小时前
overflow跟input搭配使用,会导致内容区整体移动,overflow属性导致
javascript·css·vue.js
相闻秋歌6 小时前
四、Chrome调试工具
css·html5