【必知必会-经典CSS布局系列】
文章平均质量分 63
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
☀️详解Flex布局,从理论到案例实践(二)
前言上一篇说到了容器属性,本文就接着来讲项目属性。上一篇传送门如何理解容器属性和项目属性?容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li。ul这个容器里面放了很多li项目。我是这么来理解的。好了,言归正传,xdm准备好了么?项目属性order取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。flex-grow取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。假..原创 2021-08-07 14:55:56 · 433 阅读 · 27 评论 -
☀️详解Flex布局,从理论到案例实践(一)
前言最开始接触flex布局,就是在接触居中布局时,看见 justify-content:center与align-items:center。完全看不懂。于是就去学flex。我想除了我之外的大部分人,也都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。这里我就想做一个系列来好好的讲一讲flex布局。Flex布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。..原创 2021-08-05 17:45:37 · 404 阅读 · 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 · 531 阅读 · 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 · 367 阅读 · 0 评论 -
【必知必会-经典CSS布局系列】=>浮动布局的优缺点?清除浮动有哪些方式?
浮动布局简介:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流,所以文档的普通流中的框就变现的好像浮动元素不存在一样。优点这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-block还是有一些区别的第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的;还有一个就是inli.原创 2021-04-12 17:39:20 · 330 阅读 · 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 · 297 阅读 · 0 评论