[学习笔记] 静态网页开发基础之浮动

# 学习 # · 2020-04-17

网页布局

1、常见的网页布局:

(1)网站导航:包括网站logo,导航菜单,及其他信息。

(2)网页主体内容:是网页上要呈现给浏览者的内容。

(3)网站版权部分:包括网站声明,相关链接。

2、标准文档流:是指元素根据块元素或行内元素的特性按从左到右,从上到下的方式自然排列。


display属性

1、标准文档流有两种元素,一种是以<div>为代表的块级元素,还有一种是以<span>为代表的内联元素。

(1)块级元素(block):<h1>…<h6><p><div>、列表等。

(2)内联元素(inline):<span><a><img><strong>等。

(3)内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。

2、display属性:

(1)block:块级元素的默认值。

(2)inline:行内元素的默认值。

(3)inline-block:行内块元素。

(4)none:设置元素不会被显示。

3、display特性:

(1)块级元素与行级元素的转变。

(2)控制块元素排到一行。

(3)控制元素的显示和隐藏。


浮动概述

1、float属性:

(1)left:元素向左移动。

(2)right:元素向右移动。

(3)none:默认值。元素不浮动,并会显示在其文本出现的位置。


清除浮动

1、clear属性:

(1)left:在左侧不允许浮动元素。

(2)right:在右侧不允许浮动元素。

(3)both:在左,右两侧不允许浮动元素。

(4)none:默认值,允许浮动元素出现在两侧。

2、解决父级边框塌陷的方法:

(1)浮动元素后面加空div:空div会造成HTML代码冗余。

(2)设置父元素的高度:元素固定高会降低元素可扩展。

#father{
    height:300px;
}

(3)父级添加overflow属性:有下拉列表框的场景不能用。

#father{
      overflow:hidden;
}

(4)父级添加伪类after:推荐使用。

.clear:after{
    content:"";/*在clear类后面添加内容为空*/
    display:block;
    clear:both;
}

3、overflow属性的常见值:

(1)visible:默认值,内容不会被修剪,会呈现在盒子之外。

(2)hidden:内容会被修剪,并且其余内容是不可见的。

(3)scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。

(4)auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。


inline-block和浮动的区别

1、优点:

(1)inline-block可以让元素排在一行,并且支持高度和宽度,代码实现起来方便,添加该属性的元 素 在标准文档流中,不需要清除浮动。

(2)float可以让元素排在一行并且支持宽度和高度,可以决定排列方向。

2、缺点:

(1)inline-block位置方向不可控制,会解析空格。

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/264/

评论