当前位置:Gxlcms > css > 如何用CSS快速布局—布局元素详细

如何用CSS快速布局—布局元素详细

时间:2021-07-01 10:21:17 帮助过:72人阅读

要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错。这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素、盒模型、准确定位、元素对齐、样式继承。下一篇则重点描述快速布局思路。

一、什么是块级元素和内联元素

1,块级元素:

display:block表现出来的特点是折行的, 一般来说可以包含块级元素和内联元素;

例外:

  P 元素,只能包含内联元素,而不能包含块级元素。

  "form"这个块元素比较特殊,它只能用来容纳其他块元素。

2,内联元素:

display:inline表现出来是不换行的,内部只能包含内联元素。

像“span”这样的行内元素,没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。 其实你需要知道的行内元素就是 span 和 a

3,浮动元素自动设置为"block"元素

不管是block还是inline定义了浮动之后,可以定义高度,宽度.

<a>正常情况下是不能定义高度的。宽度倒是可以定义,但是对鼠标有反应的只有文字部分

如果加上float:left的话,能定义高宽,整块对鼠标有反应 但是 它是横向菜单,

设置display:inline;这个属性能够修复著名的IE双倍浮动边界问题。↓(貌似这个问题只存在于IE6?)

http://www.zzzszy.com/a/2016/0927/896160.html

块元素(block element)内联元素(inline element)

* address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* p - 常用块级容易,也是css layout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form- 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

* a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code - 计算机代码(在引用源码的时候需要)

* dfn - 定义字段

* em - 强调

* font - 字体设定(不推荐)

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span - 常用内联容器,定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

4,可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button - 按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块(map)

* object - object对象

* script - 客户端脚本

5,display:inline-block;


维持块级元素可设置宽高,但又能像内联元素一样和其他内联元素置于一行。

二、盒模型

如何用CSS快速布局— 布局元素详细

三、如何定位——相对定位、绝对定位、浮动


相对定位:指相对于文档流中的其他已定义的元素位置进行定位。

static(默认值):如果使用默认值,在CSS中为元素定义的top,left,right,bottom.z-index都不会生效。

relative:相对元素本身进行移动。

绝对定位:会脱离正常的文档流,不再占据空间。

absolute:相对一个不为static的父元素进行绝对定位,如果不指定父元素的position,absolute将相对整个html文档进行绝对定位。会优先显示于正常文档流定位元素以及float元素。

fixed:相对浏览器窗口进行定位,不论网页如何滚动,该元素始终停留在屏幕的某个位置上。


浮动:float

脱离文档流——相对父元素大小调整位置。如果父元素宽度为100,两个子元素宽度分别为200,则依旧显示为上下层次,而不是左右。

外盒子——会优先显示于正常文档流定位元素。内盒子——弱于块级元素,强于内联元素

重点!定位元素与文档流显示关系

1,正常文档流之间的内外部盒子显示关系:

代码结构如下(粗略展示)<p>黄色块正方形
  <p>红色块</p>  <p>红色块</p></p><p>蓝色块正方形</p>

黄色和蓝色为外部文档流,红色的为黄色块的两个内部文档流。

如何用CSS快速布局— 布局元素详细


外部盒子为外部文档流,内部盒子有自己的文档流,互不干扰,但(非自身父元素的)外部文档流会优先显示于内部文档流。

2,内部盒子浮动元素和内部文档流元素关系:

  • 内联元素和浮动元素的优先级:

正常文档流中,<a>内联元素和块级元素各占一行。

如何用CSS快速布局— 布局元素详细

然而当设置为浮动元素后,文档流内联元素让位于浮动元素(<a>先后于<p>定义结果一样)。如下:

如何用CSS快速布局— 布局元素详细

还会出现文字包绕现象:

如何用CSS快速布局— 布局元素详细

  • 块级元素和浮动元素优先级

当块级元素先于浮动元素定义时,浮动元素换行排后。当浮动元素先定义时,脱离文档流,不对正常文档流的块级元素造成影响。

3,内部盒子浮动元素和外部文档流内部元素关系:

浮动元素覆盖外部文档流元素,但不占据空间。

如何用CSS快速布局— 布局元素详细

绿色块和图片是蓝色块的内部元素,可见,块级元素照正常文档流显示,但内联元素img还是会让步于浮动元素,即使是外部文档流的浮动元素。

如何用CSS快速布局— 布局元素详细

4,兄弟元素绝对定位和浮动的优先关系

蓝色块为黄色内部块的absolute定位元素,且先于红色块设置p。红色块为Float定位元素,被absolute覆盖。

如何用CSS快速布局— 布局元素详细

5,绝对定位和文档流元素的优先关系&相对定位元素的优先关系

绝对定位position:absolute。

1,相对一个不为static的父元素进行绝对定位,如果不指定父元素的position,absolute将相对整个html文档进行绝对定位。

2,如果没有设置top\left\bottom\right,则其顶端和左侧将与原文档流位置一致(即跟没有设置position一样),但又会覆盖掉外部文档流内部浮动元素多出部分。

下图为蓝色块设置position:absolute;

如何用CSS快速布局— 布局元素详细 (注:黄色块(内含红色和绿色子元素)和蓝色块(内含绿色子元素)是兄弟元素)

调换下顺序,蓝色块首先设置p,position为absolute。黄色块没设置position,即默认static。因为脱离了文档流,absolute元素优先显示。

如何用CSS快速布局— 布局元素详细

设置黄色块position为relative,黄色块覆盖绝对定位元素。即当相对定位元素后于绝对定位元素定位时,相对定位元素优先显示。

如何用CSS快速布局— 布局元素详细

总结:

1,正常文档流下,外部盒子优先显示于先定义元素的内盒子(如果超出会被覆盖)。块级元素和内联元素不会在同一行。

如何用CSS快速布局— 布局元素详细

2,对内外部文档流,浮动元素脱离文档流,对于先定义的元素按正常文档流显示(让位块级,挤开内联),对后定义的元素不造成布局影响,但却影响正常文档流的内联元素展示,表现为内联元素依旧会被浮动元素“挤开”(不论哪里的内联元素,都不会被覆盖在浮动元素之下)

如何用CSS快速布局— 布局元素详细 如何用CSS快速布局— 布局元素详细

3,绝对定位元素优先显示于浮动元素。

如何用CSS快速布局— 布局元素详细

4,不设置具体值的绝对定位元素会按正常文档流排列,但脱离文档流,不对后定义元素造成影响。

如何用CSS快速布局— 布局元素详细

5,如果兄弟元素设置了position:relative;当先于绝对定位元素定义时,绝对定位元素优先显示于相对定位元素。

当后于绝对定位元素定义时,相对定位元素优先显示于绝对定位元素。

如何用CSS快速布局— 布局元素详细 如何用CSS快速布局— 布局元素详细

四、如何居中对齐

水平居中:

1.实现行内元素的居中。方法:在行内元素外面的块元素的样式中添加:text-align:center;

2.实现块级元素的水平居中。

  方法一:margin:0 auto;

注意:如果块级元素是body的直接子元素,不设置宽,则默认100%,看不出效果;不设置高,且p中没有内容,则高度默认为0。因此,一定要同时设置块级元素的宽和高,这样才能看出来效果。对于在一个p中的另一个p希望居中,也可以使用这个方式,因为这时的margin是相对于其父元素而言的。

  

  方法二:使用绝对定位和负边距。

    position:absolute;

    left:50%; ——相对于父元素向左移动50%宽度

    margin-left:-50px; ——移回自身宽度的一半

垂直居中

1.行内元素的垂直居中

  方法一:让字体垂直居中,line-height设置为父元素高度。

  方法二:设置padding让其垂直居中。

  方法三:父元素设置line-height,行内元素设置vertical-align:middle。

2.块级元素的垂直居中。

   方法一:使用绝对定位和负边距。

  方法二:在父元素中添加display:flex;align-items:center;即可实现竖直居中。

实现水平和垂直居中

  方法一:使用绝对定位和负边距

  方法二:使用display:flex

      在父元素的样式中添加display:flex;align-items:center实现竖直居中,justify-content:center;实现水平居中

  方法三:同样使用display:flex.在父元素中设置display:flex;在子元素中设置margin:auto。

  方法四:使用css3属性——translate()变形函数

      position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);

五、关于样式继承

盒模型样式是不可继承的,例如width、height(宽高)、border(边框)、margin(边距)、padding(补白)和背景等

vertical-align不可继承

可继承属性

color

cursor

direction

font

letter-spacing

line-height

list-style

text-align

text-indent

text-shadow

text-transform

whitewhite-space

word-break

word-spacing

word-wrap

writing-mode

更多如何用CSS快速布局— 布局元素详细 相关文章请关注PHP中文网!

人气教程排行