webkit

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 1.1 盒子模型 在学习盒子模型之前，先来看一个生活中的例子。假如墙上排列着几幅画。对于每幅画来说，都有一个边框，在英文中称为border；每个画框中，画和边框通常都会有一定的距离，这个距离称为内边距，在英文中称为padding；每一幅画间也不是紧挨着的，也存在一些距离称为外边距，在英文中称为margin。 在CSS中，一个独立的盒子模型由content（页面内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成 1.content：位于最中间，页面的主要显示内容，也就是这幅画的本身 2.border：位于内边距外面，如果没有内边距就是包着内容的外框。它一般具有一定的厚度，也就是这幅画的画框 3.padding：位于边框内部的空隙，是内容与边框的距离，也就是画框和图之画之间的空隙 4.margin：位于边框内部空隙，边框外面周围的距离，也就是每幅画之间的空隙 1.1.1 边框 边框（border）有三个属性，分别是color（颜色）、width（粗细）和style（样式）。在网页中设置边框样式时

文本超出隐藏显示省略号 1、单行文本的溢出显示省略号 overflow: hidden; text - overflow:ellipsis; white - space: nowrap; // overflow 属性规定当内容溢出元素框时发生的事情,可能值为visible（默认）、hidden、scroll、auto、inherit // text-overflow 属性规定当文本溢出包含元素时发生的事情，cilp（默认，修剪文本）、ellipsis（显示省略号）、string（给定字符串代替） 2、多行文本的溢出显示省略号 display: -webkit-box; /* 值必须为-webkit-box或者-webkit-inline-box */ -webkit-box-orient: vertical; /* 值必须为vertical */ -webkit-line-clamp: 2; /* 值为数字，表示一共显示几行 */ overflow: hidden; 3、延伸 -moz- ：Firefox，GEcko引擎 -webkit-： Safari和Chrome，Webkit引擎 -o- ：Opera（早期），Presto引擎，后改为Webkit引擎 -ms- ：Internet Explorer，Trident引擎 W3CCSS教程： https://www

本博客主题分享，算不上特别好看吧，但是比博客园原来的好看一些，我自己觉得！不接受反驳 选择主题为：（然后保存） 页面定制css代码 /*溢出隐藏设置*/ #topics, #mainContent { overflow: visible; } #postDesc { float: none; } #gotop-fixed .call i{ display: inline-block !important; line-height: 20px !important; } #gotop-fixed .call{ background-color: #457CE6 !important; } #gotop-fixed .goTop{ background-color: #457CE6 !important; opacity: 0.8; } @media screen and (max-width: 500px){ body{ color: red; } #page_begin_html a{ display: none; } } #header { height:37px; width:100%; background-color:#ffffff !important; transition:height 0.3s; -moz-transition:height 0.3s; /*

阻止谷歌下记住密码 当我们将input框的类型设置为密码框的时候，就会出现下面这种效果，不仅样式不统一，有的时候，密码框的上面并不是用户名，而是其他的内容，也会被强制显示为用户名： 首先需要解决样式问题： #app input:-webkit- autofill { -webkit-text-fill-color: #fff ! important; -webkit-box-shadow: none ! important; background - color: transparent; background - image: none; transition: background -color 999999s ease- in -out, color 999999s ease- in - out; } 其次，阻止谷歌自带的记住密码： 回车重定向 单个el-input获得焦点时，点击键盘回车，会触发路由重定向。 解决方法：@submit.native.preven t阻止表单默认事件 日期时间框的默认值在IE无法清除 element的日期框添加默认值后，在ie下，默认的清空按钮无法清空默认日期值： 数据应该是已经清空了，但是DOM没有刷新，所以需要强制刷新DOM： 自定义表头 <template> <div> <el-table- column v - for ="(item,

一、本文介绍范围 本文写于2020年5月，获取的是2019年4月-2020年4月这一段时间的浏览器的市场份额占比，同时本文也会涵盖主流浏览器的内核的变迁历史，以及各大平台下的浏览器现状。 过去的历史可以参考： 2016年——2017年的浏览器市场份额以及浏览器的内核历史 二、主流浏览器 浏览器全平台份额占比 桌面浏览器市场份额占比 移动端市场份额占比 平板浏览器市场份额占比 从以上数据可以看书，在桌面市场中，chrome占据榜首高达69%，随后是Firefox 、Safari、 Edge、 IE、 Opera等；在智能手机市场，chrome依然高居榜首，高达61.16%，随后是Safari占据21.89%，Samsung Internet占据6.65%，UC占据5.29%，Opera占据2.33%，Android 、KaiOS 、Firefox、 QQ browser等都在1%之下；在平板市场，苹果牢牢占据优势，位居榜一，占比高达59.91%，随后是Chrome占比27.03%，Android占比10.75%，以及Firefox、Opera等；综合所有平台来看，整个市场的份额占比Chrome是No.1占比63.39%，Safari占比16.68%是No.2，Firefox占比4.54%，Samsung Internet占比3.42%，UC browser占比2.87%

