HTML_CSS基础

——————留存自用——————

4.样式

a.文本样式-Font

      i. Font-family、font-size、font-weight
      ii. text-align ： left、center、right

      iii. line-height:数值(一般用像素或者所在元素高度的于字体大小的比值)例：高度为200px,字体为20px,若想居中展示

      1)数值：line-height:200px;

      2)比值：line-height:10

       IV. Text-decoration:none/underline/overline/line-through

b.背景样式-background

      i. Background-color:     #fff rgb(255,255,255) white 16进制(1,2…A,B,C,D,E,F) ff=15*16A1+15*16A0=255

      ii. Background-image:url()
      iii. Background-repear:no-repeat/repeat-x/repeart-y
      iv. Background-position:

             1) top left (第1个值上中下，第2值左中右)

      2) x%y%(第1个水平位置，第2个垂直位置)左上角为0%, 0%,右下角为100%, 100%;只规定一个值则另夕L个值为50%

            3) Xpx ypx

      V. Background-size:

            1) length：长度，如果只设置一个值则第2个值会被设置为auto

      2) percentage：百分比，如果只设置f值则第2个值会被设置为aut。

      3) cover：覆盖背景，保持横纵比

      4) contain：图片不超出标签范围的情况下变成最大，且保持横纵比

C.布局样式

      I .文档流即文档的排列方式：在同一个平面中从左到右，从上到下排列

      ii .脱离文档流盒子模型脱离源文档的文档排列方式，从同一平面中浮起来，根据一定的要求^列

      iii .浮动
             1) float
             2) clear: both

      IV.定位-position

      1) position与top、bottom、left、right联用

      2) Absolute:绝对定位，相对于静态定位(static)以外的第一个父元素进行定位，若在非静态内则以该非静态元素为定位

      3) Fixed:绝对定位，是相对于浏览器窗口为进行定位，即有滚动条时页面效果相对静止类似登录弹框

      4) Relative:相对定位，相对于其原本自身正常位置进行定位，即left： 20Px会向元素的left位置添加20像素，以其本身原本的位置

      5) static：默认值

      6) Inherit:规定应该从父元素继承position属性的值
      7) sticky： h5-粘性定位，left, top不设置值时不脱离文档流，设置后类似fixed效果

      V.盒子层次z-index属性，数值越高越在顶层

      Vi.呈现形式

      1) block：块级标签-可设置宽高，元素独占一行

      2) inline：行级标签-不可设置宽高，元素自适应内部内容

      3) inline-block：介于前两个之间，可设置宽高，但不独占一行