CSS
文章平均质量分 93
藤椒金汤力
这个作者很懒,什么都没留下…
展开
-
CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。目前为止Grid布局是CSS中最为强大的布局方案。一、基...原创 2019-08-24 16:06:08 · 897 阅读 · 0 评论 -
DOM下元素 offset client scroll 相关属性简介
思维导图:一 offset 系列1.1 定位元素定位元素(positioned element)是指该元素计算后位置(position)属性为 relative, absolute,fixed 或 sticky 的一个元素。同时定位属性又细分为以下几种:相对定位元素(relatively positioned element): 指该元素计算后位置(position)属性为rela...转载 2019-08-11 21:45:10 · 196 阅读 · 0 评论 -
深入CSS盒模型
一、外在盒子和内在盒子在张鑫旭老师的《CSS世界》中提出每个元素都有两个盒子(注意此处的盒子并不是CSS盒模型,而是对元素结构与内容相关的一种形象说法):外在盒子和内在盒子(专业名称是“容器盒子”)。外在盒子是决定元素排列方式的盒子,即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。例如 display: inl...原创 2019-08-10 17:15:39 · 312 阅读 · 0 评论 -
常见元素水平居中的实现及分析
一、水平居中对于内联元素:1、text-align: centertext-align属性规定了元素中文本的水平对齐方式,通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式,因此也可以用来实现内联元素的水平居中。作用元素:文本、行内元素和行内块级元素优点:简单便捷,兼容性好,所有浏览器都支持text-align属性缺点:只能作用于行内元素或行内文本;属性会继承,会对后代元...原创 2019-08-07 13:11:53 · 195 阅读 · 0 评论 -
BFC:块状格式化上下文
一、什么是BFCBFC的全称是块状格式化上下文,MDN中对于对于BFC的定义如下:一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。个人理解BFC是一块独立渲染区域,这个区域它规定了区域内如何进行布局,并且与区域外部毫无关系,因此区域内部无论如何采用何种布局都不会对区域...原创 2019-08-13 17:14:33 · 245 阅读 · 0 评论 -
CSS中的浮动与清除浮动
在CSS中跳出标准文档流的方式有三种:浮动、绝对定位和固定定位,其中绝对定位和固定定位在我的另一篇博客CSS中的定位中有了比较详细的介绍,这篇博客希望能跟大家一起讨论CSS中的浮动。浮动属性最早提出是在CSS1中,其最初的主要目的就是为了允许其他内容(如文本)“围绕”图像,因此浮动属性也只允许作用于图像(有些浏览器还支持表格),后来随着不断发展,浮动属性也允许作用于任何元素,但是文本环绕这一页面...原创 2019-07-28 14:35:37 · 537 阅读 · 0 评论 -
CSS Flex 弹性盒布局详解
弹性盒布局又称“flex”布局,是在CSS3中的一种新布局方式,可以简洁、方便、响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的“display+float+position”的布局形式。一、弹性盒布局简介弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display ...原创 2019-08-05 17:46:28 · 1059 阅读 · 0 评论 -
CSS中的选择器整理与选择器权重
顾名思义。CSS中选择器的主要作用就是与HTML页面中的元素实现一对一,一对多或者多对一的控制,而在CSS3中又对选择器进行了扩展,极大的提高了查找元素的精度及准确性。本文希望能对CSS中的选择器进行较为深入的归纳和整理,但是由于个人能力有限,文章难免有缺漏甚至错误,希望大家能够帮忙指出,不吝赐教,谢谢大家。CSS选择器主要可以分为普通选择器和高级选择器:一、基本选择器1、通配符选择器(*)...原创 2019-08-03 16:46:43 · 824 阅读 · 0 评论 -
CSS中的流与定位
本篇博客想分享一些个人对于 CSS中的流、元素、定位等一些CSS最基本概念的理解,由于本人能力有限,难免有所误差与偏漏,希望大家能够积极指出,不吝赐教,大家一起共同进步。什么是流页面中的元素默认是如何排列呢?为何有的元素我们没有设置宽度却自动填满一行?种种这些疑问都让我们要去探索页面布局的核心:流。什么是流?在W3C的文档中将CSS的基本定位机制和布局方式称为标准流(或称标准文档流),不过张...原创 2019-09-22 22:35:03 · 161 阅读 · 0 评论