盒子模型与样式排版
块元素基础特性(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.也要提交修改