软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> womoso项目总结 -> 正文阅读

[Web前端]womoso项目总结


1 关于元素命名问题
将元素的样式标签与行为标签分开,便于日后的操作。
比如一个删除按钮
<button class="btn btn-theme-bg ac-btn-delete">delete</button>

在文档迁移中知道自己命名的坏毛病了吧,自己给自己挖坑能怪谁呀
[img]http://img.blog.csdn.net/20160328141324205
2 很多项目可以使用很多共同的样式比如margin padding 等等。可以搭建自己的一套样式列表在配合bootatrsp的使用
margin-left-10{margin-left:10px;}
等等

3 对于项目中相同部分组件,保持使用相同结构,命名。比如购物车页面和订单页面都有的table列表。
4 background-clip background-origin
[img]http://img.blog.csdn.net/20160331095334005
这个部分是用的背景图 <div id="view" ></div>
然后是padding border 配合使图像与边界之间空出4px间隙..
所以要求背景图在内容区域显示,这就用到了
background-clip:content-box;  

[img]http://img.blog.csdn.net/20160331095831023
出来啦。
然后找一下相关属性background-origin
先看看w3c 对于两者的解释,
[img]http://img.blog.csdn.net/20160331101831704
注意,background-origin只适应于背景图片的相关操作,因为要配合 background-position 的使用
background-clip 同时可以处理背景图与背景色
[img]http://img.blog.csdn.net/20160331103226334
[img]http://img.blog.csdn.net/20160331103236131
background-clip
[img]http://img.blog.csdn.net/20160331103412085
[img]http://img.blog.csdn.net/20160331103425851
也就是说,如果你是用的clip ,背景图会发生裁剪。这个从clip –裁剪 ,也可以看出来
5 图片在某个盒子中垂直水平居中
<div class='box'>
   <img  src='img/test.img'/>
</div>

对应的css
           .box{
             width: 500px;
             height: 400px;
             border: 1px solid saddlebrown;
             text-align: center;
             line-height: 400px;
            }   
            img{ vertical-align: middle; }

[img]http://img.blog.csdn.net/20160331104712855
也就是说,当父级盒子设置
text-align:center;line-height:height;
同时子元素img , 是内联元素而非块元素的时候,图片会居中。注意,要配合vertical-align:middle;来使用。
这个问题是关于line-height 与 vertical-align 的,之前在文章中小小的提到过一次,今天又仔细读了张大神的文章,自己写一遍,加深理解。
[img]http://img.blog.csdn.net/20160331105853063
如果将css代码改为这样
          .box{margin: 50px auto;
             width: 300px;
             border: 1px solid saddlebrown;
             text-align: center;
             background: #A6E1EC;
            }   
            img{width: 200px;}

得到样式如下:
[img]http://img.blog.csdn.net/20160331110725035
按理说盒子的高度应该是img撑起来的高度,但是,底部却有多余的空隙出现。
           .box{margin: 50px auto;
                width: 300px;
             border: 1px solid saddlebrown;
             background: #A6E1EC;
            }   
            img{width: 200px; display: block;}

[img]http://img.blog.csdn.net/20160331111420991
看。间隙消失了。
也就是说,这个间隙的存在是与子元素(这里是img)的内联 还是块级 属性有关。
[img]http://img.blog.csdn.net/20160331111601929
But,why?
在HTML5文档声明下,块状元素内部的内联元素的行为表现,就好像块状元素内部还有一个(更有可能两个-前后)看不见摸不着没有宽度没有实体的空白节点.
来,用事实说话,检测检测
       <div class="box big">
            <a>试验检测试验检测</a>
        </div>
        <div class="box big">
            <p>试验检测试验检测</p>
        </div>
          .box{
             border: 4px solid #000;
             background: #A6E1EC;
            }   
            a , p{ font-size:64px; border: 2px solid red;  }

[img]http://img.blog.csdn.net/20160331113013122
看出来了吧。真的是这样。
(我用ps看了一下,图片的底部间隙是3px ,文字底部间隙也是3px )
继续 说,如果在图片后写几个字,会出现这样的情况。
[img]http://img.blog.csdn.net/20160331141644764
[img]http://img.blog.csdn.net/20160331141655733
这样我们思考两个问题,1 vertical-align默认的对齐方式是?
2 后面文字的高度从何而来?
w3c解释如下:
[img]http://img.blog.csdn.net/20160331114730801
所以图片以及文字在默认与基线对齐的情况下,出现了上图所以情况。而他们的基线就是文字z的下边。
文字的高度则是由于line-height 决定的。
对于同样文字大小相同但是line-height设置不同的a strong元素,表现如下

a , strong {font-size: 20px;color: #fff; display: inline-block; background: #000;}
a{line-height: 40px; text-decoration: none;}
strong{line-height: 50px;}

[img]http://img.blog.csdn.net/20160331142914722
所以说,文字的高度则是由于line-height 决定的。
[img]http://img.blog.csdn.net/20160331143117645
所以之前,为什么最开始展示的那个图片底部会有间隙,就是因为vertical-align和line-height同时作用造成的呀。下面的空隙高度,实际上是文字计算后的行高值和字母xz下边缘的距离。
那怎么解决呢?
既然是这两人的问题,那就对症下药。
图片默认是inline水平的,而vertical-align对块状水平的元素无感。所以设置图片为block。就会发现间隙消失。
因此,任意尺寸的图片(或者内联块状化的多行文字)的垂直居中效果。就是使用,vertical-align和line-height来实现。
对于想要垂直居中一段文字:
将该元素设置为display:inline-block; vertical-align:center;
注意,本身也要设置line-height;否则将继承自父级元素,换行之后会发生错误。
<div class="boxs">
            <strong>隔了百年的光阴,那些人,那些事,那些孤寂而平淡的日子,一旦过去,便是再也、再也无法回来了。
 原来,即便是生命里最深的爱恋,也终究抵不过时间万里的迢梯,浮世肮脏</strong>
        </div>

核心css样式
         .box{
             line-height:350px;
             text-align: center;
            }   

            strong{
             display: inline-block;
            vertical-align: middle;
             line-height: 24px;  }

[img]http://img.blog.csdn.net/20160331150852456
......显示全文...
    点击查看全文


上一篇文章           查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:43:15
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --