CSS

CSS进阶套路笔记4 - 动态REM

1. 什么是 REM 浏览器默认字体大小为16px REM就是 root em即基于根(html)元素字体大小的em单位 rem和em的区别?没什么关系 1em = 本身元素的font-size(可以这样理解,不过不准确) 1rem = 根元素的font-size的大小 2. 动态 REM 方案 由于手机屏幕众多导致的尺寸不同的问题,我们需要一种自适应方案。 自适应方案可以用百分比布局 缺点:高度不能和宽度配合。 rem方案是以屏幕宽为基准的方案,通过js动态获取屏幕的宽度,从而和rem产生联系。 var pageWidth = window.innnerWidth

  • EvanBell
    EvanBell
2 min read
CSS

CSS进阶套路笔记3 - BFC、IFC

BFC 块级格式化上下文 1. BFC概念描述 1.1 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文 在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并 在一个块格式化上下文中,每个盒的left外边(left outer edge)挨着包含块的left边(对于从右向左的格式化,right边挨着)

  • EvanBell
    EvanBell
4 min read
CSS

CSS进阶套路笔记2 - Flex布局、Float布局、Grid布局

一、Flex布局 1. flex之前的布局方式 Nоrmаl flоw (正常流,也叫文档流) float + clear position relative + absolute display inline-block 负 margin 2. flex布局简单概括 块级布局侧重垂直方向、行内布局侧重水平方向,flex 布局是与方向无关的 flex布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活) flex适用于简单的线性布局,更复杂的布局要交给grid布局(还没发布) 3. flex

  • EvanBell
    EvanBell
3 min read
CSS

CSS进阶套路笔记1 - 宽高、堆叠上下文、ICON

第一节 宽度与高度 1. 文档流(Normal Flow) 内联元素的宽高 块级元素内如果只有内联元素 ,则块级元素的高度就是内联元素的行高 不同字体的内置行高不同,如Pinfang SC的行高为1.4,Tahoma的为1.2 块级元素的宽高 水平居中 垂直居中 文字溢出省略(多行) 2. 盒模型 1.一比一的 div 2.outline 3.border 调试大法 // 1-1 内联元素文字两端对齐 span

  • EvanBell
    EvanBell
6 min read
HTML

JavaScript面试必考系列之DOM篇

前言:尽管现在有很多优秀的框架,大大简化了我们的DOM操作,但是我们仍然要学好DOM知识来写原生JS,从根本上去理解,才更能在解决问题时举重若轻。 1.什么是DOM D(document)O(object)M(model) 文档对象模型。 DOM(文档对象模型)是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义一种方式可以使从程序中对该结构进行访问,从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。 上述说法是MDN的解释,太官方,我们来换种说法来解释。 DOM就是一种想象的树形结构,它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(

  • EvanBell
    EvanBell
15 min read
CSS

CSS常见布局套路整理

以下是最近整理的一些常见的布局套路 1. 左右布局 左右布局是除了流体上下布局以外最常见的布局,一般可以使用较为简单和兼容性很好的float布局来实现,但是要注意的是,浮动元素的父级元素一定要清除浮动带来的影响: .clearfix::after { content: ''; display: block; clear: both; } .left { float: left; } .right { float: left; } 2. 左中右布局 比较常见的左中右布局也可以使用float来实现: .clearfix::after { content: ''; display: block; clear: both; } .left

  • EvanBell
    EvanBell
4 min read