掘友等级
获得徽章 0
弹性盒模型
justify-content 设置元素在主轴上的对齐方式
可选值:
start 默认值,元素靠主轴起始位置对齐
end 元素靠主轴的结束位置对齐
center 沿主轴方向居中对齐
space-between 将主轴方向空白位置分配到两个元素之间 空白数量=元素数量-1 两侧没有空白
space-around 将主轴方向空白位置分配到元素周围 空白数量=元素数量+1 两侧的空白是元素之间空白的一半
space-evenly 将主轴方向空白位置分配到元素的一侧 空白数量=元素数量+1 两侧的空白宽度等于元素之间空白宽度
弹性容器
要使用弹性盒必须先将元素设置为弹性容器
display: flex 块级弹性容器
display: inline-flex 行内弹性容器
弹性子元素(弹性项)
弹性容器的子元素都会变成弹性子元素
弹性子元素都会沿着弹性容器的主轴排列
主轴
主轴就是弹性子元素的排列方向
侧轴(辅轴)
侧轴是与主轴垂直方向的轴
传统的布局手段
1. 盒子模型(box model)
盒子模型主要用来确定元素的大小和间距
主要用来处理元素的纵向排列
2. 浮动(float)
浮动本来是用来处理文本环绕图片这种类似效果的
后来被用到了元素的水平排列上
因为它不是被设计用来布局的,所以使用浮动会存在一些问题(高度塌陷问题)
主要用来处理元素的横向排列
注意
盒子模型和浮动主要用来进行宏观的布局
3. 定位(position)
通过定位可以将一个元素摆放到网页的任何位置
主要用来处理网页中的小部件
事件冒泡
当一个事件在 DOM 元素上触发时,如果有事件监听器,它将尝试处理该事件,然后事件冒泡到其父级元素,并发生同样的事情。最后直到事件到达祖先元素。事件冒泡是实现事件委托的原理(event delegation)。
自己找bug自己解决真的难受,昨天改了一天,累到不行,晚上11点半之前就睡了
<script>、<script async>和<script defer>的区别。
<script> - HTML 解析中断,脚本被提取并立即执行。执行结束后,HTML 解析继续。
<script async> - 脚本的提取、执行的过程与 HTML 解析过程并行,脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时,可以使用async,比如用作页面统计分析。
<script defer> - 脚本仅提取过程与 HTML 解析过程并行,脚本的执行将在 HTML 解析完毕后进行。如果有多个含defer的脚本,脚本的执行顺序将按照在 document 中出现的位置,从上到下顺序执行。
今日调休,为了给五一腾出来一个五天长假,连着上六天班,真难熬啊。感觉这多出来的一天并不能提高工作量,反而降低了未来一周的工作效率,得不偿失,搞不懂
周末当然是出去玩了,学习什么的都可以靠边了。趁五一之前在重庆玩玩,听说五一来旅游的人超多啊
z-index属性
CSS 中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position值不是static的元素。
没有定义z-index的值时,元素按照它们出现在 DOM 中的顺序堆叠(层级越低,出现位置越靠上)。非静态定位的元素(及其子元素)将始终覆盖静态定位(static)的元素,而不管 HTML 层次结构如何。
今天好像是被瞌睡虫下蛊了,好困啊,一天都没精气神,而且心已经飞到五一去了,真没办法好好学习
下一页