css基础2

标准流（normalflow）

 

◆元素默认的显示方式都是按照标准流的方式显示
◆块级元素默认独占一行显示===》标准流显示方式
◆行内元素在一行上显示===》    标准流的显示方式

 

 浮动（float）

 

◆可以让块级元素在一行显示。
   ◆设置浮动后该元素不占位置（脱标）
 ◆可以实现模式转化
 ◆设置了浮动的元素，该元素会影响其后面的元素

注意：
 ◆让块级元素在一行上显示就使用浮动！
 ◆如果要实现模式转换，请使用display。

 

◆浮动最初的作用：
    ☞解决文字图片环绕效果。  【包裹性】
     ◆文字不会受浮动的影响。

关于布局：  圣杯布局  双飞翼布局    流式布局

 

 清除浮动

清除浮动指的是：清除浮动对页面布局造成的影响。

◆父盒子没有固定高度【必须条件】
  ◆父盒子中的所有子盒子都设置了浮动【必须条件】

清除浮动的方式：

clear: left| right| both

给没有高度的父元素设置overflow:hidden;

注意：
◆如果父元素中有定位的元素，最好不要使用 overflow：hidden;

 

◆使用伪元素清除浮动

 

 

定位：

体现的是元素之间的层级关系。

 

 

 

定位作用：
 ◆使用定位的方式实现移动元素

 

定位分类：
 ☞静态定位（static）
 ☞绝对定位
 ☞相对定位
 ☞固定定位

静态定位

position: static;  ===> 静态定位

◆静态定位==》标准流下元素的显示方式
◆静态定位不能实现移动元素位置。

绝对定位

position: absolute;  ==>绝对定位的元素

绝对定位的元素定位特点：
 ◆如果一个元素设置了绝对定位，如果其父元素没有设置定位，那么该绝对定位的元素是以 浏览器（body）左上角为基准设置定位；如果该绝对定位的父元素设置了除静态定位以外的其他定位，那么该绝对定位的元素会以父元素的左上角为基准设置定位。

 ◆绝对定位的元素不占位置
 ◆绝对定位的元素脱标
 ◆绝定位可以实现模式转化
  绝对定位：  盒子压盒子的效果。

 

相对定位

 position: relative；   ===》 相对定位

 

◆相对定位的元素定位特点：

☞设置了相对定位的元素只能以相对自己位置设置定位。
  ☞相对定位的元素没有脱标，占位置
☞相对定位不能实现元素的模式转换
  ☞子绝父相

 

 

 

 

固定定位：

position:fixed;   ===>    固定定位

 

◆固定定位的元素只看浏览器左上角为基准设置定位
◆固定定位的元素脱标不占位置
◆固定定位可以实现模式转换

 

绝对定位的元素居中显示：

盒子居中显示特点：margin: 0  auto;   ===>标准流下的盒子居中显示

绝对定位的盒子如何居中显示：
◆首先通过left移动父元素宽度的一般  left：50%;
◆通过设置margin-left: - 元素自己宽度一半;

 

 

 

标签包含规范

◆段落标签中不能放置标题标签

◆段落标签中不能包含div

◆段落标签中不能包含列表

◆行内元素最好不要包含其他元素【行内元素可以包含行内元素】

 

网页布局规范,规避脱标流

 

☞网页布局过程中优先考虑标准流布局。

 

 ☞然后考虑使用浮动

 

 ☞最后使用定位

 

 ☞元素模式转换的过程中，必须使用display。

 

◆vertical-align 与行高配合实现图片垂直居中效果。

 

 

 

页面元素隐藏方式：

◆overflow：hidden;   将超出部分隐藏
 ◆display：none;     元素隐藏   不占位置
  display： block;    元素显示

◆visibility:hidden;   元素隐藏      占位置

 

Logo内容移除方式：

 

给logo设置text-indent: -2000px； 

 

◆paddding配合overflow：hidden实现移除内容