一、开始之前想说的本文是我对Flex和Grid布局理解的全面总结，所以文章有点长，希望有耐心看下去，我相信你会有所收获。还有是最好有Flex布局和Grid布局属性的了解，不然看起来可能有点吃力。这里可以看下我的博文 《BFC和flex布局探讨和演示...

一、Grid布局的初认识以前开发PC端页面最常用的框架就Bootstrap，它最经典就是网络布局，后来学习小程序开发才接触Flex布局，目前APP和小程序端，尤其是原生APP还是支持Flex全面点，但不可否认Grid布局是未来的趋势，用老师的话就是G...

一、Flex项目属性Flex属性分为容器属性和项目属性两大类，容器属性探讨见https://www.php.cn/blog/detail/24616.html， 1、项目属性一:flex(项目最重要的属性) 只能用在项目中, 不能用在容器中语法格式...

一、页面元素居中的基础认识相信页面元素居中是大家常用的需要，那么你有研究过怎么居中吗，首先我们要知道页面页面居中几个基础概念。 容器: 其实它是Html中元素，不过只有块级元素和行内块元素才可当容器。元素: 就是要居中的对象，可以是行内元素、行内...

一、关于伪类伪类英文是pseudo-class。通常选择器不能表现HTML元素的状态或特征，我们可以在CSS选择器上添加伪类表示元素的状态、特征 。伪类名写在选择器的:冒号后面，必要时可以添加(),例如：#comments:not(:target)。...

一、学习的新知识今天朱老师讲了浮动float、由float的清除浮动引出了BFC，最后讲了flex布局基础知识，其中BFC对于我来说是新知识。 BFC块格式化上下文(Block Formatting Context) MDN或其它文章均有晦涩难懂...

一、盒模型中百分比和auto盒模型中属性值可以是数值、关键字、函数、百分比和auto等，本文重点探讨下常用的、非常相似的、都需要浏览器计算的的百分比和auto 。二者最大区别据某博文中总结是：auto与子元素有关，100%与父元素有关。 总体来说是正...

一、学习的新知识今天主要学习了盒模型的box-sizing对宽度影响，以及列间隙和用表格模式实现等高列。可以说又认识了几个新知识点： calc() 此CSS函数允许在声明CSS属性值时执行一些计算，可用运算符是+、-、*、/。要注意是操作符前后要...

一、问题的由来在实际开发中为了美观，可以采用背景使用图片，文字居中排版。这个对于固定尺寸的没问题，但现在是多端，需要自适应，我们无法提前预知尺寸，只能限制在布局中，这个问题我开始使用定位来解决，发现并不完美，尤其是在多端切换时不能达到要求。如下图中左...

一、学习的新知识现在多端需要响应式设计，页面能适应手机、平板、电脑和大屏设备进行自适应。在我的作业https://www.php.cn/blog/detail/24434.html已经详细分析了em和rem联系与区别，在作业https://www.p...

一、盒模型属性探讨盒模型 对于盒模型应该是耳熟能详了，但是通过朱老师讲课，更能体会到盒模型更深入的知识，我在老师基础上结合我平时的疑问进行了测试，得到相对比较全面的总结。 盒模型组成:外边距margin 、边框border、内边距padding和内...

一、学习的新知识这节课知识在我作业https://www.php.cn/blog/detail/24407.html基本都已经讲过了，本文在基础上更详细分析了层叠规则和源码顺序的影响，算是对那个作业的补充和完善。 二、样式来源首先更正上次作业中样式来...

一、学习的新知识今天主要学习了CSS选择器中结构伪类，老师讲得非常仔细，以前我主要用:hover、:active等比较多，也只停留伪类就是那些的误区，今天认识了结构伪类，发现真是好用，尤其是在选择元素时。后来又学习了群共享的css教程，发现更多的伪类...

一、学到的新认识本意味CSS属性值简写和相对单位已经很熟悉了，结果老师讲课后，我又接触了几个陌生的概念 1. outline 翻译是”轮廓”。也许你奇怪不就是一个属性而已嘛，但我在做前端布局调整时最难的就是定位元素边界，只有知道边界才能知道布局问题出...

一、CSS 学习的几点新认识昨晚老师开始讲 CSS 入门了，虽然是入门，但是打牢基础才能更好理解 CSS，从而应用 CSS，我从中学到的几点新认识: chrome 的开发者工具查看 CSS 技巧。 以前我也会用 chrome 开发者工具查看样式，...