HTML笔记3
来源:互联网 发布:魔扣少儿编程网址 编辑:程序博客网 时间:2024/06/14 16:30
水平居中设置
分两种情况:行内元素还是块状元素 。
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center
来实现的。
块状元素里面又分为定宽块状元素,以及不定宽块状元素:当被设置元素为 块状元素 时用 text-align:center就不起作用了,。
定宽块状元素:块状元素的宽度width为固定值。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。两个2个条件缺一不可.
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
1. 加入 table标签
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个table 标签 (包括<tbody>、<tr>、<td>)。
第二步:为这个 table设置“左右margin居中”(这个和定宽块状元素的方法一样)。
2. 设置 display: inline方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
/*text-align:center(文本居中)*/
/*list-style:none(消除li圆点)margin:0;padding:0(消除文本与div边框之间的间隙)display:inline(变成行内元素,也就是把ul文本列变成行。另外从border来看未设置inline之前宽度是无限的,设置后宽度变为随文本宽度)*/
/*margin-right:8px(设置li文本之间的间隔) display:inline(变成行内元素,也就是把li文本列变成行*/
例如:<style>
.container{text-align:center;}
.containerul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
3. 设置 position:relative和 left:50%:利用 相对定位的方式,将元素向左偏移 50%,即达到居中的目的
方法三:通过给父元素设置 float,然后给父元素设置 position:relative和 left:50%,子元素设置 position:relative和 left: -50%来实现水平居中。
我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。
代码如下:
<body>
<divclass="container">
<ul>
<li><a href="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">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%;
}
.containerli{float:left;display:inline;margin-right:8px;}
</style>
先给div设置float:left;让它水平在左边;left:50%;右移到中间(要知道这里的中间是指div的最左边线,此时是在水平最中间,而不是div中心部分在中间,在这给它做个标记叫 |);再看ul(假设他里面的内容长度为
- -两条线这么长,还记得刚才我们做的标记 | 么?此时ul的内容是 |- -,在中心的右边),给ul设置left:-50%,指的是让它向左移动他长度的一半,然后后面他里面的内容,,也就是li , 就刚好是在水平中间了,既-|-;
垂直居中设置
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height:该元素的高度,line-height:顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。line-height与font-size的计算值之差,在CSS中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。
父元素高度确定的多行文本、图片等的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置vertical-align:middle。
css 中有一个用于竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:
html代码:
<body>
<table><tbody><tr><tdclass="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none除外)设置以下 2 个句之一:
1. position : absolute
2. float: left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。
如下面的代码,小伙伴们都知道a 标签是 行内元素,所以设置它的 width是 没有效果的,但是设置为 position:absolute以后,就可以了。
- HTML学习笔记(3)
- HTML学习笔记3
- HTML&JS 笔记(3)
- html学习笔记(3)
- Html学习笔记3
- Html学习笔记3
- 笔记 - 3、HTML - 超链接
- html学习笔记3
- Html笔记 3
- 前端 Html笔记3
- 笔记 3 :HTML
- HTML笔记【3】
- HTML学习笔记3
- HTML笔记3
- HTML学习笔记<3>
- html学习笔记3
- 笔记3--html基础知识
- HTML学习笔记--3
- gitlab使用
- C++ 模板的编译与链接
- React-----form(表单)
- 服务器(5)--搭建Solr集群+搭建Zookeeper集群(下篇)
- 排序算法之--选择排序
- HTML笔记3
- Linux学习笔记 --Firewalld
- 2017 计蒜之道 初赛 第六场 微软大楼设计方案(中等)
- Java基础教程3-Java中注释写法
- 用AJAX与后台进行交互
- 七层总结
- 高斯模糊算法
- 深入探究connect函数
- vector的复制