软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> womoso项目总结 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]womoso项目总结

  2016-04-01 16:50:01

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

在文档迁移中知道自己命名的坏毛病了吧,自己给自己挖坑能怪谁呀

2 很多项目可以使用很多共同的样式比如margin padding 等等。可以搭建自己的一套样式列表在配合bootatrsp的使用
margin-left-10{margin-left:10px;}
等等

3 对于项目中相同部分组件,保持使用相同结构,命名。比如购物车页面和订单页面都有的table列表。
4 background-clip background-origin

这个部分是用的背景图 <div id="view" ></div>
然后是padding border 配合使图像与边界之间空出4px间隙..
所以要求背景图在内容区域显示,这就用到了
background-clip:content-box;  


出来啦。
然后找一下相关属性background-origin
先看看w3c 对于两者的解释,

注意,background-origin只适应于背景图片的相关操作,因为要配合 background-position 的使用
background-clip 同时可以处理背景图与背景色


background-clip


也就是说,如果你是用的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; }


也就是说,当父级盒子设置
text-align:center;line-height:height;
同时子元素img , 是内联元素而非块元素的时候,图片会居中。注意,要配合vertical-align:middle;来使用。
这个问题是关于line-height 与 vertical-align 的,之前在文章中小小的提到过一次,今天又仔细读了张大神的文章,自己写一遍,加深理解。

如果将css代码改为这样
          .box{margin: 50px auto;
             width: 300px;
             border: 1px solid saddlebrown;
             text-align: center;
             background: #A6E1EC;
            }   
            img{width: 200px;}

得到样式如下:

按理说盒子的高度应该是img撑起来的高度,但是,底部却有多余的空隙出现。
           .box{margin: 50px auto;
                width: 300px;
             border: 1px solid saddlebrown;
             background: #A6E1EC;
            }   
            img{width: 200px; display: block;}


看。间隙消失了。
也就是说,这个间隙的存在是与子元素(这里是img)的内联 还是块级 属性有关。

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;  }


看出来了吧。真的是这样。
(我用ps看了一下,图片的底部间隙是3px ,文字底部间隙也是3px )
继续 说,如果在图片后写几个字,会出现这样的情况。


这样我们思考两个问题,1 vertical-align默认的对齐方式是?
2 后面文字的高度从何而来?
w3c解释如下:

所以图片以及文字在默认与基线对齐的情况下,出现了上图所以情况。而他们的基线就是文字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;}


所以说,文字的高度则是由于line-height 决定的。

所以之前,为什么最开始展示的那个图片底部会有间隙,就是因为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;  }


上一篇文章           查看所有文章
2016-04-01 16:48:17  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频 装修知识库
2017-1-20 11:50:47
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --