css基础2

时间:2022-03-01 09:38:41

标准流(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实现移除内容