前端-css篇

概念构建

CSS

盒模型

标准盒子模型

ie盒子模型

margin重叠问题

官方解释：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。（块元素的 上下外边距 ，只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题）

同一层相邻两元素之间（一上一下、块级元素）

发生边界重叠，只会挑选最大边界范围留下，所以两者之间的边距为100px
如果需要解决这个边界重叠问题，则需在后一个元素加上float
没有内容将父元素和后代元素分开（子元素外边距被赋给了父元素）
- 解决方案
  1. 给父元素加overflow：hidden；
    
    这种方法解决了外边距重叠问题，但是这个方法只适用于子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top < parentHeight)，不然子元素部分内容就会被隐藏掉
  2. 给父元素加边框 border
    
    父子元素是外边框重叠到一起去了，那么我们给父元素加个边框，他们的外边距就有了边框的间距，但是这样也就多出来没有必要的边框
  3. 给父级或者子级设置display:inline-block;
    
    只有块元素会产生外边距重叠，那么我们就让它不是块元素，把它设置为行内块元素
  4. 给父级或者子级设置float
  5. 给父级或者子级设置position: absolute;
  6. 给父元素添加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

posted @ 2023-02-18 22:08 古月明阅读(37) 评论(0) 收藏举报

刷新页面返回顶部