![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端 -- CSS
文章平均质量分 92
前端 CSS学习记录
wincheshe
秋天,黄叶坠地,凉风有信。
展开
-
「面试高频」三栏布局,实现一个两边固定宽度,中间自适应并且先渲染的布局?(圣杯+双飞翼)
文章目录三栏布局的实现1、浮动 + margin2、浮动 + BFC3、flex4、table5、定位两边固宽度,中间自适应并且先渲染6、圣杯布局7、双飞翼布局圣杯布局与双飞翼的区别三栏布局的实现三栏布局:两侧宽度固定,中间宽度自适应的1、浮动 + margin<style> .container,.left,.right,.center{ height: 200px; } .left{ float: left; w原创 2022-04-06 16:33:49 · 1557 阅读 · 2 评论 -
「面试高频」能用 CSS 实现一个两栏布局吗?(定宽,与不定宽的实现)
文章目录一、左栏固定宽度,右栏自适应1、浮动 + margin2、浮动 + BFC3、定位4、flex布局5、浮动 + 负外边距(双飞翼两栏版)6、table布局二、左栏不定宽,右栏自适应1、浮动 + BFC2、flex一、左栏固定宽度,右栏自适应1、浮动 + margin通过元素浮动,然后给定固定宽度,左元素margin该固定宽度,实现两栏布局<body> <div class="container"> <div class="left"></原创 2022-04-05 15:59:57 · 615 阅读 · 0 评论 -
BFC是什么?10 分钟讲透 BFC 原理
BFC是什么1. 引言在前端的布局手段中,一直有这么一个知识点,很多前端开发者都知道有它的存在,但是很多人也仅仅是知道它的存在而已,对它的作用也只是将将说得出来,可是却没办法说得非常的清晰。这个知识点,就是BFC。想要了解BFC的规则,前提必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。你只有熟练掌握了这些布局手段之后,才能很好的理解BFC。今天这篇文章,来大家解析一下BFC,希望对各位新老朋友有所原创 2022-03-30 17:55:31 · 343 阅读 · 0 评论 -
使用 CSS 实现垂直居中的8种方法
CSS垂直居中的8种方法目录CSS垂直居中的8种方法1、通过verticle-align:middle实现CSS垂直居中。2、通过display:flex实现CSS垂直居中。3、通过伪元素:before实现CSS垂直居中。4、通过display:table-cell实现CSS垂直居中。5、通过隐藏节点实现CSS垂直居中。6、已知父元素高度通过transform实现CSS垂直居中。7、到垂直居中的位置。8、通过line-height实现...原创 2022-03-25 16:53:37 · 102138 阅读 · 3 评论 -
JS、CSS --- 获取元素样式的方法,获取元素的坐标,windows坐标
JS --- 获取元素样式的方法,获取可见样式,并且获取鼠标滚动的高度,可视高度,用scrollHeight(鼠标滚动条的高度) - scrollTop(鼠标滚动距离的高度) == clientHeight(当前视口高度)表示鼠标已经滚动到底了来实现一个小案例原创 2022-02-20 21:31:33 · 1497 阅读 · 0 评论 -
CSS3弹性布局 -- flex 布局 弹性盒子
flex (弹性盒、伸缩盒)css中可以代替浮动的一种页面布局。元素可以随着**屏幕宽度变化**,**页面也会跟着变化**,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行,这样就实现了移动端适配。原创 2022-02-20 20:54:44 · 821 阅读 · 0 评论 -
CSS -- 移动端适配技术学习
CSS中常用的计量单位,em,rem,px的区别,vwvh,vmin,vmax 的使用,移动端适配中使用到的技术,媒体查询CSS和JS的实现方法,Flex弹性布局,flexibleJS的介绍,rem + viewPort 缩放的技术原创 2022-02-20 20:46:22 · 1542 阅读 · 1 评论 -
一直在说css3,你真的会用css3吗?一文带你快速上手
css3 快速入门及常用样式使用原创 2022-02-16 21:56:59 · 310 阅读 · 0 评论