css
文章平均质量分 70
daisy_Hawen
身体和灵魂都需要奔跑 欢迎关注我的Githttps://github.com/daisyHawen
展开
-
漫谈CSS之字体大小font-size
关于css中font-size的设置原创 2016-01-22 11:10:00 · 996 阅读 · 0 评论 -
CSS实现垂直居中
方案一:line-height适用于单行文本, 居中前: <div class="vertical">居中元素</div>.vertical { height: 100px; line-height:100px; border: 1px solid red; }居中后: 说明:这种对于单行的文本很有效果转载 2017-08-24 11:17:12 · 774 阅读 · 0 评论 -
认认真真的探讨一下BFC
1、什么时候会出现BFC?浮动元素 float:left;表格元素:display:table;绝对定位元素:display:absolute/fixed行内元素:display:inline-block;overflow不为visible的值 overflow:hidden/scrollBFC的作用BFC的作用大着呢,BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会原创 2017-08-03 17:05:19 · 442 阅读 · 0 评论 -
前端性能优化(CSS动画篇)
啥是 Reflow 和 RepaintRepaintRepaint 就是「重绘」,它会在你改变 DOM 元素的视觉效果时进行,改变布局时不会触发。比如,opacity,background-color,visibility和outline等都会触发,「重绘」的开销还是比较昂贵的,因为浏览器会在某一个 DOM 元素的视觉效果改变后去 check 这个 DOM 元素内的所有节点。ReflowReflow转载 2017-07-26 10:48:15 · 537 阅读 · 0 评论 -
CSS之flexbox
一切能用css解决的问题都不要用js; 一直以来对css的关注就比较少,一篇写得很经典的flexbox的文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html总结: 在flexbox出现以前,我们的布局只能采用position+display+float属性来进行布局,下图列举了一些常见的布局: 前段时间总结了如何进行2列布局原创 2017-08-16 19:54:02 · 423 阅读 · 0 评论 -
面试积累——BFC
什么是BFCBFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。BFC有一下特性:内部的Box会在垂直方向,从顶部开始一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个B原创 2017-04-12 18:26:11 · 1624 阅读 · 1 评论 -
区分clientX、offsetX、pageX、screenX
以前一直以为写了这几个属性的区分的,今天再来看居然没有写。 不过这个还是很有用的。这里再来总结一下。所有解释都在图里面。这里再来文字解释一下,图中至标注了Y的值,X同理。clientX clientYevent.clientX event.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event原创 2017-02-22 11:30:26 · 948 阅读 · 1 评论 -
CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管。因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片的知识点做一些小小的总结吧,也算是一种回顾吧,这样自己也不会忘记。先说CSS3的动画CSS3关于动画的属性其实也不过就是这么几个,transform、transition、animation,这里简单的说原创 2016-01-25 15:51:38 · 5318 阅读 · 0 评论 -
13种常用按钮、文本框、表单等CSS样式
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。一、按钮样式.buttoncss { font-family: “tahoma”, “宋体”; /www.52css.com/ font-size:9pt; color:转载 2016-03-09 22:45:55 · 518 阅读 · 0 评论 -
谈谈我对flexbox的理解
写在开头: 关于flex,学了很久的前端了,偶尔也在用,尤其是当需要水平居中的时候,就用display:flex,感觉非常好用。但是其实对于flex的理解并不是很到位,根本都不懂flex,所以正儿八经的来研究一下flexbox。关于flexboxflex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联的流方向,而flex布局依赖于flex directions.简单的说:Fle原创 2016-03-18 15:26:55 · 1101 阅读 · 0 评论 -
css实现水平居中的方法
/*.ele { position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2); } */原创 2016-03-12 09:57:21 · 554 阅读 · 0 评论 -
CSS实现三角形效果
CSS实现三角形效果非常简单,这里为了怕自己忘记,特意写在此文中,也供大家讨论学习<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 50px;原创 2016-02-03 11:38:29 · 1182 阅读 · 0 评论 -
css实现屏幕自适应(仿谷歌静态页面)
昨天写了一篇nodejs之客户端的实现,以及http模块的讲解。然后不知道为什么没有保存下来,我好沮丧。 于是现在不想写node了,接下来这段时间,可能说得更多的是css和html相关的东西。因为要做项目了,好开心。而任务主要是做界面,好久没有碰css和html,怕生疏了。 前言 今天看谷歌的时候发现它居然做的是自适应,然而百度居然没有做 贴个百度的界面 吐槽一下: 1、没有自适应原创 2016-01-29 21:02:22 · 13072 阅读 · 0 评论 -
漫谈CSS之盒子模型
Css盒模型 css中最讨厌的莫过于盒模型了,一定要把盒模型搞明白 关于页面布局的两种属性: (1)浮动float (2)定位浮动浮动布局示例原创 2016-01-22 11:30:13 · 704 阅读 · 0 评论 -
CSS布局
CSS的定位机制:普通流、浮动和绝对定位;普通流: 所谓普通流就是正常的布局,我们在页面中写了一个又一个的盒子,如果是块级元素,就每一块占一行,这样依次排列下来;如果是行类元素,那么就是一个一个的排列,直到一行占不下了,就排第二行。 浮动: 浮动就脱离了普通流的布局方式,它会主动去找一个框的边缘,然后去靠; 绝对定位: 绝对定位也是脱离了普通流的布局,它相对于最近的一个父元素进行定位;也可以设置原创 2017-08-09 16:57:13 · 559 阅读 · 0 评论