HTML与CSS学习 demo8

HTML与CSS学习

这篇文章主要讲了定位，隐藏，精灵图，字体图标，CSS三角，鼠标样式，表单样式，vertical-align属性，溢出部分省略号显示和一些布局技巧
这篇笔记东西比较多也比较杂，希望以后能认真看完
这篇笔记是初学者写下的笔记，如有错误，欢迎前来指正

CSS定位

• 实例：例如固定在屏幕两边的模块，或者是在盒子上显示的小模块

• 定位，把盒子定在某个位置

• 定位 = 定位模式 + 边偏移

定位模式

• 语法：

div {
   
    position: static | relative | absolute | fixed ;
}

值	描述
static	静态定位 默认值
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位 (static)

• 默认值，无定位 (标准流)

相对定位 (relative)

• 移动位置时，是根据它原来的位置来移动的
• 和浮动不一样，原来的位置仍然占有，后面的盒子依然以标准流的方式对待它 (保留原来位置，标准流)
• 经常和绝对定位一起使用

绝对定位 (absolute)

• 移动位置时，根据他的父元素的位置来移动
• 没有父元素或父元素没有定位，以浏览器为准
• 如果父级元素有定位(除了静态定位)，则会以最近一级带有定位的父级元素为准
• 例如：父元素没有定位，但爷爷元素有定位，那么定位会以爷爷元素为准
• 绝对定位不再占用原来的位置

子绝父相

• 子绝父相：子元素用绝对定位，父盒子用相对定位来约束子元素定位(并且保留原来位置，不会影响布局)

固定定位 (fixed)

• 不论页面如何滚动，这个元素一直在这

• 以浏览器的可视窗口作为坐标轴

• 固定定位不占用原来的位置

• 固定定位可以以版心对齐 (适用返回顶部的小模块)

  • 先左对齐，然后left: 50%;
  • 然后在用margin走版心宽度的一半

粘性定位 (sticky)

• 使用场景：在某一位置开始变成固定定位
• 语法规范：

div {
   
    position: sticky;
    top: 10px;
}

• 以可视窗口作为坐标轴
• 占有原来的位置
• 必须添加top、left、right、bottom其中一个
  • 例：top: 0;距离上沿0的时候开始变成固定定位

边偏移

值	描述
top	到父元素上边线的距离
bottom	到父元素下边线的距离
left	到父元素左边线的距离
right	到父元素右边线的距离

• 一个盒子既有left属性又有right属性 默认执行left属性(top和bottom默认执行top)

定位叠放次序 (z-index)

• 使用定位时，出现盒子层叠的情况，用z-index来控制摆放次序
• 语法规范：

div {
   
    z-index: auto (默认值) | 正整数 | 0 | 负整数;
}

• 数值越大，盒子越靠上
• auto或者数值相同，后来者居上

定位的拓展

绝对定位水平居中

• 绝对定位的盒子居中不能用margin: 0 auto;水平居中
• 解决办法：left: 50%; margin-left: 定位盒子宽度的一半;

定位特殊特性

• 绝对定位和固定定位和浮动类似
  1. 可以设置高度和宽度
  2. 块元素加定位，不给大小的话默认是内容的大小
  3. 脱离标准流的盒子不会触发外边距合并的问题(塌陷)

定位会完全压住盒子里面的内容

• 浮动只会压住下面标准流的盒子，但不会压住标准流里面的文字/图片

  • 浮动最早是做文字环绕效果的，所以文字不会挡住文字

• 绝对定位 (固定定位) 会完全压住盒子里面的内容

元素的显示与隐藏

• 让一个元素显示或隐藏

display 隐藏

• 语法规范：

div {
   
    display: none | block;
}

• none隐藏元素

• block除了可以转换成块元素还可以显示元素

• 注意：隐藏后的元素不占用原来的位置

visibility 可见性

• 语法规范：

div {
   
    visibility: visible | hidden;
}

• visible 可视，hidden隐藏

• 不同点：隐藏，但保留位置

overflow 溢出部分隐藏

• 对溢出部分进行管理
• 语法规范：

div {
   
    overflow: visible | auto | hidden | scroll;
}

• visible 默认值 超出的部分显示出来

• auto 在需要的时候添加滚动条

• hidden 把多出来的部分隐藏

• scroll 一直显示滚动条

• 如果有用定位的盒子，慎用overflow: hidden，因为会隐藏超出的部分

精灵图

• 很多小图片会增多服务器请求次数，为了减少请求次数 --> css精灵技术

精灵技术使用 (sprite)

• 针对背景图片使用
• 使用的属性：背景图片的位置 (background-position)
• 网页中的坐标和数学里的不一样，所以一般情况下都是网上往左移动，所以数值都是负值

字体图标 (iconfont)

• 展示的是图标，但本质是一种字体

• 优点：比精灵图要小，可以灵活改变颜色，兼容性强

• 字体图标库下载icomoon 阿里iconfont

• 把fonts文件夹复制到网页根目录下

• 使用：

<!-- 在下载的压缩包里的style.css文件里复制 @font-face声明 -->
<style>
@font-face {
    
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?dka4r');
  src:  url('fonts/icomoon.eot?dka4r#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?dka4r') format('truetype'),
    url('fonts/icomoon.woff?dka4r') format('woff'),
    url('fonts/icomoon.svg?dka4r#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;