CSS复习整理

元素转化

行内元素转化块级元素
- display：block
块级元素转换为行内元素
- display：inline
转换为行内块元素（一行可以放多个可以设置宽高）
- display：inline-block

单行文字垂直居中：让文字行高等于盒子的高度

行内元素不可以设置宽高，但是可以设置左右padding、左右margin

背景图片

1	background-image: url(images/logo.png);

background-repeat：no-repeat 不平铺
background-position: 方位名词

/* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
          /* background-position: center right; */
          /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
          /* background-position: right; */
          /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
          background-position: top;
      }

            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
          /* background-position: 20px 50px; */

背景图片固定（实现视差滚动）
- background-attachment：scoll | fixed
背景复合写法：
- background: 背景颜色背景图片地址背景平铺背景图片滚动背景图片位置
背景透明：
- /* background: rgba(0, 0, 0, 0.3); */
- background: rgba(0, 0, 0, .3); alpha透明度

CSS三大特性：

层叠性：解决样式冲突：就近原则后来者居上
- 样式不冲突不层叠
继承性：子标签会继承父标签的某些样式（text- font- line- 这些元素开头或者color）
优先级
- 根据权重复合选择器权重叠加
- 优先级排序:!important>行内样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>继承

盒子模型:

边框(border):
- border：border-width border-style （常用：solid实线 dashed：虚线） boder-color
- 简写：如： border：1px solid red 没有顺序
- border-top(…)
- border-collapse 合并相邻边框
- 边框会影响盒子实际大小
内边距（padding）：
- padding(left…)
  - padding:5px 一个值上下左右都有5像素内边距
  - padding:5px 10px 两个值上下内边距5像素左右10px
  - padding:5px 10px 20px 三个值上内边距5px 左右10px 下内边距20px
  - padding:5px 10px 20px 30px 四个值上右下左
- 内边距会影响盒子实际大小 width height 减去内边距大小
  - CSS3中使用 box-sizing:box-border padding就不会影响
- 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子的大小
外边距(margin)
- margin(left…)
- margin 简写与padding类似
- 让块级盒子水平居中:
  - 盒子必须指定了宽度
  - margin: 0 auto
- 行内元素或者行内块元素水平居中给其父元素添加text-align:center
- 嵌套块元素垂直外边距的塌陷: 对于两个嵌套关系(父子关系)块元素父元素有上外边距同时子元素也有上外边距父元素会他先较大的外边距值
  - 解决方案:
    - 为父元素定义上边框
    - 为父元素定义上内边距
    - 为父元素添加overflow:hidden
    - 子元素绝对定位
    - 子元素转化行内块级元素(要宽高)
- margin负值: https://zhuanlan.zhihu.com/p/25892372
- 清除内外边距:*{ margin:0; padding:0 }
  - 行内元素尽量只设置左右内外边距,不要设置上下内外边距但是转换为块级和行内块元素就可以
- 圆角边框
  - border-radius:length
    - radius原理 (椭)圆与边框的交集形成圆角效果 (数值越大弧度越明显)
    - 圆形:高度宽度一半
    - 圆形:高度宽度一半圆角矩形:设置为高度的一半
    - border-radius: 10px 15px 20px 16px
- 盒子阴影
  - box-shadow:必写:h-shadow(影子在X轴) 必写:v-shadow(影子在Y轴) blur(模糊距离虚实) spread(阴影尺寸) color(影子颜色) inset(外部阴影改为内部阴影)
  - 通过div:hover{} 实现鼠标放上去显示
- text-shadow 文字阴影

浮动

标准流(普通流/文档流):最基本的布局方式
- 标签按照默认规定好的默认方式排列
网页布局第一准则:
- 多个快级元素纵向排列找标准流,多个块级元素横向排列找浮动
浮动用于创建浮动框将其移动到一边知道左边缘或者右边缘以及包含块或另一个浮动框的边缘
浮动的元素不会压住下面标准流的文字(图片):浮动一开始是用来做文字环绕效果
语法:选择器:{ float:属性值(none left right) }
特性:
- 浮动元素会脱离标准流(脱标)
  - 托体标准普通流的控制(浮) 移动到指定位置(动)
  - 浮动的盒子不再保留原来的位置
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素相似的特性
  - 如果行内元素有了浮动那么不需要转换块级/行内块就可以给w/h
  - 如果块级盒子没有给宽度那么宽度根据内容
- 浮动元素经常和标准流父级搭配使用
- 浮动盒子只会影响后面标准流不会影响前面标准流
- 清除浮动:
  - 为什么要清除: 很多情况下父盒子不方便给高度子盒子浮动不占有位置, 最后父级盒子高度为0时,会影响下面的标准流
  - 清除浮动策略:闭合浮动
  - 语法:
    - 额外标签法:在浮动元素末尾添加一个空的标签
      缺点:添加许多无意义标签结构化较差新添加元素必须是块级
    - 父级添加overflow:hidden(auto scroll)缺点:溢出隐藏
    - ::after伪元素法给父元素::after多类名额外标签法的升级版但是没有增加标签让结构更简单
    - 双伪元素清除浮动
      - .clearfix:before,.clearfix:after{content:”” ; display table} .clearfix:after{ clear:both } .clearfix{*zoom:1}(低版本兼容)代码简洁

定位:

定位组成: 定位模式+边偏移
- 定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置
定位模式: static relative absolute fixed
相对定位(relative):
- 是相对于自身原来的位置移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子依然以标准流的方式对待它( 不脱标)
- 典型应用:做绝对定位的父亲
绝对定位(absolute):
- 元素在移动时,是相对于他的祖先元素来说(拼爹)
- 特点:
  - 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
  - 如果祖先元素有定位(相对绝对固定) 则以最近一级的有定位祖先元素为参考点移动位置
  - 绝对定位不占用原来的位置脱标
- 子绝父相
  - 因为父级需要占有位置, 因此相对定位子盒子不需要占有位置绝对定位
  - 并不绝对有可能会遇到子绝父绝
固定定位(fixed)
- 固定于浏览器可视区的位置
- 特点:
  - 以浏览器的可视窗口为参照点移动元素
    - 跟父元素没有任何关系
    - 不跟随滚动条滚动
  - 固定定位不占有原来的位置
    - 可以看作特殊的绝对定位
- 固定定位一个小技巧: 固定在版心右侧位置
  - 让固定定位的盒子 left : 50% 走到浏览器可视区(版心)的一半位置
  - 让固定定位的盒子 margin-left 版心宽度的一半距离, 多走版心宽度的一般位置
粘性定位(sticky)
- 特点
  - 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  - 粘性定位占有原来的位置(相对定位特点)
  - 必须添加top left right bottom 其中一个才有效
定位的叠放顺序:z-index : 数值可以是正整数负整数 0 数值越高越靠上默认是auto
- 如果属性值相同, 按照书写顺序后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index
加了绝对定位的盒子不能通过margin:0 auto水平居中
- 实现水平居中
  - left 父容器宽度的一半
  - margin-left:-100px 让盒子向左移动自身宽度的一半
- 垂直居中:
  - top 父容器高度的一半
  - margin-top:-100px让盒子向上移动自身宽度的一半
绝对定位和固定定位也和浮动类似:
- 1.行内元素添加绝对或者固定定位可以直接设置宽高
- 2.块级元素添加绝对或者固定定位如果不给宽高默认大小是内容的大小
脱标的盒子不会触发外边距塌陷
绝对定位(固定定位)会压住标准流所有的内容

显示与隐藏

display:none:隐藏对象
display:block:显示对象
display隐藏元素后不再占有原来的位置

visibility可见性
visibility:hidden 元素可观
visibility:visible 元素可视
visibility隐藏元素后,继续占有原来的位置

overflow 溢出(visible auto(溢出才显示滚动条) hidden scroll(不溢出也显示滚动条) )
有定位的盒子慎用隐藏

CSS高级技巧

精灵图(雪碧图sprites):
- 精灵技术目的:为了有效减少服务器接受和发送请求的次数,提高页面的加载速度
- 使用精灵图核心
  - 将多个小背景的图片整合到一张大图中
  - 移动背景图片位置 background-position
  - 移动的距离就是这个目标图片的x和y坐标注意网页中的坐标有所不同
  - 因为一般情况下都是往上往左移动所以数值是负值(x轴右边走是正值,左边走是负值,y轴同理)
字体图标:结构和样式比较简单的小图标用字体图标https://icomoon.io

CSS三角制作

利用border彼此叠加特性
- 主要代码: border: 5px solid transparent; border-left-color: pink;是制作一个指向右边的三角

CSS三角强化

width: 0; height: 0;
           /* 把上边框宽度调大 */
          /* border-top: 100px solid transparent;
          border-right: 50px solid skyblue; */
          /* 左边和下边的边框宽度设置为0 */
          /* border-bottom: 0 solid blue;
          border-left: 0 solid green; */
         /* 1.只保留右边的边框有颜色 */
         border-color: transparent red transparent transparent;
          /* 2. 样式都是solid */
          border-style: solid;
          /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
          border-width: 100px 50px 0 0 ;

CSS用户界面样式:
- 鼠标样式cursor
  - {cursor:pointer(default move text not-allowed)}
- 轮廓线outline
  - outline:none
- 防止文本域(textarea)拖拽
  - resize:none
vertical-align :经常用于设置图片或者表单(行内块元素)和文字垂直对齐
- 用于设置一个元素的垂直对齐方式但是只针对于行内元素行内块元素
- 语法:vertical-align:baseline | top(顶部) | middle(中线) | bottom(底部)
- 应用:解决图片底侧有空白缝隙
  - 原因是行内块元素会和文字基线对齐
  - 解决:给图片添加vertical-align:top | middle | bottom 等
  - 或者把图片转换为块级元素 display:block
溢出文字省略号显示
单行文本溢出显示省略号
- white-space:nowrap 如果文字显示不开强制一行显示
- 超出的部分要隐藏
- - overflow:hidden
- 溢出时用省略号显示
- - text-overflow:ellipsis
多行文本溢出显示省略号由于兼容性 webkit内核使用
- display:-webkit-box -webkit-line-clamp:2 /行数 -webkit-box-orient:vertical 排列方式
margin负值运用
- 边框问题:给margin-left:-()px 压住相邻盒子边框
- 鼠标经过某个盒子的时候提高当前盒子的层级(position:relative 如果盒子有了定位z-index:)
文字围绕技巧:
- 运用浮动元素不会压住文字的特性