Web前端学习 05

it2022-05-09  41

复习: 1.盒子模型 2.content-box,border-box width:100px height:100px; padding:10px;border-width:10px 3.如果box-sizing为content-box时,元素的width,height不包含内边距和边框 如果box-sizing为box-box时,元素的width,height包含内边距和边框

浮动和定位 1.浮动的基本使用 2.浮动的特性 3.清浮动 4.问题及如何解决 5.定位

一.非标准文档流 w3c标准文档流: 1.空格 换行在编译时都会成为一个空格,除非写在同一行 2.底边对齐,高矮不齐 3.block,inline,inline-block 4.标签与标签之间可能会相互影响

脱离标准文档流: float 定位:z-index

文档流:瀑布从上到下 脱离文档流:ps图层

浮动特性: 1.脱标 2.贴靠,无论是块级标签还是行级标签,都是贴靠的状态 3.字围

清除浮动: 1.给父级元素添加高度 2.clear:both 3.隔墙法

问题:父级高度没有设置时,高度是由子级内容撑开的,但是如果子级使用了浮动,父级的高度就会坍塌 解决:新建BFC, 常见是 1.overflow:hidden 2.float:left

总结: 1.浮动的基本用法 2.特性 3.清除浮动 4.父级高度坍塌 5.京东布局


最新回复(0)