博客园页面定制CSS代码 要是觉得有用，就点个推荐呗～ 1 #home { 2 margin : 0 auto ; 3 width : 80% ; /* 原始65 */ 4 min-width : 980px ; /* 页面顶部的宽度 */ 5 background-color : rgba(245, 245, 245, 0.7) ; 6 padding : 30px ; 7 margin-top : 50px ; 8 margin-bottom : 50px ; 9 box-shadow : 0 2px 6px rgba(100, 100, 100, 0.3) ; 10 } 11 body { 12 background : rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat ; 13 background-position : 50% 5% ; 14 background-size : cover ; 15 } 16 #blogTitle { 17 height : 100px ; /* 高度 */ 18 clear : both ; 19 background-color : rgba(245, 245, 245,

今天给大家带来一款基于 css3 非常实用的鼠标悬停特效。这款特效，当鼠标经过时候一个半透明的遮罩层倒下来。效果很好，而且是纯css3实现的，代码很少，非常实用。 效果如下： 在线预览 源码下载 实现的代码： html代码： <div align= " center " style= " position: relative; " > <div class = " contener " > <div class = " txt_init " > LOW POLY BACKGROUND </div> <div class = " opac " > Download </div> </div> </div> css3代码： .contener { width : 310px ; height : 140px ; background-image : url(fond.png) ; overflow : hidden ; cursor : pointer ; position : relative ; } .txt_init { position : absolute ; bottom : 5px ; right : 5px ; font-family : 'Roboto' ; font-size : 22px ; color : #ffffff ; font-weight : 500

CSS中有3种定位机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由HTML元素的位置决定。块级框一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出。在本文中，我们主要讲解3种定位机制之一的绝对定位，这就需要深入了解relative（相对定位），absolute（绝对定位）两种position属性值。 position的所有属性值如下所示： absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative，生成相对定位的元素，相对于其正常位置进行定位。 fixed, 生成固定定位的元素，相对于浏览器窗口进行定位。 Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。 static，默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。（ Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

使用博客园快一星期了，看自己博客太单调了，就网上翻找别人的美化教程，自己钻研一整天，现在整理分享出来。 首先要申请js权限，在设置选项，博客设置里， 一般十几分钟就审核好了，如图 背景图片设置 先选择模板，选择SimpleMemory。 注： 后面的css代码是基于这个模板修改的 新建一个相册，上传背景图片，尽量选清晰度高的。在相册那里点击查看图片 会弹出一个很大的页面，右键图片，选择 复制图片地址 。 然后将以下css代码粘贴到 博客设置的 页面定制CSS代码 处，记得展开代码。 #google_ad_c1, #google_ad_c2 { display : none ;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size : 14px

　　一，主流浏览器及内核 　　Chrome——Webkit/blink 　　IE ——Trident 　　Firfox ——Gecko 　　Safari—— Webkit 　　Opera—— presto 　　二，css权重 　　!importent ——Infinity(正无穷) 　　行间样式 ——1000 　　id ——100 　　class/属性/伪类 ——10 　　标签/为元素 ——1 　　通配符—— 0 　　css的优先级取决于权重，权重间的进制是256. 　　三，行级 块级 行级块 元素 　　行级元素：1内容决定元素大小 2无法通过css改变宽高(span em a strong……) 　　块级元素：1独占一行 2可以改变宽高 (p div ul li form address……) 　　行级块元素：内容决定大小 可以改变宽高 (img) 　　四，定位 　　绝对定位：absolute：脱离原来位置，以最近父级定位，如果没有以文档顶端定位 　　相对定位：relative：保留自己以前的位置，并且以自己以前位置定位 　　五，margin俩bug 　　1，margin-top塌陷：子div在父div中 子div margin-top无效，除非子div margin-top值大于父级的，而且此时还带动父级一起移动。 　　父级div上边框消失了一样，给父级加上一个上边框可以解决