![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
【必知必会-经典CSS布局系列】
文章平均质量分 63
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
☀️详解Flex布局,从理论到案例实践(二)
前言 上一篇说到了容器属性,本文就接着来讲项目属性。上一篇传送门 如何理解容器属性和项目属性?容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li。ul这个容器里面放了很多li项目。我是这么来理解的。 好了,言归正传,xdm准备好了么? 项目属性 order 取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。 flex-grow 取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。 假..原创 2021-08-07 14:55:56 · 402 阅读 · 27 评论 -
☀️详解Flex布局,从理论到案例实践(一)
前言 最开始接触flex布局,就是在接触居中布局时,看见 justify-content:center与align-items:center。 完全看不懂。于是就去学flex。我想除了我之外的大部分人,也都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。这里我就想做一个系列来好好的讲一讲flex布局。 Flex布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。..原创 2021-08-05 17:45:37 · 357 阅读 · 35 评论 -
【必知必会-经典CSS布局系列】=> CSS如何实现品字布局?
第一种 预期效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: 0; padding: 0; } body { overflow: hidden; } div { margin: a原创 2021-04-12 18:31:59 · 500 阅读 · 0 评论 -
【必知必会-经典CSS布局系列】=> 行内块会产生什么问题?如何解决?
问题复现 问题: 之前在说浮动布局时提到了,两个display:inline-block元素放到一起会产生一段空白。这一篇就来详细说说 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-04-12 17:59:56 · 343 阅读 · 0 评论 -
【必知必会-经典CSS布局系列】=>浮动布局的优缺点?清除浮动有哪些方式?
浮动布局简介:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流,所以文档的普通流中的框就变现的好像浮动元素不存在一样。 优点 这样做的优点就是 在图文混排的时候可以很好的使文字环绕在图片周围。 另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等, 但它与inline-block还是有一些区别的 第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的; 还有一个就是inli.原创 2021-04-12 17:39:20 · 322 阅读 · 0 评论 -
【必知必会-经典CSS布局系列】=> 让一个元素水平垂直居中,到底有多少种方案?
一、让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于行内元素: text-align: center; 块级元素 对于确定宽度的块级元素: width和margin实现。margin: 0 auto; 绝对定位和margin-left: -width/2, 前提是父元素position: relative 对于宽度未知的块级元素 table标签配合margin左右auto实现水平居中.使用table标签(或直接将块级元素设值为display:table),再通过给原创 2021-04-12 17:26:47 · 275 阅读 · 0 评论