网页基本布局
网页的组成部分
网站导航:一般包括品牌 1ogo、导航菜单及一些其他信息等.
网页主体:一般包括网页呈现给浏览者的内容。。
网页底部:一般包括网站声明、版权信息和相关链接等，。
侧边栏:一般包括分类菜单及一些次要信息等。
每一个网页的组成部分都有着重要的作用，一起协作布局，就能给呈现出一个完整的网页。
标准文档流
标准文档流是指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。
块级元素(block):<h1></h1><h6></h6〉、<p〉</p〉、<div></div〉、<li></li〉等。
内联元素(inline):<span></span〉、<a></a〉、<img/〉、<strong></strong〉等。
内联标签可以包含于块级标签中，成为它的子元素。
元素布局属性
display 属性
display 属性用于指定 HTML, 标签的显示方式,display 属性的基本用法:
display:显示方式
HTML 标签常见的显示方式:
显示方式
block 元素被显示为块元素
inline 元素被显示为行内元素
inline-block 元素被显示为行内块元素，可以控制元素排到一行。元素既具有行内元素的特性，也具有块元素的特性。
none 元素不会被显示。
浮动与清除浮动
float 属性
float 属性用于定义网页元素在哪个方向浮动。
设置为浮动后，元素会脱离文档流。
没有设置浮动的文字会浮动在浮动元素周围显示，这是浮动的特殊情况。浮动的文字段落在没有设置宽度的情况下会占满一行。float 属性的基本用法:
float:浮动方向;
浮动方向 描述
left 元素向左浮动。
right 元素向右浮动。
none(默认值) 元素不浮动。
clear 属性
clear 属性用于规定哪一侧不允许其他元素浮动，用于清除浮动。
清除浮动的本质是清除浮动元素造成的影响。
可能会产生内边距、外边距显示错误的问题。
可能会影响背景图片的正常显示。
可能会影响排版问题。
clear 属性的基本用法:
clear:清除方向;
清除方向 描述
left 元素左边不允许存在浮动元素。
right 元素右边不允许存在浮动元素元素
both 左右两边不允许存在浮动元素
none(默认值) 允许浮动元素出现在元素两侧。
overflow
overflow属性用于规定当内容溢出盒子时发生的事情，如隐藏溢出部分等overflow 属性基本用法:
overflow:溢出处理方式
溢出处理方式 描述
visible(默认值) 溢出的内容不会被修剪，呈现在盒子外面。
hidden 溢出的内容会被修剪，且不可见。
scroll 溢出的内容会被修剪，且会显示滚动条以便查看其余内容。
auto 如果内容被修剪，浏览器会显示滚动条以便查看其余内容。
解决父级边框塌陷
当父盒子内的子元素为浮动、且父盒子没有固定高度时，子元素脱离文档流浮动已经无法撑起来父盒
子的边框，父盒子的边框会出现塌陷情况。
方法
设置父元素的高度。该方案简单，但限定了父元素的高度不具备弹性效果。
在浮动元素后添加空 div，结合 clear 属性清除浮动。该方案会造成 HTML 代码冗余。
在父元素中添加 overflow属性。该方案在有下拉列表框的场景中失效。
在父元素中添加 after 伪类。该方案写法复杂，但没有副作用。
inline-block 与float 的区别
inline-block 属性的特点
inline-block属性可以让元素排在一行，且支持宽度和高度，添加该属性的元素在标准文档流中。
inline-block 位置方向不可控制，元素和元素之间会解析空格。float 的特点:
float 浮动可以让元素排在一行且支持宽度和高度，可以决定排列的方向。
float 浮动以后元素脱离文档流，会对周围元素产生影响。
定位
position 属性
position 属性用于设置盒子的位置(即定位)。position 属性的基本用法:
position:定位方式
定位方式
定位方式 描述
static(默认值) 没有定位，元素按标准文档流进行布局，
relative 相对定位。
absolute 绝对定位。
fixed 固定定位。
静态定位
定位方式为默认值，表示盒子保持在原本应该在的位置，没有任何移动效果。
相对定位
relative 定位方式表示盒子相对于它在标准文档流中的默认位置为基准进行位置偏移。
设置相对定位的盒子会相对它原来的位置，通过指定偏移到达新位置。
设置相对定位的盒子仍在标准文档流中，它对父盒子和相邻盒子都没有任何影响。
设置相对定位的盒子原来的位置会被保留下来。。
相对定位一般很少自己单独使用，会配合绝对定位使用。
基本用法
position: relative;
top:偏移量
bottom:偏移量
left:偏移量
right:偏移量
偏移量
偏移量 描述
偏移量>0 top 向下偏移，left 向右偏移。
偏移量<0 top 向上偏移，left 向左偏移。
绝对定位
absolute 定位方式表示盒子以它最近的一个已经定位的祖先元素为基准进行位置偏移。
已经定位:position 属性被设置且属性值非 static。
祖先元素:从标准文档流的任意节点开始，走到跟节点，经过的所有节点都是它的祖先。
设置绝对定位的盒子会脱离标准文档流，宽度也变为仅能容纳里面的文本宽度。
设置绝对定位的盒子可以设置外边距，且不会与其他边距合并.
设置绝对定位的盒子没有设置偏移量，那么它将保持在原来的位置。
般情况下，绝对定位用在下拉菜单、弹窗等场景
基本用法
position: absolute;
固定定位
fixed 定位方式表示盒子以浏览器窗口为基准进行位置偏移。
偏移量不会随着滚动条的移动而移动。
固定定位一般用于网页两边的固定广告、返回顶部图标、吸顶导航栏等场景。
基本用法
position: fixed;
重叠层样式
z-index 属性
z-index 属性用于调整元素定位时重叠层的上下位置
基本用法
z-index:层叠顺序
网页元素透明度
opacity 属性和 filter 属性用于设置网页元素的透明度网页元素透明度的基本用法:
/** 方法1:opacity **/
opacity:a;
/**方法2:filter **/
filter:alpha(opacity=b);
常见的网页元素透明度:
透明度 描述
a a的取值范围为0~1，a越小越透明。
b b的取值范围为 0~100，b越小越透明。