CSS样式属性

字体属性

• font-weight：设置字体粗细

  normal：默认值，正常字体

  bold：粗体（<b>、<strong>标签的默认值）

  bolder：更粗的字体效果

  lighter：设置更细的字体

  另外，还可以设置100-900之间的整百数值，数字越大，字体显示更粗，一般normal对应400，bold对应700

• font-style：设置文字的是否倾斜的效果

  normal：默认值，正常字体

  italic：斜体，一般针对英文字体(不过，中文也能够使用)

  oblique：倾斜的文字效果，与字体无关 （强制设置样式）

  line-height：行高，设置一行文字占有的高度（文本属性）

  当line-height的值设置为与盒子height的值一样时，单行文本将垂直居中

• font的复合样式写法
  font: font-style font-weight font-size/line-height font-family

  其中font-size和font-family必须写，font-style和font-weight的顺序可以颠倒

  div {
    font:italic bold 16px/30px "arial","SimSun","Microsoft Yahei";
  }
  

  div {
    font:16px/30px "arial","SimSun","Microsoft Yahei";
  }
  

文本属性

• text-align
  水平对齐方式：left、center、right以及justify(适用于英文)

• text-decoration
  文本修饰，设置文本是否有线条的修饰效果

  • none: 默认，无修饰
  • underline：下划线
  • overline：上划线
  • line-through：中划线

• text-indent
  用于文本块中首行文本的缩进：常用em为单位的属性值，区分正负值，表示向右或向左缩进几个字符

背景属性background

• background-color
  背景颜色 在border及以内的区域加载背景色

  CSS3中新增rgba模式，在rgb模式基础上增加了一个不透明度(alpha)的设置，0(完全透明) ~ 1(完全不透明)

• background-image

  背景图片 默认加载border及以内的部分，如果设置了background-repeat属性，加载区域是在border以内

  属性值： url(图片的路径地址)

  div {
    background-image: url(./images/bg.jpg);
  }
  

  CSS3多背景图片：background-image能够设置多个背景图片，并以,分隔URL图片地址（先写的背景盖压后写的）

  div {
    background-image: url(./images/bg_01.jpg), url(./images/bg_02.jpg);
  }
  

• background-repeat
  背景重复

  属性值：

  • repeat：重复，默认值，表示会使用背景图重复加载以填满整个盒子的背景区域
  • no-repeat： 不重复
  • repeat-x：水平重复 使用背景图水平重复加载铺满第一行
  • repeat-y： 垂直重复 使用背景图垂直重复加载铺满第一列

  div {
     background-repeat: no-repeat;
   }
  

• background-position

  • 设置不重复图片在背景区域加载的开始位置

  • 属性值: x y

  • X轴位置
    left、center、right或者具体像素值、%

  • Y轴位置
    top、center、bottom或者具体像素值、%

  • 单词表示：

    div {
      background-position: center center;
    }
    

  • 像素表示
    基于border以内的左上顶点在相应方向上位移的距离
    正值：针对左上顶点向右、向下移动

    div {
       background-position: 50px -100px;
    }
    

  • 百分比表示法
    100%：水平(垂直)方向，等价于盒子的border以内的背景区域宽度(高度)减去图片的宽度(高度)(如果x、y都设置为50%，则图片会居中显示)

    div {
      background-position: 50% 50%;
    }
    

• background-attachment
  背景附着，设置背景图是否随盒子的滚动而滚动

  属性值：

  • scroll: 滚动 默认值，表示背景图与盒子保持相对位置不变，随页面滚动而滚动
  • fixed： 固定， 背景图的定位的参考点发生改变，以浏览器窗口的左上顶点为参考点，此参考点是不变的，导致背景图固定在一个位置，不随页面的滚动而滚动

• background-size
  背景图的尺寸
  属性值：

  • 像素值、%
  • cover: 自动调整缩放比例，使背景图完全覆盖整个背景区域
  • contain: 自动调整缩放比例，使背景图尽可能的完整显示在背景区域(缩放到与背景某一方向的边界接触才停止)

• background复合写法
  background: url repeat position/size attachment color;
  如果有的属性值不写，将以默认值加载

  div {
    background: url(./images/bg.jpg) no-repeat center center/cover fixed #f00;
  }
  

盒模型属性

width、height、padding、border、margin

• width: auto(不设置的情况下，默认值auto，块级元素自动撑满父级宽度，行内元素则内容决定)、px、%

• height: auto(不设置的情况下，默认值auto，内容撑开高度，自适应)、px、%

• border:边框，元素的最外层边界区域

  border-width:边框宽度，有四个边界值（上、右、下、左）

  • 1个值：四个值相等
  • 2个值：上下 左右
  • 3个值：上 左右 下
  • 4个值：上 右 下 左

  border-style: 边框形状

  solid(实线)、dashed(虚线)、dotted(点线)、double(双线)

  border-color: 边框颜色，transparent(透明)

  border的复合写法

  • border: width style color
    border: 1px solid #000;
  • 可以设置单一边框，border-top(top、right、bottom、left)，复合写法与上面一致

• padding:内边距，元素的边框内部到宽高内容区域的距离
  可选的4个值,设置方式与border-width一致

• margin:外边距，盒子与盒子之间的距离
  设置方式与padding一致
  margin小应用：水平居中，将左右方向的margin值设置为auto

  margin: 0 auto
  

• margin的一些小问题(上下margin塌陷现象)
  同级元素的margin-top和margin-bottom两者间会出现重叠，取两者较大值

  如果父子元素都设置了同方向的margin-top值，两个属性间没有其他的内容隔离，导致两属性相遇，发生塌陷

  当第一个子元素设置margin-top值。而父元素没有设置该属性值时。子元素仍然会连带着父元素进行相应改变

  规避方式

  • 给父级加border
  • 给父级加overflow:hidden
  • 不要用margin-top,可用父级padding-top替代
  • 父级加伪元素：例如

  div::before{
    content:'';
    display:table;
  }
  

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

HTML中的标准文档流特点

• 微观现象

  1. 空白折叠现象(空格、换行都会被浏览器解析)
  2. 文字类元素在一排会出现高低不齐、底边对齐的效果
  3. 自动换行元素内容占满元素宽度时自动进行换行

• 元素等级：块级元素、行内元素、行内块元素

  元素等级	是否独占一行	能否设置宽高	margin、padding值
  块级元素	是	能	可以设置上下左右四个方向
  行内元素	否	不能	只能设置左右方向
  行内块元素	否	能	可以设置上下左右四个方向

  • 块级元素的特性
    1. 默认是父级100%宽度
    2. 支持所有css样式
    3. 独占一行
  • 行内元素特性
    1. 同属性标签在一行排列
    2. 内容撑开高度
    3. 不支持宽高设置
    4. 不支持上下padding、margin
    5. 代码换行符被解析，使得行内元素间有间隙

• 块级元素
  div、h1-h6、p、address、table、ul、ol、li、dl、dt、dd、form等
• 行内元素
  span、a、strong、em、del、ins、label、sub、sup
• 行内块元素
  image、input、select、textarea、iframe

display显示模式

通过设置display的属性值，可以更改元素等级的显示模式

属性值设置形式：

• 块级属性：display：block
• 行内属性：
  行内：display:inline
  行内块：display:inline-block
• display：none,隐藏元素的显示

浮动属性float

浮动布局，能够让元素脱离文档流，同级元素排列在一排，并且能够设置宽高，不会出现空白折叠现象，如果不设置宽高，将由内容撑开宽高。同时，会让出原有的标准流位置，后面的同级元素将占有该位置

• 浮动的贴边性质

  当父元素宽度足够时，子元素依次按浮动的属性值以left或者right依次贴边排列，并排成一排

  当父元素宽度不够时，会跳过第一排。依次向下移动，找到下层能够贴边的元素进行贴边，并且能够满足其宽度(当然，贴边元素不会出现钻空现象)

  如果都放不下，将会重新贴到父元素左右边缘，若超过父元素宽度，则会出现宽度溢出现象

• 浮动所带来的问题

  父元素内部的子元素进行浮动后，父元素的高度就不能由浮动子元素撑起了，而且，父元素不设置高度时，将影响后面元素的标准流位置

