清除浮动+背景+字体

CSS盒子模型样式分析：

1、盒子模型

i.          内容区域：宽度和高度 width  height

ii.         边框：border 边框宽度、样式、颜色 上下左右四个方向

iii.       外边距：margin上下左右四个方向的外边距设置

1.         塌陷现象：对于两个盒子的同一片区域进行外边距设置的时候，margin区域是会重叠的

2.         兄弟盒子之间设置距离用margin

3.         父子盒子之间用margin的问题：margin-top上边距重合问题

1）给父盒子设置边框

2）用overflow属性来进行解决

iv.       内边距：padding分为上下左右四个方向

设置盒子内容和边框的距离时候，用padding来设置

2、文档流

i.          页面内容部分区域排列方式：从左往右，从上往下排列，一个元素一个坑

3、块级元素和内联元素

i.          块级元素：符合盒子模型属性、必须独占一行

ii.         内联元素：不符合盒子模型、可以和其他内联元素共享一行

跟文本相关和跟表单相关的都是内联元素

iii.       跨级元素和内联元素互相转换：display属性：none、block、inline、inline-block

 

4、浮动（脱标）

i.          定义：元素脱离文档标准流，不受文档格式的约束，漂浮到漂浮层

ii.         脱标方式：float、绝对定位、固定定位

iii.       Float：表示元素脱离标准流后，按流式布局方式排列元素

iv.       清除浮动：1）overflow   2）设置父盒子的宽高度

 

浮动清除

1、对于css单位的整理：px、百分比、em

a)        px  主要是设置固定宽高值的单位，还包括字体

b)        %  当前元素的宽高值，根据父盒子宽高值进行百分比计算

i.          如果要实现自适应效果，则普遍使用百分比计算，响应式布局

ii.         如果要实现瀑布流效果，可以用百分比  auto

c) em  设置字体大小的，设置当前元素字体大小值的比例

 在当前元素原有的像素值上面，进行比例调整

2、clear：专门用于清除浮动

a)        细节注意：float元素浮动方式

i.          找上一个元素，上一个元素如果没有浮动呢，则贴上个元素的底边

ii.         如果上一个元素有浮动，则会贴上一个元素的左右两边

B) clear：指的是不允许当前清除浮动元素左右两边存在浮动元素

        清除浮动，不能让其他元素移动

只能做到让浮动元素不在一行，

C) 清除浮动，让父元素有高度

 

案例：导航

使用的元素：无序列表

字体属性

行高：设置文字纵向居中

超链接伪类

超链接

锚点:通过超链接，在当前页面进行定位

超链接属性target:

frameset:当前页面嵌入其他页面进行展示

不能和body标签一起用

_self  _blank  _parent  _top