愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

搜索分类CSS下的文章

Grid布局学习总结

Grid布局是CSS中除了flex布局外的另一强大的布局系统,相比flex,Grid布局更适合二维布局 一、基本概念 1、网格容器:声明display: grid的元素,所有网格项的直接父级元素 2、网格项:网格容器的直接子元素

PostCSS学习总结

一、什么是PostCSS 根据官方介绍,PostCSS是这么一个东西: PostCSS是一个用JS插件转换样式的工具,这些插件可以检查CSS代码、支持变量和mixin,转换未来的CSS语法、内联图片等等 而简而言之,PostCSS其实就是CSS界的babel,PostCSS自身做的事情就两件: 1)把...

CSS优先级原理分析

使用CSS进行页面开发的时候,经常会遇到有多个规则冲突的情况。这种情况下,理解CSS怎么处理这种冲突,就很有好处 一、特殊性 CSS会对每个规则指定一个特殊性值,其表示为:0, 0, 0, 0四个部分,一个选择器的特殊性值定义如下: 1)对每个ID选择器,加0,1,0,0

CSS常用布局总结

一、单列布局 1、水平居中 1)使用text-align: center和display: inline-block <div class="parent"> <div class="child&...

多行文本溢出解决方案

一、问题场景 在业务开发中,经常会遇到需要控制超长文本的问题。而处理这个问题一般的做法是对其进行截断:传统情况下,我们可以限制字符最多可以有几个字符,然后超出这个阈值后substr并加上省略号。但是这种方案是有局限性的。如果我们的文本显示区域是随着窗口大小变化的,那么固定字符长度的截断方案仍然不美观,所以我们通常使用CSS来进行控制。如:

Sass学习总结

一、什么是Sass Sass(Syntactically Awesome StyleSheets),是一个针对CSS扩展的工具。旨在解决大型项目中CSS难以维护的问题。Sass中引入了变量、嵌套规则、mixins、导入等众多功能,且完全兼容CSS语法。使得构建大型样式表体验很好 ...

理解BFC(块级格式化上下文)

BFC是Block Formatting Context的缩写,全称为块级格式化上下文。BFC也是一个盒子(只不过看不见) 一、如何形成BFC 满足以下条件之一,便可形成BFC: float属性不为none postion属性不为static

理解reflow和repaint

一、浏览器的绘制过程 浏览器首先将获取得到的HTML文档解析为DOM树,HTML中的每一个标签都是DOM树中的一个节点。DOM树里包含了所有的HTML标签(包括display: none隐藏...

CSS定位方式

CSS中,定位的方式有: static 默认 relative absolute fixed inherit 继承 position 定位方式使用position来指定,其中,这几种posi...

CSS/CSS3选择器使用总结

一、元素选择器 元素选择器是用来直接选中标签,并对其格式进行定义的选择器,语法格式: tagName { } 如:a { }、div { } 二、属性选择器 属性选择器是用来选中具有特...

CSS3媒体查询(Media Query)使用详解

媒体查询(Media Query)是用来针对不同类型、不同参数细节媒体设备定义样式的功能 一、语法格式 @media not|only 设备类型 [ and 设备特性 ]* 二、设备类型的取值 all 所有的设备类型 aural ...

flex弹性布局学习总结

flex(flexible box)布局是迄今为止最灵活的盒模型,它可以灵活方便地实现各种各样的布局 一、基础知识 1、flex布局分为块元素flex布局和行元素flex布局,可以使用display: flex来实现块级flex布局,使用...

CSS3盒模型计算方式

CSS3中增加了box-sizing的盒模型控制方式,使得我们可以更容易地控制盒模型 以下示例基于: <style type="text/css"> .demoBox { width: 100px; ...

CSS3学习总结——盒模型与布局

一、布局相关属性 1、float: 设置对象浮动后,该对象会被当做块组件处理(相当于display: block,即使display设为其他属性值,display的属性值也依然是block)。浮动HTML组件会漂浮紧紧跟随它的前一个组件,直到遇到边框、padding、margin或另一个块组件为止,属性值: ...