发表于： 2020-03-17 22:24:14
0 1683
今天完成的事情：
今天对浮动布局比之前更加理解了,以前没想到可以这么用
明天计划的事情：
继续学习
遇到的问题：
无
收获：
## 视觉格式化模型(布局规则):页面中多个盒子排列规整
盒模型:规定单个盒子的规则
视觉格式化模型,大体上将页面中盒子的排列方式分为三种方式
1. 常规流:总体规则,块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定论盒子的排列区域
**块盒**
1. 每个块盒的总宽度,必须刚好等于包含块的宽度(子元素的宽度等于父元素内容盒的宽度)
若宽度 边框 内边距 外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto
**百分比取值**
padding 宽 margin可以取值为百分比
以上的所有百分比相对于包含块的宽度(父元素的宽度)
高度的百分比,父元素没有高度,设置百分比无效,百分比相对于父元素的高度
**上下外边距的合并**
外边距重叠 取最大值
解决外边距重叠？
父元素padding
border:1px solid transparent;
postion:absolute:
overflow:hidden;
float:left或display:inline-block;
## 浮动
1. 当一个元素浮动后,元素必定为块盒(更改display属性为block)
:nth-child(6n) {
选择第几个元素
}
::first-letter{
选择第一个字母第一个文字
}
返回列表
评论