首页 前端知识 私藏前端八股收集【CSS篇】

私藏前端八股收集【CSS篇】

2024-05-13 11:05:31 前端知识 前端哥 596 279 我要收藏

1、盒模型

(1)CSS盒模型本质是一个盒子,包含 padding、border、margin、content。

(2)盒模型分为标准盒模型(box-sizing:content-box)和怪异盒模型(box-sizing:border-box)。

(3)标准盒模型在设置width和height时设置的是content的大小,真正盒子的大小还要加上padding和border; 怪异盒模型设置width和height时设置的是盒子的大小,包含padding和border,会压缩content区域。

2、浮动

作用:

①让多个块级盒子(div)水平排列成一行。

②实现文字环绕图片。

特点:脱离文档流,容易造成盒子塌陷,影响其他元素的排列。

解决:

①父元素中添加overflow:hidden;

②给父元素添加高度;

③建立空白div,添加clear;

④在父级添加伪元素::after{ content : ' ', clear : both , display : table}。

3、样式优先级

(1)!important 永远最高

(2)style行内样式(内联式)>嵌入式(<style>)和外联式(link)

(3)选择器:ID 选择器(#id)> class类选择器 = 属性选择器(a[href="segmentfault.com"]{}) = 伪类选择器(:hover{}) > 标签选择器(span{}) = 伪元素选择器(::before{}) = 后代选择器(.father .child{})> 子选择器(.father > .child{})= 相邻选择器( .bro1 + .bro2{})> 通配符选择器(*{})

4、CSS尺寸设置的单位

①css一共有五个长度单位,分别是px,em,rem,vw,vh;

②除了px是绝对单位,其他都是相对单位;

③em相对于自身大小(但在font-size中相对于父元素字体大小);

④rem相对于根元素的字体大小;

⑤vw相对于可视化窗口的宽(1vw就是1%可视化窗口宽度);

⑥vh相对于可视化窗口的高(1vh就是1%可视化窗口高度);

⑦一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时,通过媒体查询或者vw改变根元素的字体大小,从而改变以rem为单位的元素大小。

5、BFC

定义:BFC(Block Formatting Context)是块级格式化上下文,是Web页面一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素,反之外面的也无法影响里面的。

形成条件:

  • float属性不为none;
  • position为absolute或fixed;
  • display为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid;
  • overflow不为visible。

元素特性:

1、盒子从顶部开始垂直排列;

2、盒子垂直方向的距离由margin决定,相邻盒子margin会重叠;

3、margin-left会触碰到border-left(对于从左至右的方式,反之);

4、BFC区域不会与float盒子重叠,而是紧贴边缘浮动;

5、计算BFC高度时会检测float盒子高度。

应用场景:

1、清除浮动(比如display:flex会使内部浮动失效,通常还是使用overflow:hidden);

2、解决因外边距合并问题;

3、解决高度塌陷问题;

4、写左侧固定栏,右侧适应栏。

6、居中方案

// 兼容性ie 11以上支持
.father {
    display: flex/grid;
    justify-content: center;
    align-items: center;
}
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
// 兼容性较好
.father{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son{
    display: inline-block; 
}
// 兼容性好
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

6、flex:1

缩写:

  • flex-grow(设置了对应元素的增长系数);
  • flex-shrink(指定了对应元素的收缩规则,只有在所有元素的默认宽度之和大于容器宽度时才会触发);
  • flex-basis(指定了对应元素在主轴上的大小)。

7、隐藏元素的属性

  • display: none;
  • visibility: hidden;
  • opacity: 0;

8、三栏布局

要求:左右两边盒子宽度固定,中间盒子宽度自适应,盒子的高度都是随内容撑高的,一般都是中间盒子内容较多,为了保证页面渲染快,在写结构的时候,需要把中间盒子放在左右盒子的前面。

// 圣杯布局
// 缺点:当middle部分的宽小于left部分时就会发生布局混乱
<div class="parent">  
    <div class="box middle"></div>  
    <div class="box left"></div>  
    <div class="box right"></div>  
</div>

<style>
.parent {  
    padding: 0 20px; /* 设置父级元素的左右内边距 */  
    overflow: auto; /* 清除浮动,使得父级元素的高度被撑开 */  
}  
  
.box {  
    float: left; /* 所有盒子浮动 */  
    height: 100px; /* 假设每个盒子的高度都是100px */  
}  
  
.middle {  
    width: 100%; /* 中间盒子宽度100% */  
    background-color: #ddd; /* 只是为了区分,给中间盒子一个背景色 */  
}  
  
.left {  
    width: 150px; /* 左边盒子固定宽度 */  
    margin-left: -100%; /* 左边距-100%,使其覆盖中间盒子 */  
    position: relative; /* 相对定位 */  
    left: -20px; /* 向右平移自身宽度外的父级padding */  
    background-color: #faa; /* 只是为了区分,给左边盒子一个背景色 */  
}  
  
.right {  
    width: 150px; /* 右边盒子固定宽度 */  
    margin-right: -150px; /* 右边距-自身宽度,使其与中间盒子并排 */  
    background-color: #afa; /* 只是为了区分,给右边盒子一个背景色 */  
}
</style>
// 双飞翼布局
// 优点:不会像圣杯布局那样变形,CSS样式代码更简洁
// 缺点:多加了一层dom节点
<div class="parent">  
    <div class="box left"></div>  
    <div class="box middle">  
        <div class="inner-box"></div>  
    </div>  
    <div class="box right"></div>  
</div>
<style>
.parent {  
    padding: 0 20px; /* 设置父级元素的左右内边距 */  
    overflow: hidden; /* 清除浮动,使得父级元素的高度被撑开 */  
}  
  
.box {  
    float: left; /* 所有盒子浮动 */  
}  
  
.middle {  
    width: 100%; /* 中间盒子宽度100% */  
}  
  
.inner-box {  
    margin: 10px; /* 设置内部盒子的外边距 */  
    background-color: #ddd; /* 为了区分,给内部盒子一个背景色 */  
    /* 根据需要设置宽高 */  
}  
  
.left {  
    width: 150px; /* 左边盒子固定宽度 */  
    margin-left: -100%; /* 左边距-100%,使其覆盖中间盒子 */  
    background-color: #faa; /* 为了区分,给左边盒子一个背景色 */  
}  
  
.right {  
    width: 150px; /* 右边盒子固定宽度 */  
    margin-right: -150px; /* 右边距-自身宽度,使其与中间盒子并排 */  
    background-color: #afa; /* 为了区分,给右边盒子一个背景色 */  
}
</style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8560.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!