关于静态页面的知识经验

关于静态页面的知识经验

一、清除浮动

1、 给父级元素设高

2、clear语法：

选择器{clear：属性值} clear：清除

属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

3、额外标签法（隔墙法）

通过在浮动元素末尾添加一个空的标签，例如：

<div style="clear:both"></div>或者其他标签（br）即可。

4、父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll 都可以实现

5、使用after伪类元素清除浮动

 ：after方式为空元素额外标签法的升级版

二、文字属性

三、背景图

background-image   背景图
background-repeat:repeat/no-repeat  是否平铺
background-color     背景色
background-position  定位
repeat   默认平
repeat-X  水平重复
repeat-Y  垂直重复

四、定位

• absolute
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• fixed
  生成绝对定位的元素，相对于浏览器窗口进行定位。
  元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative
  生成相对定位的元素，相对于其正常位置进行定位。
  因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
• static
  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit
  规定应该从父元素继承 position 属性的值。

五、伸缩盒子

1.伸缩盒子

父盒子设置 display:flex;属性以后，默认横向的是主轴，纵向的是侧轴，子元素默认在主轴上横向排列。
2.justify-content

justify-content是设置子元素再主轴上的对齐方式：
3.align-items

align-items是设置子元素再侧轴上的对齐方式：
4.flex-direction
flex-direction:row;默认横向是主轴，竖向是侧轴，如果设置flex-direction:column;主轴和侧轴的方向是互换了（1）必要元素：

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

（2）各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式 flex-flow: cloumn wrap

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大