.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
做诸葛书的时候遇到一个问题，就是我插入的元素在端上设备分页被切断，显示很丑。最后优秀的产品同学告诉我第一版用到一个神奇的属性，容器中途分割 | break-inside。.actionDom{-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid; }break-insideCSS属性定义页，列或区域断裂的行为方式产生的箱内。如果没有生成的框，则忽略该属性。参考文献：容器中途分割https://cloud.tencent.com/developer/s...
在css布局中，position发挥了极其重要的作用，很多的网页布局都要用position来完成。position有四个属性值static、absolute、relative、fixed。static这个属性表示默认的位置，在设置它的时候，可以取消继承属性，在一般情况下则不需要设置这个属性。absolute这个属性表示绝对定位。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置就会相对于最初的包含块。元素原先在正常文档流中所...
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对...
原文by无悔铭居中布局 水平居中 1）使用display:inline-block+text-align:center（display问题）（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父框设置text-align:center。（2）代码实例<div class="parent"><div class="child>DEMO</div> </div>.child{display:inline-block; } .parent{text-align:center; }（3）优缺点优点...
在做项目的时候，居然单击后显示的顺序一直被别的li标签压着，最后终于找到了，是css的z-index属性赋值了，值越大，显示的层就越高详情推荐百度百科：z-indexz-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 引用方法 z-index : auto...
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style> 7 *{ 8 margin: 0;/*重置*/ 9 padding: 0;10}11 body{12 background-color: whitesmoke;/*页面背景色*/13}14 .top{15 width: 100%;16 height: 60px;17 background-color: black;18 padding-left: 100px;19}20 .bo...
CSS 是什么？ CSS是Cascading Style Sheets的简称，中文称为层叠样式表。定义如何显示HTML的元素。 CSS样式由两个组成部分：选择器和声明。声明由大括号包裹，声明又包括属性和属性值。每个声明之后用分号结束。CSS 四种引入方式：1.行内式 行内式是在标签的style属性中设定CSS样式。2.选择器 原文：https://www.cnblogs.com/liusouthern/p/8516109.html
作用css-loader用于将css文件打包到js中, 常常配合style-loader一起使用，将css文件打包并插入到页面中。如下：{test: /\.css$/,use: [{loader: ‘style-loader‘},{loader: ‘css-loader‘,options: {root: ‘/‘, //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的modules: false, //开启css-modules模式, 默认值为flaselocalIdentName: ‘[name]-[local]-[hash:base64:5]‘, //设置css...
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>CSS单行、多行文本溢出显示省略号</title><style> .box{width:300px; height:400px; background:#ddd; margin:0 auto;} .box .d1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .box .d2-1{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .box .d2-2{position:relative; heig...
第11章 CSS3布局基础【学习重点】了解CSS2盒模型。设计边框样式。设计边界样式。设计补白样式。了解CSS3盒模型。11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。11.1.1 盒模型结构Box具有如下特点：每个盒子都有：边界、边框、填充、内容4个属性。每个属性都包括4个部分：上、右、下、左。属性的四部分...
前提条件：在开始前，你应该已经具备:对HTML的基础了解，在Introduction to HTML部分讨论过的。一定的CSS基础，在Introduction to CSS部分讨论过的。了解如何样式化盒子模型.提示: 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 JSBin 或 Thimble 。指南这些文章将提供在CSS中可用的基本布局工具和技术的指导。介绍 CSS 布局本文将重述一些我们在之前...
1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码： p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明2.内联式CSS样式并且css样式代码要...
gradient主要用于渐变，来实现一些特效，现在网上已经有了很多较好的文章，以我现在菜鸟的级别估计很难写的比他好，所以在这里直接上链接来自w3cplus：http://www.w3cplus.com/content/css3-gradient在这里我主要来讲一下可以用它来做什么好玩的东西（一下均在谷歌浏览器中运行）案例一：滚动条（先上图）瞧上面那个图就是用线性渐变（当然还有一个镜像渐变）做成的，那是怎么做成的呢，直接上代码（其实很简单）。<!--HTML部分-->...
<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%"/></div>原文：http://www.cnblogs.com/yutaoyao/p/4164415.html