盒子模型与样式排版

盒子模型与样式排版

块元素基础特性(block)

概念: 让开发者更好的对页面进行布局,把网页分割为一个个区块

常用块元素:
	div,p,h1-h6,ul,ol,li,dl,dt,dd
块元素特性:
	1.总是独占一行
	2.有宽度,高度,边距等属性. 都可以设置
	3.宽度默认为浏览器100% 高度为内容高度 (body默认属性有内外边距,所以直接看不是100%)
	4.可以包裹其他块元素
块元素相当于地主,有自己独立的一块地盘

行内元素基础特性(inline)

概念: 和块元素相比,行内元素相当于是打工人.它主要作为内容
它没有自己的地盘,内容大小就是自身大小. 所以给他设置宽高是,对齐都是无效的

常用行内元素:
	span a b  strong i u
行内元素特性:
	1.宽高为自身内容大小
	2.设置宽高等属性是无效的,它们不具备结构能力
	3.不会独占一行,有多个行内元素时,会在同一行显示
	4.从规范角度来说,行内元素不能放块元素,只能放别的行内元素
a标签可以放块元素.它和用户体验相关,所以a标签可以包裹块元素 -- 比如在移动端适配时

img : 行内元素
	img可以设置宽高,但它不属于块元素,宽高是它的自身属性

行内块元素(inline-block)

行内块元素是行内和块元素的结合体,同时具备两者特性(主块 次行). 主要用来做水平横向布局
	1.不会独占一行,和相邻的行内块元素之间会有空隙
	2.默认宽高为内容大小
	3.宽高,边距都可以设置生效

元素类型转换

display: 类型转换样式.让标签元素变为其他类型
	display : block;  把标签转为块元素
			 inline; 把标签转为行内元素
			 inline-block; 把标签转为行内块元素
			 none; 把标签转为空元素.不显示

盒子模型(div)

盒子组成:
	外边距 -- 边框 -- 内边距 -- 内容

外边距margin:
	盒子离外层的距离
内边距padding:
	盒子内容离盒子边框的距离

盒子的核心属性:
	width : 宽度,默认为浏览器的100%
	height: 高度,默认为内容高度
	overflow: 溢出处理(内容超出了盒子范围,怎么处理)
		visible : 正常显示
		hidden : 隐藏显示
		scroll : 滚轮显示
		auto : 浏览器看着办
	如果盒子宽高写死了,再设置padding内边距,会把盒子撑大
	如果没有写死,盒子宽高会随着内容而变化
	有时候写大盒子,可以只写宽度,不写高度. 高度随着内容而拓展

盒模型标签属性

复合写法: background image color size position
	background : url() center / cover;
				// image position size

margin -- 设置外边距
	margin: 10px;

padding -- 设置内边距
	pdding : 10px;

margin和padding都可以写1-4个值.对应效果不同 (一般1/2)
	margin : 10px;    # 距离四方向10px  基于左/上
	margin : 10px 20px;    # 距离上10px 左20px  
	margin : 10px 20px 30px ;    # 距离上10px 左右20px  下30px
	margin : 10px 20px 30px 40px;    # 距离上10px 右20px  下30px  左40px

margin设置左右居中:
	margin : 任意值 auto;
	auto会自动计算页面宽度,实现居中

单独设置边距方向
	margin-top : 上外边距
	margin-right : 右外边距
	margin-bottom : 下外边距
	margin-left : 左外边距

	padding-top : 上外边距
	padding-right : 右外边距
	padding-bottom : 下外边距
	padding-left : 左外边距

边框(border)

边框复合写法:
	border: 3px solid #096;  粗细,样式,颜色

border-width -- 边框粗细
	border-width : 5px;
border-style -- 边框样式
	border-style : solid;
border-color -- 边框颜色
	border-color : #096;
border-radius -- 边框圆角
	border-radius: 15px;

border-top : 上边框
border-right : 右边框
border-bottom : 下边框
border-left : 左边框

拓展案例 – 手机壁纸切换

https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

本次案例需要用到一个叫jquery的js模块. 用cdn导入即可 (网络导入)
	1.大盒子
	2.手机盒子
	3.相册列表
	4.背景图
	5.点击切换

练习:

还原文件夹里的案例

拓展:

bug对于开发和测试人员来说, 定义不太一样

对于开发人员 --> bug就是程序报错,数据异常.

对于测试人员 --> 不好用就是bug

测试 -- 测试软件,项目好不好用,能不能用
	不报错,用户体验不好,也算是个bug.也要提交修改