css知识笔记(五)——css样式设置小技巧
水平居中设置-行内元素
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center
来实现的。如下代码:
html代码:
<body><div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div> </body>
css代码:
<style>div.txtCenter{text-align:center;} </style>
水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。
第一种方法:满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:
html代码:
<body><div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>
css代码:
<style> div{border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
也可以写成:
margin-left:auto; margin-right:auto;
注意:元素的“上下 margin” 是可以随意设置的。
第二种方法:改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:
html代码:
<body> <div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul> </div> </body>
css代码:
<style> .container{text-align:center; } .container ul{list-style:none;margin:0;padding:0;display:inline; } .container li{margin-right:8px;display:inline; } </style>
这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下:
<body> <div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul> </div> </body>
css代码:
<style> .container{ float:left;position:relative;left:50% }.container ul{list-style:none;margin:0;padding:0; position:relative;left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
<div class="container">hi,imooc! </div>
css代码:
<style> .container{height:100px;line-height:100px;background:#999; } </style>
垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
html代码:
<body> <table><tbody><tr><td class="wrap"> <div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
html代码:
<div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div> </div>
css代码:
<style> .container{height:300px;background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
- position : absolute
- float : left 或 float : right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码,a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。
<div class="container"><a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{position:absolute;width:200px;background:#ccc; } </style>
————————————————————————————————————————————————————————————————————————————
以上内容参考自慕课网:http://www.imooc.com
css知识笔记(五)——css样式设置小技巧相关推荐
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- 网络知识:分享几个路由器设置小技巧,欢迎收藏!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 今天给大家分享几个路由器设置小技巧,欢 ...
- 网络基础:分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- 网络技巧:分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- 分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- linux mint图标大小,Cinnamon:LinuxMint 15桌面设置小技巧
touchwiz自身也在做不断的革新,例如7屏分页,桌面切换3d效果,增强型的下拉菜单设置等.win10多桌面最多可以支持7个桌面开启,而且win10切换多桌面是有快捷键的,可以帮助用户迅速切换或创建 ...
- 苹果手机小技巧大全计算机,80%的人都不知道的五个iPhone实用小技巧,不知道的话赶紧看看...
原标题:80%的人都不知道的五个iPhone实用小技巧,不知道的话赶紧看看 现在越来越多的人使用iPhone手机,而且iPhone新机也是出了一段时间了,但是还是有很多人不知道iPhone中的一些隐藏 ...
- Python五种实用的小技巧
本文经"机器之心"授权,禁止二次转载. 作者:Peter Nistru 机器之心编译 参与:思 最开始学 Python 时,如果我能掌握这些方法,那么代码看起来会更加优美. 在本文 ...
- android系统手机流量控制方法,手机流量控制!安卓手机控制流量设置小技巧
原标题:手机流量控制!安卓手机控制流量设置小技巧 手机流量控制!安卓手机控制流量设置小技巧?随着4G网络时代的开启,手机每月耗流量不再是以M为单位,二手以G为单位.曾经的2G时代,一个月只需要20.3 ...
最新文章
- linux deepin “debconf: DbDriver “config“: config.dat 被另一个进程锁定:资源暂时不可用“
- Raft算法的Leader选举和日志复制过程
- 如约而至 Nexus 6 的 Android 7.1.1 已经上线
- 详述一次大量删除导致MySQL慢查的分析
- 怎么样才显示暗=安装好了mysql_linux mysql安装
- 持续集成部署Jenkins工作笔记0017---17.整合GitHub的持续集成环境要点说明
- ZH奶酪:Python中zip函数的使用方法
- php ajax 搜索实例,PHP 实例 AJAX 实时搜索
- javascript 的module 模块化
- Centos下安装nginx步骤解析
- Kindle 3---原系统下的字典的使用
- c语言if的作用,c语言if语句的用法
- Ubuntu16.04安装网易云音乐后打不开
- 北京软件项目外包流程及管理
- java 电商项目 搜索模块,SSH电商项目实战之十:商品类基本模块的搭建
- 三基色PWM调光方法
- 新劳动法年假计算工具
- 数据通信基础 - 调制技术
- vmware 安装ghost系统注意
- XSS Game通关教程
热门文章
- linux raw socket 例子,raw socket编程例子
- java response 获得code_Java教程分享使用HttpClient抓取页面内容
- linux日志文件备份,LINUX 自动备份程序日志(shell)
- python数据挖掘电影评分分析_Pyhon数据分析项目——男女电影评分差异比较
- #获得请求来源ip_以太网数据包TCP、IP、ICMP、UDP、ARP协议头结构详解
- 九齐NY8B072A单片机使用笔记(一)TIMER0定时器
- 463. 岛屿的周长
- Java布尔类toString()方法及示例
- php globals_PHP $ GLOBALS(超级全局变量),带有示例
- java错误1601解决方法,求助解决错误