前端ABC加深一下对css盒模型的理解
xiaoqi 发布于 2017-06-18
开头先提问一个问题，一个设置了width为100px的div，它的宽度就一定是100px吗？？这100px是什么宽呢？？ 这就要提到一个属性：box-sizing：有3个值供选择 content-box|border-box|inherit; content-box：宽度和高度分...
标签：css
多行文本框定位光标像素位置
xiaoqi 发布于 2017-06-13
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="renderer" content="webkit"> &l...
伪元素几种用法
xiaoqi 发布于 2017-06-08
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪元素</title> </head> <body...
HTML中不可编辑的属性及样式
1xiaoqi 发布于 2017-06-08
今天有个需求：用JQ插件作三级联动并实现模糊查询，然后页面初始载入时，各联动为不可编辑状态，除非点击‘编辑’按钮时才可编辑。一般来说，元素是否可以编辑可以通过以下方式来实现： 一、给表单元素添加：readonly属性 这种方式常用于类型为text的input元素，如：<in...
web开发中的长度单位（px,em,ex,rem），如何运用
xiaoqi 发布于 2017-06-08
作为一名前端开发人员，css中的长度单位，都是我们在工作中非常熟悉的名词，因为没有它们，我们就不能声明某个字符应该多大，或者某些图像周围应该留白多少，甚至有时候能导致css不能进行正常工作，所以在很多css属性中，它们都是依赖于长度单位来显示各种页面元素。 1、长度单位包括哪些？...
动态加载css方法实现和深入解析
xiaoqi 发布于 2017-06-08
一、方法引用来源和应用 此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。 因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。 二、优化后的完整代码 /* * @function ...
css loading动画
xiaoqi 发布于 2017-06-06
<!DOCTYPE html> <html> <head> <title>加载中</title> <meta charset="UTF-8"> </head> <body> <s...
如何让 height:100%; 起作用
xiaoqi 发布于 2017-06-04
浏览器是如何计算高度和宽度的? Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。 但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者...
使用图标字体的正确姿势
xiaoqi 发布于 2017-05-25
1 首先在css中引入字体（定义字体名和字体链接） @font-face { font-family: 'icon-font';//定义字体名 src: url('./icomoon.ttf');//指定字体链接 } 2 然后在需要使用图标字体的标签上（一般用span）定义css...
css实现的下拉三角形
xiaoqi 发布于 2017-05-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...