CSS
文章平均质量分 89
葡萄糖o_o
一个热爱前端技术的群众。
展开
-
网格布局之网格元素放置算法
接下来的表格项放置算法将网格项的自动位置解析为确定位置,确保每个网格项具有布局明确的网格区域。(Grid spans 不需要特别的解析;如果它没有明确指定,默认是1)注意:这个算法可以在显式网格中没有地方自动放置网格项的时候,导致在隐式网格中创建新的行或者列,每个网格单元(无论是显式还是隐式网格)都可以被occupied 或者 unoccupied。一个被网格项的网格区域(grid area)覆盖的单元是occupied的;否则这个单元是unoccupied。在算法执行期间单元的occupied/u原创 2021-04-27 12:52:19 · 599 阅读 · 0 评论 -
关于页面布局间距使用的经验之谈
在页面布局的时候遇到一个问题在此记录。有如下布局需求。页面上大多数都是这样的,一块一块从上到下排列。块与块之间的间距需要固定由谁来负责。例如第一个块和第二个块之间的间距,就需要第二个块的margin-top完成,文字和第二个块之间的间距由文字的margin-top来完成。这样做的好处是,如果这些块少了一个也不会破坏页面布局。如果,不固定,这个间距一会由上面的margin-bottom,一会由...原创 2019-11-30 23:02:24 · 631 阅读 · 0 评论 -
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多。但是在实际的开发中垂直居中的需求常常出现,例如一行中有左右两部分,左边是图片,右边是文字,这时需要左右两部分按照垂直居中对齐(新闻列表的样式)等等。注:style>html,body{ height: 100%;}原创 2017-11-12 18:18:16 · 509 阅读 · 0 评论 -
块级格式化上下文(Block Formatting Context)
CSS块级格式化上下文是块级盒子的一种能力,这种能力并不是直接通过css属性声明而获得的,而是添加css的一部分相关属性之后自动获得的能力,也就是说没有一个明确的属性就是生成块级格式化上下文的。块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境,盒子内部的布局不会影响到盒子外部,同样盒子外部也不会影响到盒子内部。那么,没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...原创 2018-02-05 12:18:45 · 1161 阅读 · 0 评论 -
常见的CSS布局
各种常见的CSS布局在工作中会经常用到很多的布局方式,这里总结一下所遇到的布局,会持续更新。悬挂布局实现这种布局的方式有很多,这边主要挑两个,如下:方式一:使用浮动和块级格式化上下文特性这种方式好处是左右两部分都会自适应。<style type="text/css">*{ margin: 0; padding: 0;}.title{...原创 2018-06-17 14:57:22 · 230 阅读 · 0 评论 -
不同设备屏幕尺寸和DPR适配
为什么需要适配很久以前的手机的DPR都是1,这时候不需要做DPR适配,直接按照设计稿将页面画出来即可。但是自从技术的发展屏幕的升级出现了DPR为2为3甚至更高并且屏幕的尺寸也变得很多样化,这个时候如果不做适配会出一些问题,如图片模糊,不能实现真正的1px边框,同一个布局在不同尺寸下的表现不一致,如在375屏幕下是100px在414的屏幕下还是100px,这就有问题了,应该等比放大才对。所以...原创 2018-08-09 14:28:51 · 8001 阅读 · 0 评论 -
行内格式化
除了块级格式化还有行内格式化,相对会计格式化行内格式化要更加难以掌握。行内元素的位置和一行的基线有着密不可分的关系。构建一行十分复杂,概念包括em框,内容区,行内框,行间距,行框等。原创 2018-11-05 19:04:09 · 337 阅读 · 0 评论 -
nth-child(n)和nth-of-type(n)
:nth-child(n):父元素的子元素的第n个:nth-of-type(n):父元素的 某类 子元素的第n个注:n从0起,元素index从1起nth-child(n)和nth-of-type(n)例:<head> <style> body :nth-child(2) { height: 30px; background: blu...原创 2019-04-26 10:27:45 · 285 阅读 · 0 评论 -
CSS中的三种样式来源:创作人员、读者和用户代理
查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.htmlCSS中的样式一共有三种来源:创作人员、读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正。首先,创作人员(author’s+style)样式应该是我们最熟悉的,如果你...转载 2019-07-30 21:41:30 · 638 阅读 · 0 评论