1
2
3
在这里插入图片描述
boarder 相邻框合并问题
1
boarder-classpse 相同的边框会合并在一起
text-alicn center 文字居中对齐
##### boarder 会撑大盒子的实际大小
一个盒子加了boarder之后会变大的
1
2
3
4
5
我可以把我的盒子内容进行修改, 减少像素
1
2
内容距离盒子的位置 叫做内边距
1
2
pading也会影响盒子的大小, 默认是紧贴在一起的
pading-top 内容和上边的距离
1
2
3
内边距 pading
1
pading会增大盒子的
1
盒子如果没有wight/hight 则此时pading不会撑大盒子
1
2
宽度不变化 因为我们此时没有撑开宽度
只要有这个属性 宽度就会发生变化
没有指定宽度 和父亲一样宽
1
2
3
浮动 float
为什么用浮动
多个块级的盒子排成一行
行内块元素
1
2
3
4
5
2.0 标准流可以管理竖着排列 浮动可以管理横着排列的
1
float left right none
1
eg:
1
标准流 如果我加了浮动 后 我就会脱离位置
1
如果我只给粉色的盒子加了浮动 蓝色的盒子没有加浮动 就会显示出这种叠加效果
1
我给我这个盒子加上float_left 意思是 我这个盒子我就有浮动了
2个盒子都设置浮动 就在左边进行排列
所有浮动得盒子都是在一行内进行对齐的，并且是顶端对齐的
1
2
3
我给我4个div 都加一个float left 就都向左移动
1
浮动得盒子 浏览器变小后 会掉下来,4个浮动的div盒子 浏览器缩小后会掉下来
1
2
如果屏幕再变小的话 会掉下来2个
1
浮动的盒子就会脱标
浮动的元素具备行内块元素特征
行内元素不能直接设置宽度和高度
1
2
3
span是行内元素 给宽高是无效的 加了float 之后就可以有宽高了
1
我们2个span 行内元素是没有宽高的 所以我们加了float之后 就有行内块元素的特性了 在一行显示 而且
具备行内块元素的特点 第一个在一行上 第二都是有宽度 有高度的
所以给我们行内元素添加了浮动 他就有行内块元素的特性
块级元素也一样 有宽度 有高度 加了浮动效果以后
1
2
3
4
5
不管你以前是什么元素 加了浮动之后都具备行内块元素的特性
父元素管上下 子元素管左右
f浮动的元素通常配合父级别使用
1
2
3
在这里插入代码片
1
所以我们的盒子不能直接加浮动 因为他是以浏览器为准 所以我们要以一个盒子包裹
先要准备一个大的父盒子
1
2
3
浮动盒子都是启一行的 只不过显示不开了 另起一行了
1
浮动布局的注意点 浮动和标准流的父盒子搭配
父元素管理上下
1
2
#######################\
第二个盒子没有浮动就会造成这个问题
1
第二个盒子没有浮动就会造成这个问题
1
################# 清除浮动
所有的父盒子都是有高度的么 只有浮动的盒子才能在一行上
1
2
3
4
像这种子孩子太多 就不方便给高度,父盒子高度此时就不能写死
因为此时我们不知道有多少产品
1
2
我不给父盒子高度 让子盒子撑开,
很多时候父盒子不方便给高度, 浮动的元素是不占有位置的
1
2
3
此时父盒子的高度就是0 ，如果父盒子没有高度 我们的父元素高度就是0
1
2
父盒子下面的div 就会拉上去
父亲没有高度 只要给孩子加了浮动 我父亲高度就变成0 就是因为我父亲没有高度 因为我们此时想用孩子来撑开父亲的高度
1
2
为了解决这个问题 我们要清除浮动
1
父亲高度为0 就会影响下面的高度
1
父盒子托标 清除浮动 因为i父盒子在很多情况下不需要高度的
1
2
清除浮动后 父亲有了高度 和子孩子一样 孩子有多高 我子盒子就有多高
孩子有多少不要紧 我能够自动检测高度
不会影响我们的页面布局 清除了浮动
1
2
3
###################?
定位
1
2
3
- 我们学习定位， 在开发中有什么常见场景 为什么需要定位
1
#########################>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
1
##### 或者我们可以让盒子固定到我们屏幕中的位置
小盒子在我大盒子中间自由移动位置 并且可以压住其他盒子
1
2
>定位 将盒子定在某一个位置上，所以定位也是摆放盒子，按照定位的方式移动盒子
定位的组成
定位模式+边偏移
1
2
3
4
relation 相对定位
相对定位相对于自身原来位置来走的 -----------？？ 不是以浏览器为准
也不是以父亲为准 是以他原来为准
1
2
3
4
他走之后 他的位置 ？？？？？？ 还在保留
下面的盒子不会跑到他下面
1
2
相对定位不脱标,相对定位 边偏移和浏览器没有关系 和原来的位置有关系
我都是以自己原来位置移动的， 第二条我下面的盒子没有升上去 也就是我没有脱标
1
2
相对定位
相对于自己原来的位置来进行移动的
不脱标 还继续在标准流中 也就是他原来位置还继续保留的
1
2
3
###############>>>绝对定位
元素如果加了绝对定位 是根据他的父元素来决定定位的
绝对定位如果没有父亲就会以浏览器对齐
他有父亲 但是父亲没有定位
你的父亲虽然 已经有了 但是没有定位 所以孩子加了绝对i定位之后还是以浏览器为准
1
2
3
4
5
绝对定位的使用特点 【没有父元素 或者父元素没有定位 子盒子】 就会以浏览器为准
我要让我里面的盒子在我父元素的中间来回移动
1
2
3
######>>>>>>>..怎么吧一个绝对定位的盒子约束到规定的父元素中
1
父亲有定位 了 孩子只能在父亲的定位框中
以我父元素为准
约束我的绝对定位 让我的绝对定位在父盒子里面
1
2
3
#
绝对定位 不再占有位置 脱离标准流
不保留位置 会浮动下来
1
2
3
4
绝对定位是不占有位置的
相对定位和绝对定位到底有什么样的场景 什么时候用相对定位 什么时候用绝对定位
子绝父相 的由来
父盒子必须要加定位来限制我子盒子要在父盒子内部
1
2
3
4
5
6
fixed 固定定位
固定定位有什么样的使用场景
浏览器在滚动的时候 我浏览器元素位置不会滚动
1
2
3
4
什么是浏览器的可视窗口,
1
浏览器的可视窗口
1
最简单的固定定位的写法
1
浏览器变大 永远在我这个可视区域的右上角
固定定位是以浏览器的可视窗口为
1
2
你加了 固定定位后 会脱标 不占有位置的
不再保留位置的
1
2
相对定位 不托标 x相对于原来位置移动位置 来移动位置
绝对定位 如果没有父级 或者父级没有定位是以浏览器为基准
子绝父相
三个盒子都加了绝对定位都会托标 基于浏览器 然后 谁在上面
1
2
3
4
定位的 层叠性 使用z-index 让定位的盒子层叠加起来
1
绝对定位的盒子剧中
1
2
我给这个div加一个margon 0 auto 就会水平居中
但是加了绝对定位的盒子 加margon 0 auto 就会水平居中 是不启动效果的
只要我加了绝对定位的盒子 默认是贴着我这个浏览器的左侧来显示的
但是我想让他在整个浏览器的水平居中显示 怎么做
1
2
3
4
5
6
在这里插入代码片
1
你不管怎么做 我box 还是在我可视区 的水平居中 垂直剧中 缩放浏览器
1
行内元素加了绝对定位和相对定位 也可以直接设置高度、宽度
1
我给我们span 加宽度 或者加高度 只能转换或者加浮动
1
2
我加了定位之后 我span 行内元素就有宽度和高度了
1
我div 的宽度就是内容的宽度了
1
#
1
float 会把文字全部露出来
1
在这里插入代码片
