【结构-行为-样式-css&html横纵居中最佳实践】的更多相关文章

结构-行为-样式-css&html横纵居中最佳实践

最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素的Border来做这根线:然后,线与文字在同一个父级元素下:最后,设置线为绝定位,文字相对定位,设置文字高度为线Margin值的两倍: 图一: 相应Html: <div> <div class="top-line"></div> <div clas…

CSS 6种完全居中最佳实践（整理）

2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; } 在线演示 在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0. W3.org:?If…

结构-行为-样式-Css Div 居中的一个最佳实践

最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class="hr-use"></div> <div class="youwant"> <span class="loveicon"></span> <span>你可能还想要</span> &l…

CSS UNIT 详解以及最佳实践

分类 ■    绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方都一样, 1cm就是1cm ■     相对长度(Relative units):em,px,%,rem,vm,vh,vmin,vmax px是基于设备的,不同设备不同的展现,但是打印输出设备上始终表现一致,1PX = 1/96 * inch. em 是基于元素最近的font-size的设定 一个元…

结构-行为-样式-Css笔记

 0.常见的行级元素和块级元素: 行级元素:div,table,form ,ul,ol,p,h1-h6,hr; 块级元素:a,select,input,textarea,img,label,br,i,b,span,strong; 1.position:absolute是根据离他最近的position:relative || sbolute || fixed 的元素定位: Q:在IE8下使用Z-index失效,如何解决? 2.用opacity和Filter的组合替代Z-index.具体如下 : .…

CSS media query应用中的层叠特性使用最佳实践

media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能.在实际使用中,我常常碰到以下问题:为什么media query的rule不起作用?很有可能和你的media query所处的位置有关,也很有可能和media query中的selector权重不 如外面的targeting到相同元素的css权重有关,比如: @media screen and (m…

Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body></body></html> 2.DOCTYPE声明放在html文件头部最新HTML5用<!DOCTYPE html>声明 3.css的引入方式a.直接在html下引入<st…

【CSS】如何在一个页面中引入样式css

CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2演变过来的,所以我们还是要从css2开始学起.今天就先聊聊如何在html中引用css,以改变页面样式. 1.行内引用(行内式) 所谓行内式就是通过style属性在标签内部写.但是这种方法及其不推荐.因为w3c标准就是一直倡导结构和样式分离,在标签内部写会使得css和html代码交织在一起. 1css…

node.js入门学习（二）MIME模块，request和response对象，demo之不同url请求不同html页面，页面包含图片、样式css等静态资源

一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.createServer(function(req, res) { if(req.url === '/') { res.end("hello index"); } else if(req.url === '/list') { res.end("hello list"); }…

FontAwesome 4.7.0 中完整的675个图标样式CSS参考

FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">然后用 <i class="fa fa-XXXX"></i> 输出图标比如用 <i class=&…