CSS - 随笔分类 - Newbie_小白

摘要：产品模式标题标题标题标题标题标题阅读全文

posted @ 2018-01-29 13:11 Newbie_小白阅读(258) 评论(0) 推荐(0)

摘要：.friends-list-content { height: 520px; overflow-y: scroll; } .friends-list-content::-webkit-scrollbar { width:14px; height: 15px; } .friends-li... 阅读全文

posted @ 2018-01-24 16:56 Newbie_小白阅读(207) 评论(0) 推荐(0)

解决华为手机用rem单位，内容超出屏幕宽度问题

摘要：在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！例如：设计稿是640px，用js计算出来的根节点font-size是阅读全文

posted @ 2017-12-06 15:47 Newbie_小白阅读(8596) 评论(7) 推荐(0)

iPhoneX页面安全区域与内容重叠问题

摘要：转载自：https://www.cnblogs.com/lolDragon/p/7795174.html 1. iPhoneX的介绍屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸倍图其实就是像素尺寸和阅读全文

posted @ 2017-12-01 14:58 Newbie_小白阅读(21615) 评论(0) 推荐(1)

rem

摘要：iPhone6 下面 1rem=75px; $(function(){ var oHtml=document.getElementsByTagName("html")[0]; var iWidth=document.documentElement.clientWidth; iWidth=iWidth 阅读全文

posted @ 2017-06-12 16:58 Newbie_小白阅读(318) 评论(0) 推荐(0)

display 垂直居中

摘要：/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center... 阅读全文

posted @ 2017-06-12 13:55 Newbie_小白阅读(977) 评论(0) 推荐(0)

font-family 定义的最后为什么要加一句sans-serif

摘要：定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。sans-serif就是无衬线阅读全文

posted @ 2017-06-12 13:31 Newbie_小白阅读(2935) 评论(0) 推荐(1)

border-box

摘要：box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border 阅读全文

posted @ 2016-06-22 19:17 Newbie_小白阅读(872) 评论(0) 推荐(0)

浏览器默认样式

摘要：一、样式的五种来源对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。阅读全文

posted @ 2016-06-21 14:07 Newbie_小白阅读(826) 评论(0) 推荐(0)

display

摘要：1. 引言网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。其实，这部分知识都囊括在display这个样式设置中。常用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的阅读全文

posted @ 2016-06-21 14:04 Newbie_小白阅读(338) 评论(0) 推荐(0)

让DIV的滚动条自动滚动到最底部 - 3种方法

摘要：要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。但同样的代码拿到我这里却完全失效，又仔细查了下资料说XHTML标准下scrollTop的值恒为0，阅读全文

posted @ 2016-06-18 15:53 Newbie_小白阅读(78858) 评论(5) 推荐(5)

css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器

摘要：解决方法: 1.在css中加上outline:none; 代码如下: a.fontnav { text-align:left;color:#555; text-decoration:none; outline:none} ps: outline:none 只在firefox识别,IE下不支持. 2. 阅读全文

posted @ 2016-06-17 15:44 Newbie_小白阅读(420) 评论(0) 推荐(0)

CSS文字两端对齐

摘要：HTML： result：总结：从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。阅读全文

posted @ 2016-06-16 19:05 Newbie_小白阅读(585) 评论(0) 推荐(0)

ie6中margin失效问题

摘要：在div的外面添加父级div并设置 padding-bottom: 10px;！<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .clear { zoom: 1; /*iE 6; 阅读全文

posted @ 2016-06-04 18:30 Newbie_小白阅读(211) 评论(0) 推荐(0)

渐变

摘要：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 200px; height: 200px; border: 1px #333 solid; back 阅读全文

posted @ 2016-06-04 14:55 Newbie_小白阅读(147) 评论(0) 推荐(0)

CSS 清除浮动的4种方法

摘要：此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{backgrou 阅读全文

posted @ 2016-06-04 14:18 Newbie_小白阅读(774) 评论(0) 推荐(0)

在浏览器的标签页显示网站标志图标（或指定图标）的方法

摘要：对于不同的浏览器，方法是有差别的1.对于IE或TT浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法：把favicon.ico图标放到网站根目录下，在网页的<head></head>中加阅读全文

posted @ 2016-06-04 13:54 Newbie_小白阅读(24375) 评论(0) 推荐(0)

CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

摘要：常用的清除浮动的方法有以下三种: 此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景三种清除浮动方法如下： 1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签阅读全文

posted @ 2016-05-28 09:08 Newbie_小白阅读(1204) 评论(0) 推荐(0)

css实现两端对齐

摘要：说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式阅读全文

posted @ 2016-05-17 09:33 Newbie_小白阅读(466) 评论(0) 推荐(0)

CSS属性中cursor:hand

摘要：在 IE 下设置鼠标为手型的方法: cursor: hand,但是在 FIREFOX 中是无效的,解决方法是在FIREFOX中设置: cursor: pointer. 而这个pointer 值在IE和FIREFOX 下都是通用的,所以我们使用: cursor:pointer 就可以了。一般而言，鼠阅读全文

posted @ 2016-04-27 18:56 Newbie_小白阅读(9549) 评论(5) 推荐(0)

随笔分类 - CSS