阡陌的博客

# div+css网页布局

# 传统布局

# float布局

# float语法

float: left | right | none
1

# float 的作用

一般用作块元素的水平布局。

为什么不使用 inline-block进行水平排版？

因为 inline-block 图文排版时，会引发一些问题，所以都使用 float 代替 inline-block 进行块元素的水平布局。

# float 原理

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

# float 产生的问题

  1. 父元素高度坍塌

# 清除浮动的几种方式

  1. 清除浮动 clear:both
  2. 使用 overflow：hidden或者 auto 产生 BFC

# float布局注意点

注意 float 属性对于其他属性的影响

# position布局

# position 语法

position：absolute | relative | fixed | sticky | static

absolute：脱离文档流，定位参考点是最近的非 static元素 ，通常和relative搭配使用。
relative：不脱离文档流，定位参考点是 未添加定位属性时的位置
fixed:脱离文档流，定位参考点是 viewport
sticky:不脱离文档流，粘性定位可以被认为是相对定位和固定定位的混合，定位参考点最近的滚动祖先（overflow的值为hidden, scroll, auto, 或 overlay时）
static：postion 的默认值，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
1
2
3
4
5
6
7
8

# postion的作用

一般用于垂悬式的布局，通过 position 的属性确定元素的定位参考点，left|top|right|bottom 等确定偏移量。

# position 布局的注意点

注意使用定位属性，对应的定位参考点

# Flex布局

# 网页布局注意事项

  1. 先对网页进行分析，划分方块

    先水平再垂直

  2. 选择器的优先级及精确定位需要设置样式的标签

    选择器的优先级：!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

    关于 css 的优先级更多可参看文章CSS 样式优先级 (opens new window)

  3. 浮动属性对于其他元素的影响

    若有影响，则需要清除浮动。

  4. 使用定位属性时，精确找到定位参考点

    注意 absolute，relative，fixed定位时的定位参考点。

# 常见布局实现

# 水平居中

  1. 行内元素

    text-align:center
line-height:父元素高
    1
    2

  2. 块状元素

    1. 非绝对定位元素

      margin：0 auto;
      1

    2. 绝对定位元素

      position:absolute;
left: 50%;
transform: translateX(-50%);
      1
      2
      3

    3. flex

      display:flex;
justify-content:center;
      1
      2

# 垂直居中

# CSS3过渡和动画

# 浏览器前缀

# 浏览器的内核

内核名称 前缀 代表浏览器
Gecko -moz- 火狐浏览器
Webkit -webkit- chrome,，safari ，360极速，猎豹等
Trident -ms- IE
Presto -o- opera

由于有些 CSS 属性还处于草案阶段，各浏览器厂商实现不一致，支持也不一致，所以会加浏览器前缀表示该浏览器的支持。

在实际开发中，若该属性处于草案阶段，若各浏览器厂商都支持，一般添加所要兼容的浏览器前缀（假如支持），然后再写标准的属性，如：

-moz-text-stroke:
-webkit-text-stroke:
-ms-text-stroke:
-o-text-stroke:
text-stroke:
1
2
3
4
5

# 阴影

# 文字阴影 text-shadow

# 盒子阴影 box-shadow

# 渐变

# 线性渐变 linear-gradient

# 径向渐变 radical-gradient

# 过渡

transition

# 变形 /转换

效果有平移 ，缩放 ，旋转，翻转具体的语法是：

transform：translate() | scale() | rotate() | skew()

# 动画

animation

ES6学习笔记 →