zoukankan      html  css  js  c++  java
  • CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别:

      标签的属性是采用 属性名=“属性值” 表示的

      CSS样式是采用名值对 属性名:属性值; 表示的

    2.内联元素(行内元素)与块元素

      (1)内联元素及其特点:

         所谓的行内元素,指的是只占自身大小,不会独占一行
              常见的内联元素:
         a img iframe span
               span没有任何语义,span标签专门用来选中文字,并对该文字设置样式

        对内联元素设置宽高是无效的,也不可以设置行高,其宽度和高度都默认被元素撑开

        将内联元素放在 li 标签中可以设置其宽高

        可以对内联元素设置内边距,IE6以上浏览器支持

        可以对内联元素设置外边距,但只对左右外边距起作用

       (2)块元素:

        所谓的块元素是会独占一行的元素,无论他的内容多少都会独占一行
               p h1 h2 h3...都是块元素
               div标签没有任何语义,就是一个纯粹的块元素,并不会对其里面的元素设置任何样式

        可以对块元素设置高度和边距

        如果不自己设置宽度,其宽度为其父元素宽度

        块元素中可以容纳块元素和内联元素,但内联元素中不能包含块元素

    3.几种居中方式

      (1)设置块元素中文字水平居中

        使用text-align 样式设置块中文本或图片居中。

        该样式只能操作块元素或者被CSS 显示成块元素的内联元素

        对一个块元素设置该样式后,其子块元素中的文本或者图片也会相对于其子块元素居中

      (2)块元素自身水平居中

        通过设置 magin:0 auto; 使该块元素在其父元素中水平居中显示

      (3)内联元素的垂直居中

        通过设置 vertical-algin 样式

        该属性适用于:

          内联元素(被转换成内联元素的块元素)

          display 设置为 table-cell 的元素

          在 table 也就是表格中的元素

      (4)设置块元素中文字垂直居中

          通过设置块元素的内边距

      (5)块元素自身垂直居中

          可以通过设置外边距实现

          通过绝对定位设置其距离父元素的 left right top bottom 来实现

          

       

  • 相关阅读:
    poj 2352 Stars(线段树)
    poj 2029 Get Many Persimmon Trees
    .Net remoting 的解答,以及跟WebService的区别
    关于Xcode4.2中的release“不能”使用的理解
    委托的学习日志
    钩子是啥?以及用来说啥,是不是可以用来做即时通讯?
    C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)
    接触了一下项目管理系统软件:禅道项目管理软件、Bugfree
    将string变为int 的几种方法方法比较
    Hashtable、Dictionary、SortedDictionary、SortedList的比较应用
  • 原文地址:https://www.cnblogs.com/linlin0/p/6711215.html
Copyright © 2011-2022 走看看