HTML 页面布局

慢慢生活,慢慢变好

------ 24.5.28

页面布局

盒子:

页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

盒子模型组成:

内容区域(content)、内边距区域(padding)、元边框区域(border)、外边距区域(margin)

布局标签:

实际开发网页中,会大量频繁的使用divspan这两个没有语义的布局标签

标签:<div><span>

特点:

div标签:

① 一行只显示一个(独占一行)

② 宽度默认是父元素的宽度,高度默认由内容撑开

③ 可以设置宽高(width、height)

span标签

① 一行可以显示多个

② 宽度和高度默认由内容撑开

③ 不可以设置宽高(width、height)

小结

CSS盒子模型

组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)

CSS属性

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000;

padding:内边距Amargin:外边距

**注意:**如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上-位置,如:padding-top、padding-left、padding-right .

相关推荐
我叫张小白。4 分钟前
Vue3计算属性:高效数据处理
前端·javascript·vue.js·前端框架·vue
e***749518 分钟前
【JavaEE】Spring Web MVC
前端·spring·java-ee
AntBlack31 分钟前
Z-Image 发布了 ,赶紧体验了一把(配套 Modal执行脚本)
前端·后端·aigc
诸葛韩信1 小时前
前端工程化1——npm insatall背后的工作原理
前端·npm·node.js
k***12171 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
专注前端30年1 小时前
如何使用 HTML5 的 Canvas + JavaScript 实现炫酷的游戏得分特效?
前端·javascript·游戏·html5·canvas·canva可画
q***06291 小时前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring
木易 士心2 小时前
深入理解 CSS 中的 !important
前端·css
行走的陀螺仪3 小时前
GitLab CI/CD 完整教学指南
前端·ci/cd·gitlab·团队开发·自动化测试部署
谢尔登3 小时前
Webpack高级之常用配置项
前端·webpack·node.js