HTML相关学习笔记

HTML相关学习笔记

网页布局的本质–用css来摆放盒子，把盒子摆放到相应的位置

float

1. 普通流（标准流）
2. 浮动
3. 定位

多个块级元素横向排列找浮动，多个块级元素纵向排列找普通流

浮动特性

1. 脱离标准流的控制移动到指定位置
2. 浮动的盒子不在保留原先的位置
3. 浮动元素会具有行内块元素的特性

清除浮动

• overflow: hidden 加在父元素里面
  伪元素 ：after 加在父元素里面
  clearfix 溢出隐藏

• 实际开发过程中，我们不会直接用a而是用li包含链接li+a的做法

• a标签是行内块元素，块大小由字体决定
  li标签是块元素 大小继承父类，或直接设定

定位

• 定位模式，边偏移

• postion 属性设置

• static 静态定位

• relation 相对定位 相对自己原来的位置移动 （相对定位，不偏移。位置还在）
  absolute 绝对定位 相对于祖先元素位置移动

• 没有祖先，或祖先元素没有定位，以浏览器为准（document）

• 如果祖先元素有定位（相对，绝对，静态），则以最近一级的有定位祖先元素为参考点移动位置

• 绝对定位不再占有原先的位置（脱标）
  fixed 固定定位

• 可视窗口为参照点移动元素

• 与父元素没有关系

• 不随着滚动条滚动

• 固定定位不占有原先位置
  随着版型浮动 50% 和设置margin-left

sticky 粘性定位
相对和固定定位的混合

• 以可视窗口为参照点移动元素
• 占有原先位置
• 必须添加top left right bottom 其中一个才有效

叠放次序

z-index:

• 数值可整，可负，可为0
• 属性值相同，按照书写顺序，后来居上
• 数值后没有单位
• 只有定位的盒子才有z-index属性

绝对定位的居中对齐

不可以使用margin 0 auto
浮动 50% 设置盒子margin-lift 负盒子一半

绝对定位和固定定位也和浮动类似

• 行内元素添加绝对，固定，可以直接设置高度和宽度
• 块内元素添加绝对，固定，宽度，高度默认为内容大小
• 浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，会压住她下面的盒子，但不会压住下面的标准流盒子里面的文字（图片）
绝对(固定）会压住下面标准流所有的内容

显示隐藏

• display:none;(隐藏，并且不占有原来位置)
• display:black; 与上面相反

visibility 可见性

• visibility:hidden (隐藏，占有原来的位置)

overflow:溢出隐藏

• overflow ： auto 溢出显示滚动条，不溢出，不显示
• 定位的盒子，故意超出的部分，要慎用

精灵图

• 主要针对于背景图片使用
  移动背景图片位置可以使用background-position

• 结构简单和样式的用字体图标
  结构负责一点，样式多点 精灵图

单行文本溢出显示省略号

1. white-space：nowrap
2. overflow:hidden
3. text-overflow:ellipsis

多行文本溢出显示省略号

兼容性差

box-sizing:border-box
transition: 属性 时间 函数

• 公共样式css
• 模块化开发
• favicon 图标里面
• SEO(搜索引擎优化)
• TDK 描述，关键字
• scale 可以缩放 但是不影响其他盒子

动画

• 版心：1200
• transform 对行内标签无效