![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面试总结-css部分
文章平均质量分 65
这个专栏创建于2023年3月4日,正在面临面试,找实习的我,总结一些知识点,为面试做准备, 希望能帮助到正在迷茫之中的我们
周万宁.FoBJ
不辜负生活中的每一份热爱
展开
-
6. 渐变
默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)使用角度 如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。语法background-image: linear-gradient(angle, color-stop1, color-stop2);原创 2023-03-05 15:30:19 · 133 阅读 · 0 评论 -
5.flex布局
1)flex-direction: row(默认值,主轴未水平方向,起点在左端) | row-reverse(主轴为水平方向,起点在右端) | colunm(主轴为垂直方向,起始点在上沿) | column-reverse(主轴方向为垂直方向,起始点在下沿)决定主轴的方向2)flex-wrap: nowrap(默认值,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方)如果一条轴线排不下,如何换行3)原创 2023-03-05 14:47:02 · 187 阅读 · 0 评论 -
4. css实现水平或垂直居中
如果子元素的宽高确定的化,translate中的值也可以设置伪子元素宽高的一半,即transform: translate(-100px,-100px)子元素:margin:auto;这种方法适合子元素宽高确定的情况,给margin-top设置百分比的大小将不生效,即margin-top%;这种方式需要父元素的宽高都是确定的,才能保证子元素在父元素中垂直水平居中。这种方式适用于父元素高度确定的情况, 有关grid布局的适用可以参考。这种方式要求父元素的高度是确定的,百分比形式的高度将不生效。原创 2023-03-04 22:29:28 · 100 阅读 · 0 评论 -
3. 清除浮动的几种方式,及其使用
使用before和after伪元素清除浮动(推荐使用): 这种方式也是使用额外标签方式达到效果,只是变相的使用了伪元素after/before,使得页面结构更简介,也是常用的清除浮动的方式。一个新的 display 属性的值,它可以创建无副作用的 BFC。给 元素设置 display: flow-root 属性后, 中的所有内容都会参与 BFC,浮动的内容不会从底部溢出。清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题。原创 2023-03-04 13:29:09 · 494 阅读 · 0 评论 -
2. 双飞翼布局
本笔记由作者在复习前端CSS部分的相关的一些总结, 如果有什么错误的地方或者有什么相关的建议欢迎联系我这份笔记借鉴了很多网上的文章, 如果有雷同或者相似的地方, 不用怀疑, 那就是搬得, 如果你是当中一些文章得作者,如果觉得这种行为不恰当, 请与我联系, 收到消息后我会尽快处理邮箱:QQ昵称: 只为你乱了浮生块级格式化上下文使页面上的一块渲染区域, 这块区域由符合条件的容器产生.容器内的子元素会由块盒子和浮动元素按如下规则排列:纵向一个挨着一个排列。原创 2023-03-04 13:22:20 · 297 阅读 · 0 评论 -
1.圣杯布局实现过程
三栏: float:left;给容器: pandding-left: 200px;圣杯布局是三栏布局: 两边高度固定, 中间栏自适应, 中间栏优先渲染。左侧挪到上一行前面: margin-left: -100%右侧往前挪: right: -150px。左右栏: 宽度+背景颜色。原创 2023-03-04 12:38:39 · 85 阅读 · 0 评论