文章分类 - div css
摘要：简单的说下区别，可能略有不对之处 word-wrap word-break 可以看出区别如下 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 word-break 属性用来标明怎么样进行单词内的断句。 word-br
阅读全文
posted @ 2018-12-10 17:00
a fine day
摘要：对于类似的两端对齐 认为有如下好方式： 1 父元素设置flex布局（display:flex）子元素左侧设置flex:1 子元素右侧不设置（即auto），左侧的为把剩余的全部占据 2 父元素设置flex布局（display:flex；justify-content: space-between;）子
阅读全文
posted @ 2016-12-01 13:52
a fine day
摘要：对于子元素中相同的css样式，利用css的继承，能更好的控制css。 例如body中定义css。 body 设置css中可以继承的属性：letter-spacing、word-spacing、white-space、line-height、color、font等 但有时，body的样式，不能在有的元
阅读全文
posted @ 2016-11-14 10:21
a fine day
摘要：css .wave{ margin-top: 345px; background-image: linear-gradient(45deg,transparent 45%,red 55%,transparent 60%),linear-gradient(135deg,transparent 45%,
阅读全文
posted @ 2016-11-12 11:54
a fine day
摘要：uc 不支持display ： flex 方案：display:-webkit-box; iphone 5s 同样不支持 方案: display:-webkit-flex; flex ： 数值 iphone 5s 采取 -webkit-flex：数值 uc 采取 -webkit-box-flex:
阅读全文
posted @ 2016-09-13 10:59
a fine day
摘要：手机端适应宽度，高度，有时估计不好解决 但是找到好的方式，能让效率事半功倍 不需要用js控制 此栗子中的按钮，举一反三 整个psd宽度为750，按钮宽为280，高度69（不用考虑）宽度占37%，所以定位： header{ position：relative； } a{ position:absolu
阅读全文
posted @ 2016-08-19 14:45
a fine day
摘要：在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。 使用display: flex;的时候需要加上display: -webkit-box; 使用flex: 1;的时候要加上: 1 2 3 4 -webkit-box-flex: 1; -moz-box-flex
阅读全文
posted @ 2016-08-12 11:39
a fine day
摘要：在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。首先在head中加入如下代码： 1 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1
阅读全文
posted @ 2016-08-11 10:01
a fine day
摘要：是以为body 默认的margin造成，与padding没关系，因为body的默认padding为0
阅读全文
posted @ 2016-08-04 12:36
a fine day
摘要：Opera 12.11 ol的padding为: padding:0 0 0 40px; Safari 5.1 ol的padding为: padding:0 0 0 40px; Google Chrome 27.0 ol的padding为: padding:0 0 0 40px; // p的marg
阅读全文
posted @ 2016-08-04 11:23
a fine day
摘要：position: absolute;元素的宽度变为content的宽度，这是与position:relative（100%）不同的地方，若要呈现为100%， 有两个方法： 1.直接设置 width:100% 2.设置left:0px right:0px; 布局参看http://www.zhangx
阅读全文
posted @ 2016-08-02 16:21
a fine day
摘要：.ie6_7_8{ color:blue; /*所有浏览器*/ color:red\9; /*IE8以及以下版本浏览器*/ *color:green; /*IE7及其以下版本浏览器*/ _color:purple; /*IE6浏览器*/ }
阅读全文
posted @ 2016-07-29 13:05
a fine day
摘要：标记由以下几部分组成，严格按照下列顺序： 一个 "<" 字符. 元素的标记名称. 可选的，一个或多个属性，其中每一个的前面必须有一个或多个空格字符。（class id data href等顺序） 可选的，一个或多个空格字符。 可选的，一个“/”字符，它可以存在且仅当元素是一个空元素时。 一个 ">"
阅读全文
posted @ 2016-07-29 10:32
a fine day
摘要：是因为有中文的空格 /**HTML**/ div.ani /**css**/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); backgrou
阅读全文
posted @ 2016-07-04 20:25
a fine day
摘要：问题如图所示： 利用右侧元素的display ： table-cell/table-row/inline-block; 参考文献 http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9
阅读全文
posted @ 2016-02-03 12:03
a fine day
摘要：1 ， bootstrap 默认的对越宽度的界限值，是可以根据效果图的实际情况，重置，甚至可以增加。例如，效果图为2000px宽度的情况，个人理解如下： 依据屏幕分辨率的不同， 可以采用768，992，1200，1500，1920的区分。 2 ，对于如何选择col-的问题，可以依据效果图，算好比列，
阅读全文
posted @ 2016-01-31 17:22
a fine day
摘要：原理简单：background-clip意为剪切， background-origin意为原始点（即背景图开始有效的原点）整个元素都是背景图的有效部分。 background-clip是按照实际选择值开始与结束。 而background-origin却是指定背景图的有效位置，默认是在padding开
阅读全文
posted @ 2016-01-31 17:08
a fine day
摘要：float的元素在父元素为display：inline的情况时，子元素（即float元素）会脱离父元素，在其祖先元素最近的一位表现为block的元素浮动变现。 此文是在理解bootstrap的如下代码获得：（如下代码不符合bootstrap,为自己理解所用) <div class="radio">
阅读全文
posted @ 2016-01-30 13:44
a fine day
摘要：有时在利用1px solid #颜色值 制作细线的时候，发现线不是很细，可通过调整颜色值，采用与背景色相近的颜色，即可获得感觉很细的线
阅读全文
posted @ 2016-01-29 13:59
a fine day
摘要：可能的问题 网站footer部分上浮，可通过css3的方式html 结构 ：无标题文档vh支持情况：
阅读全文
posted @ 2015-09-19 17:04
a fine day
浙公网安备 33010602011771号