CSS —— html元素类型与居中问题详解
2016-07-25 15:05
387 查看
深刻理解盒子模型与元素类型,有助于快速确定布局方式:
一、盒子模型
从外到里:margin、border、padding、content。
关键:height与width指的是content文本区的尺寸。
二、元素类型及本质区别
1、inline:内联元素。
本质特点:默认baseline对齐,且content尺寸刚好包含文本(所以设置width、height无效),故不单独占据整行。
2、block:块元素。
本质特点:单独占据一整行,该行行高为该块元素高度。
3、inline-block:内联块元素。
本质特点:兼具inline元素与block元素的一些特点,表现为:对自身而言仍是块元素,对一整行而言,又被视为内联元素,可并排处于同一行。
三、居中问题
从元素类型考虑,且使用margin与padding:
1、对inline元素。
内联元素的整体高度只取决于总内容的高度,因而margin-top/bottom与height均无效。故使inline元素居中一般方法。
(1)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
注意:此时虽然高度被padding撑大了,但实践可知道,它在父元素中体现的高度仍然不变,可复制代码一运行。解决办法:调整父元素行高,同时合理设置设置A的数值。
2、对block元素。
(1)、margin:0 auto;
作用:自身相对于父元素水平居中。
(2)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
3、对inline-block元素。
对inline-block一般只为了使内容居中。
(1)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
不使用margin、padding时:
1、本身不为内联元素,使内容垂直居中通用方法:
设置自身height、line-height相同。
说明:关键在于理解line-height,line-height指从元素自身y=0的位置到一行底部的高度,因为行的内容本身在一行内使垂直居中的,当行高等于自身高度时,内容也就相对于自身垂直居中。
2、内联元素相对于其它内联元素的垂直对齐方式:(同样适用于内联块元素)
vertical-align:middle;
作用:设置自身在一行中的对齐方式,取值baseline、bottom、top等,因而与line-height相关。因为是同行内不同元素间的对齐方式,所以只对inline与inline-block。
3、使内容水平居中通用(非内联元素):
text-align:center;
说明:text-align指内部元素相对于自己的水平对齐方式,可取left、center等值。
代码一:
一、盒子模型
从外到里:margin、border、padding、content。
关键:height与width指的是content文本区的尺寸。
二、元素类型及本质区别
1、inline:内联元素。
本质特点:默认baseline对齐,且content尺寸刚好包含文本(所以设置width、height无效),故不单独占据整行。
2、block:块元素。
本质特点:单独占据一整行,该行行高为该块元素高度。
3、inline-block:内联块元素。
本质特点:兼具inline元素与block元素的一些特点,表现为:对自身而言仍是块元素,对一整行而言,又被视为内联元素,可并排处于同一行。
三、居中问题
从元素类型考虑,且使用margin与padding:
1、对inline元素。
内联元素的整体高度只取决于总内容的高度,因而margin-top/bottom与height均无效。故使inline元素居中一般方法。
(1)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
注意:此时虽然高度被padding撑大了,但实践可知道,它在父元素中体现的高度仍然不变,可复制代码一运行。解决办法:调整父元素行高,同时合理设置设置A的数值。
2、对block元素。
(1)、margin:0 auto;
作用:自身相对于父元素水平居中。
(2)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
3、对inline-block元素。
对inline-block一般只为了使内容居中。
(1)、padding:Apx Bpx;
作用:使内容相对于自身border居中。
不使用margin、padding时:
1、本身不为内联元素,使内容垂直居中通用方法:
设置自身height、line-height相同。
说明:关键在于理解line-height,line-height指从元素自身y=0的位置到一行底部的高度,因为行的内容本身在一行内使垂直居中的,当行高等于自身高度时,内容也就相对于自身垂直居中。
2、内联元素相对于其它内联元素的垂直对齐方式:(同样适用于内联块元素)
vertical-align:middle;
作用:设置自身在一行中的对齐方式,取值baseline、bottom、top等,因而与line-height相关。因为是同行内不同元素间的对齐方式,所以只对inline与inline-block。
3、使内容水平居中通用(非内联元素):
text-align:center;
说明:text-align指内部元素相对于自己的水平对齐方式,可取left、center等值。
代码一:
<!DOCTYPE html> <html> <head> <title>研究居中问题</title> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; height: 50px; border:1px solid black; } span{ display: inline; padding: 10px 10px; background-color: gray; } </style> </head> <body> <div> <span>你好</span> </div> </body> </html>
相关文章推荐
- css实现强制不换行/自动换行/强制换行
- VS 2010 支持CSS 3.0
- CSS水平居中,浮动水平居中,绝对定位水平居中
- js,css,image...资源访问
- CSS 基础篇、绝对有你想要
- css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- CSS中的浮动清除
- 《CSS3权威指南》——笔记4(值和单位)
- css3动画应用-音乐唱片旋转播放特效
- 值得注意的CSS属性
- css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- 原生JS中如何获取CSS属性中的值
- Div+CSS命名规范
- 《css权威指南》——笔记3(结构与层叠)
- CSS3-盒模型设计
- 设置inline-block布局造成的幺蛾子事
- CSS3 box-sizing 属性
- css实现动态进度条
- css实现百分比进度条
- HTML&CSS基础学习笔记1.17-表格的头部与尾部