圣杯布局的三种实现 圣杯布局是一种很常见的css布局。他要求: 上部和下部各自占领屏幕所有宽度。 上下部之间的部分是一个三栏布局。 三栏布局两侧宽度不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 本文会用三种方法来实现圣杯布局,分别是浮动,flexbox以及css gri ...
分类:
其他好文 时间:
2020-06-05 19:24:09
阅读次数:
91
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件。直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省了一下并不是我不熟,只是我开始瞧不上网页制作这种工作了,问我css问题时,我感觉就像是再问一个老粉刷 ...
分类:
Web程序 时间:
2020-06-04 21:55:27
阅读次数:
82
1、左右布局 这就要说到一个属性float,使用float: left;就可以让浮动元素 会脱离正常的文档布局流,并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容,此时会围绕着浮动元素,填满其右侧的空间。但是,子类使用float来使元素并排,那么父类就需要使用clearfix来防止子元素 ...
分类:
Web程序 时间:
2020-06-02 18:34:45
阅读次数:
72
一转眼已经2018年,前端行业也风风雨雨的走过了10多年,网页布局也从最原始的文档变成成了当前精彩纷呈的交互。当我看到第四代css布局技术网格布局的时候,就像我看到无数女子一样的的反应,这个妞儿好像在哪见过,我们是不是发生过点啥或者该发生点啥? 知道过去能更好的指导我们未来的技术学习,毕竟太阳底下没 ...
分类:
Web程序 时间:
2020-06-01 21:10:17
阅读次数:
77
标准文档流 标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。前面的内容发生了变化,后面的内容位置也会随着发生变化。 HTML就是一种标准文档流文件。 微观现象 1. 空白折叠现象 2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果 3. 自动换行, ...
分类:
Web程序 时间:
2020-05-30 10:34:39
阅读次数:
94
BFC的定义 BFC到底是个啥呢?先贴出一段大佬们在分析BFC的时候字面上的理解: 在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素,有不同的处理规则,这个元 ...
分类:
其他好文 时间:
2020-05-28 00:48:54
阅读次数:
86
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit ...
分类:
Web程序 时间:
2020-05-11 11:39:20
阅读次数:
308
1、常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryblog.site/common... 2、几种 JavaScript 动画库推荐JavaScript 库对设计师和开发人员来说,都是非常有用的 ...
分类:
编程语言 时间:
2020-05-11 01:12:20
阅读次数:
80
介绍 狭义的来讲,前端指的就是我们常说的html, css, javascript. 三者必不可缺. 而其中涵盖的知识点不可一篇文章就能完整的讲述出来的。广义的定位,涉及到浏览器,手机App里面的用户交互展示的内容,都属于前端。 知识点 HTML CSS 布局(流式布局, 栅格布局,弹性布局) CS ...
分类:
其他好文 时间:
2020-05-09 20:57:49
阅读次数:
67
把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合,实现出设计效果。 1. 字体:div{font family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显 ...
分类:
Web程序 时间:
2020-04-27 19:25:05
阅读次数:
59