标签

    • 用于将一系列元素包含进去，然后作为一系列元素的一个总控制器。如单独设置列表的背景颜色为红色，那列表文字外的区域也会变化。可以设置div的大小来控制列表的区域大小
    • div元素会另起一行。div可以看成既是行内又是块元素。取决于它包含的是什么类型元素

      标签样式

  • 背景图片background-image:url(path) 背景图片默认平铺

    • 设置平铺方式background-repeat

  • 标签内各元素居中：vertical-align:middle

    • 如<img=...><span>这是图片</span></img> img,span{vertical-align:middle;}

      字体样式font

  • 字体样式均属于font属性，其中包含很多具体的子属性 使用font-?

  • 可以一次性设置多种属性如font:粗体/斜体 字体大小/行高 字体 需要遵循顺序要求

    • family字体
    • size字体大小
    • weight字体粗细 常用：bolder粗体

      文本样式text

  • 颜色color

  • 对齐方式text-align
  • 行高line-height 行高跟标签高度一样才是居中高度的效果
  • 首行缩进text-indent 单位使用em(字母)更方便

  • 装饰text-decoration 下划线，删除线等都是该属性的值

    • 下划线：underline
    • 删除线line-through
    • none 无修饰，一般用于消除链接下划线等

      列表样式

  • 去除列表首符号：list.style:none 不会影响列表的行高，缩进等，因为这些是属于文本样式

    • circle：列表首符号变为空心圆

      颜色

  • 透明度：rgba(x,y,z,?) ?为0到1之间的小数(一位即可) 越接近1越不透明，越接近0越透明

    盒子模型

  • 一个元素实际上是由很多个盒子层层包裹组成的

  • 子元素的盒子是可以超出父元素边距的，造成子元素在父元素外面
  • box-sizing：设置盒子模型宽高计算方式
    • content-box：默认方式，即width，height只是设置content的宽高
    • border-box：设置宽高即设置整个盒子的宽高
  • image.png