• 清除浮动

  1. 给父级加高度，包住子级元素
     缺点：父元素高度无法自适应，一旦子元素高度变化，问题仍然会出现，扩展性不好

  2. 给父级加display:inline-block
     缺点：margin水平居中失效margin:0 auto;失效,解决方法：给父级加：text-align:center;

  3. 使用clear属性(元素的某一方向不允许出现其他浮动元素)
     给后面的元素或者再添加一个标签(外墙法)，添加clear:both;
     如：<br style="clear:both;"/>
     缺点：子元素浮动后，父元素的高度仍然有问题，而且如果两个元素上下间margin时，效果不正确

  4. 在父元素内的末尾再添加一个标签，设置clear属性（内墙法）

  5. 给父元素添加伪元素:after（本质仍然是内墙法）
     :after，表示选中的是某个标签内部的最后的位置，为需要清除浮动的父元素设置一个class类clearfix

     清浮动方法

      .clearfix:after{
        content:"";
        display:block;
        clear:both;
      }
     

  6. 溢出隐藏
     给内部有浮动子元素的父元素添加溢出隐藏 overflow:hidden; 属性，可以解决浮动的所有问题

• overflow属性
  当元素高度设置后，overflow：hidden;，将超过高度的部分直接隐藏。

  当元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。

  高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏时，浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
  在清除浮动时，使用overflow:hidden;原理就是设置该属性后，使得父元素有了高度，能够管住内部所有的浮动子元素，不会影响后面的元素排列问题。

针对以上几种方法，在使用时可以根据实际情况来合理选择，一般来说：
• 如果父元素高度是固定的，建议使用 height 属性解决。
• 如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

定位属性position

通过设置position属性值，对某些元素进行相关的位置偏移操作

• position属性值:
  absolute：绝对定位
  relative：相对定位
  fixed：固定定位
  sticky：粘性定位(CSS3新增)
  static：默认值，无定位

• 偏移量属性
  水平方向：left、right
  垂直方向：top、bottom
  注意事项：同方向上，不能够设置两个偏移量属性，水平方向上优先加载left属性，垂直方向优先加载top属性

• 相对定位relative
  针对元素自身加载时的原始位置进行定位。相对定位的元素仍然保持着标准文档流结构，占据着原有位置

  特点：原位留坑，形影分离

  由于相对定位不脱离文档流，结构仍然稳定，在对元素进行细微调整时使用相对定位

• 绝对定位absolute
  针对最近的有定位属性值(除static以外)的祖先元素的位置进行定位，如果都没有定位属性值，则参考html文档进行定位。

  绝对定位的元素会脱离文档流，让出原有位置。能够设置宽高，若不设置，则由内容撑开宽高。

  参考点

  • 由于绝对定位的参考点的不同，定位位置也有较大差异。一般参考元素的定位组合有：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。

• 固定定位fixed
  根据浏览器窗口的四个顶点进行定位

  固定定位同样是脱离文档流，让出原有位置

• 粘性定位sticky
  粘性定位的元素不脱离文档流，仍然保留元素原本在文档流中的位置

  sticky比较特殊,一般用于在窗口滚动事件中。
  当设置了sticky的元素，在视口范围时，元素的位置并不受到定位值（left、top值）影响，然而，当元素位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
  在窗口滚动中，当超过指定的偏移值时，元素在容器内固定在指定位置，直到元素达到父元素的边界才不会再发生定位。
  元素固定的相对偏移是相对于离它最近的具有滚动框（overflow为非visible）的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport（视口）来计算元素的偏移量。

• 定位属性实现居中效果

  • 1、给父元素设置相对定位属性，将其作为参考元素
  • 2、子元素设置绝对定位，设置偏移量属性值，如：left:50%，将子元素移到参考元素的中心位置
  • 3、给子元素设置同方向的margin，如：margin-left,属性值为自身宽度的一半（自身宽度已知）

  /* css部分 */
  .parent{
    position:relative;
  }
  .son{
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;
  }
  

  <!-- html部分 -->
  <div class="parent">
   <p class="son">子盒子</p>
  </div>
  

• 定位元素的压盖效果

  • 绝对定位会压盖标准流或浮动元素
  • 若都是定位元素，则按书写顺序，后写的定位元素压盖先写的
  • 可以通过设置z-index属性进行更改压盖顺序，属性值是纯数字（此属性只能给定位元素设置才能生效）

  1、属性值大的压盖小的,如果值相同，则按书写顺序
  2、父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
  父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
  子级盒子：如果父级没有设置z-index属性，子级中z-index大的会压盖小的；如果父级设置了z-index值，无论子级z-index值是多少，都是父级的值大的子级压盖父级值小的子级，俗称"从父效应"。