前端-css篇
概念构建
CSS
盒模型
- 标准盒子模型
- ie盒子模型
margin重叠问题
官方解释:块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠。(块元素的 上下外边距 ,只有 块元素 会发生外边距重叠,行内元素 和 行内块元素 都不会发生外边距重叠问题)
-
同一层相邻两元素之间(一上一下、块级元素)
发生边界重叠,只会挑选最大边界范围留下,所以两者之间的边距为100px
如果需要解决这个边界重叠问题,则需在后一个元素加上float -
没有内容将父元素和后代元素分开(子元素外边距被赋给了父元素)
-
解决方案
-
给父元素加overflow:hidden;
这种方法解决了外边距重叠问题,但是这个方法只适用于 子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top < parentHeight),不然子元素部分内容就会被隐藏掉
-
给父元素加边框 border
父子元素是外边框重叠到一起去了 ,那么我们给父元素加个边框,他们的外边距就有了边框的间距,但是这样也就多出来没有必要的边框
-
给父级或者子级设置display:inline-block;
只有块元素会产生外边距重叠,那么我们就让它不是块元素,把它设置为行内块元素
-
给父级或者子级设置float
-
给父级或者子级设置position: absolute;
-
给父元素添加padding
-
-
外边距重叠计算
- 两个正数取最大的数
- 两个负数取绝对值最大的数
- 一正一负取两者之和
margin-left/right/bottom/top 分别设为负值会怎么样?
margin-top
和margin-left
负值,元素向上、向左移动margin-right
负值,右侧元素左移,自身不受影响margin-bottom
负值,下方元素上移,自身不受影响
BFC
BFC
全称:Block Formatting Context
, 名为 "块级格式化上下文"。
W3C
官方解释为:BFC
它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉 及到可视化布局时,Block Formatting Context
提供了一个环境,HTML
在这个环境中按照一定的规 则进行布局。
简单来说,BFC就是一块独立渲染区域,内部元素的渲染不会影响边界以外的元素。BFC有自己的规则和触发条件
bfc元素特性:
- 外边距折叠只会发生在同一
bfc
的块级元素之间 - bfc是页面中一个隔离的独立容器,容器里面的子元素不会影响外面,反之亦然
- 浮动不会叠加到BFC上
- 计算BFC的高度时,浮动包括在内
形成BFC:
-
浮动(
float
不是none
) -
定位(
position
为absolute
或fixed
) -
display
:inline-block
、flex
、inline-flex
、grid
、inline-grid
、flow-root
(除了触发BFC外无任何影响) -
overflow
的值不为visible
的块元素
应用场景:
- 清除浮动遮挡
- 解决高度塌陷(浮动元素脱离文档流)
- margin重叠
长度单位
- 绝对长度单位:px、
- 相对长度单位:rem、vw、vh、em、%
rem:对于根元素(html)font-size计算值的倍数
html{ font-size:14px; 那么 14px=1rem 28px=2rem 即:n px=n/14 rem } // html不设置font-size,则默认根字号为16px h3{ font-size=2rem; // 转换为px 即是 2*14=28px }
em:相对于当前对象内文本的字体尺寸(若当前对象行内文本未设置,则相对浏览器默认字体尺寸);em继承父级元素大小
body{ font-size:14px; // 设置body默认字体是14px 那么 14px=1em 28px=2em 即:n px=n/14 em } h3{ font-size:3em; // 转换为px 即是 3*14=42px } // 如果当前对象行内文本的字体尺寸设置为12px,则如下: h2{ font-size:12px; h3{ font-size:3em; // 转换为px 即是 3*12=36px } }
CSS3
- 布局:
calc()
、flex布局
、grid布局
- 媒体查询
- 边框:
border-radius
、box-shadow
、border-image
- 背景:
background-clip
、background-origin
、background-size
、background-break
- 文字:
word-wrap
、text-overflow
、text-shadow
、text-decoration
- 颜色:rgba
- 动画:
transition
、transform
、animation
- 渐变:
linear-gradient
、radial-gradient