margin

  • margin：外边距

    • margin:0 auto：元素在父元素中水平居中
    • 外边距主要用于调整元素的位置 有上下左右四个属性。
    • 外边距可以为负值

      border

  • border:边框 边框主要有这四个属性: 粗细(width) 样式(style实线，虚线…) 颜色(color) 圆角radius

    • border:粗细 样式 颜色 快速设置边框样式
      • 常用边框样式：solid实线
    • radius：radius有即盒子四个角到中心的距离(半径)
      • border-radius:50%/100% 标签变为圆形，常用50%，100%在一些浏览器中会进行特殊计算以取得更合适的圆形
      • 有左上，左下，右上，右下四个子属性可以单独设置
        • border-top-left-radius ：设置左上角边框的圆角样式。
        • border-top-right-radius ：设置右上角边框的圆角样式。
        • border-bottom-left-radius ：设置左下角边框的圆角样式。
        • border-bottom-right-radius ：设置右下角边框的圆角样式。

          padding

  • padding：内边距。元素边框与内容之间的部分

    • 有上下左右四个子属性可以设置

      box-shadow

  • box-shadow: 水平偏移量 竖直偏移量 阴影模糊半径 阴影颜色 [阴影扩展半径] [inset]

    • 阴影可以看成是聚拢在元素中心一点上，以该点为原点，y轴就是竖直偏移(往上是负值，往下是正值)。x轴就是水平偏移。
      • 水平偏移>0即设置上边框阴影。<0就是下边框阴影
      • 竖直偏移>0就是下边框阴影 <0就是上边框阴影
      • x与y均为0时：设置4条边框
      • 设置2条，3条的情况见百度
      • 设置4条不同样式时，使用，分隔 链接
    • inset即设置为内边框阴影 不设置inset就是默认外边框阴影
    • 阴影扩展半径：百度，一般是用于单边阴影设置后却变为双边各一部分阴影的情况

  • 2个盒子的content紧紧挨着时，设置紧挨边的外边距可能会失效，可以换种思路，设置另外一边为内边框阴影

    display

  • display可以改变盒子显示效果。有的元素是块级元素，有的盒子是行内元素，块级元素会独占一行，行内元素则可以与其他元素共处一行

    • inline行内：图片等不能转行内
    • block块
    • inline-block内联块：是块，但是可以与其他元素或块在一行；内联
    • none让元素消失，可以通过js来控制显示与消失
    • table-cell：有些类似内联块，可以让块元素共处一行。但是对于内部元素的类型没有行内块样式自由。行内块不管用时可以试试该样式
    • **fixed**弹性布局，即类似栅格自适应自动换行一样的效果

      浮动

  • 向某个方向浮动，可能也会导致向其他方向移动，挤压空白区域。

  • 对于一些文本或者盒子的居左居右样式，能使用margin，text-algin等就不要使用浮动，因为浮动元素会脱离标准文档流，不好控制
  • 浮动可以通过float或者.pull-...设置，后者与前者无差别，后者逐渐淘汰
  • clear：让一个元素的某个方向不可以有浮动元，则它在某个方向独占一块
    • 如clear：both 两侧不允许有浮动元素，则它独占一行
  • 浮动后就不会局限于原来的盒子标签内了，可能会超出盒子边距(父级边框塌陷问题)
    • 可以在漂浮元素后再加一个空的div。设置为clear:both 这样所有元素都在父div的盒子里。这种方法等同于图片中的伪类方法，
    • 伪类方法是所有解决父级边框塌陷方法中最好用的。表示在父元素中的最后增加一个空内容，并让它为块…image.png
    • 还可以使用overflow设置盒子，让子元素超出部分隐藏
    • 也可以设置父元素宽高，但是如果元素也有固定宽高，这种就有限制
  • 以下这三个分别是1：设置了三个元素内联。2：第一个图片又设置了左浮动 3：第三个图片又设置了右浮动
  • image.png
  • image.png

  • image.png

    overflow

  • 要实现x或者y轴的overflow，必须设置相应的宽/高。否则overflow不生效

  • overflow-x：设置x轴方向

  • overflow-y：设置y轴方向

  • overflow:x与y轴方向都设置

  • hidden：超出部分隐藏

  • scroll：无论是否有超出都显示滚动条
  • auto：未超出时不显示滚动条，超出时显示
  • ?:-web-scrollbar{display:none} 隐藏滚动条，但是仍可以使用鼠标进行滚动

  • 更多滚动条的设置：链接

    定位

  • 定位偏移量可以是负值。

  • 定位必须配合偏移量才有效果。只设置定位不设置偏移量仍然在原来的位置

    文档流

  • 标准文档流：可以看成是一个平铺的屏幕，各个元素不能重叠（外边距与内边距除外，边框除外，仅仅是内容不重合） 当一个元素移动，其他元素会挤占它空出的空间（即改变一个可能影响多个）

    • 但是设置相对定位后的元素可以与其他元素重叠且覆盖

  • 非标准文档流：元素可以重叠，一层覆盖一层。且互不影响

    相对定位

  • 相对自己原来的位置进行偏移 仍然是标准文档流，原来的位置会被保留。（即设置相对定位是相对于原来位置，原来坐标仍被浏览器保留）

  • 使用相对定位需要设置多个属性

    • position: relative; 表示使用相对定位
    • 偏移量为正则往远离 负则反方向移动 如top：10px，则相对于原来位置的上边缘远离10像素距离
      • left right bottom top

        绝对定位

  • position:absolute使用绝对定位 、

    • 父元素无相对定位的前提下，相对于浏览器边界定位
    • 父级元素存在相对定位，则相对父元素定位
      • 这里的父元素包括所有的父元素
    • 偏移量为正即远离定位元素的边框，负值则反方向

      固定定位

  • position:fixed

  • 相对定位和绝对定位在浏览器窗口大小变化等情况下会发生变化，如定位为右下角，然后缩小窗口，拖动滚动条，元素就由右下角位置变化。

    • 而固定定位则无论窗口怎么变化，相对屏幕的位置始终不变(窗口终就相当于等比例变化) 如一些页面的返回顶部按钮，无论怎么下滑，始终在屏幕的一个位置

      粘性定位

  • position:sticky

    • 粘性定位是相对定位与固定定位的结合。元素在跨越特定阈值前为相对定位，之后为固定定位。 常用于滚动区域，如页面标题在开始下滑页面时，会自然往上移动，移动到页面上边缘便停止，不会离开可视页面，这就是粘性定位

      静态定位

  • 即position:static 元素默认就是静态定位

    z-index

  • 表示看成是元素在图层里的优先级。

  • z-index仅仅在相对，绝对，固定定位的元素中才生效

    • 优先级默认是0。如果优先级小于其他元素，而元素间content发生重叠(所以要在定位元素中才有效，不是定位元素不会发生重叠的情况)。则重叠部分会被优先级大的元素覆盖(优先展示高优先级)
    • 为了尽可能减小改动，一般设置某些/某个元素为负值。(否则要改其他所有元素为更大的正值)

      鼠标指针样式

  • cursor 鼠标指针移动至该标签上时指针的样式 常用pointer(点击动作的小手)