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 .

相关推荐
securitor21 分钟前
【java】IP来源提取国家地址
java·前端·python
五行星辰42 分钟前
用 Java 发送 HTML 内容并带附件的电子邮件
java·html
yqcoder1 小时前
NPM 包管理问题汇总
前端·npm·node.js
程序菜鸟营1 小时前
nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
bsr19831 小时前
前端路由的hash模式和history模式
前端·history·hash·路由模式
杨过姑父2 小时前
ES6 简单练习笔记--变量申明
前端·笔记·es6
Sunny_lxm2 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
wanfeng_092 小时前
视频m3u8形式播放 -- python and html
python·html·video·hls·m3u8
咔咔库奇3 小时前
【TypeScript】命名空间、模块、声明文件
前端·javascript·typescript
兩尛3 小时前
订单状态定时处理、来单提醒和客户催单(day10)
java·前端·数据库