• 重要的CSS属性总结


      1.边框盒模型和box-sizing属性

        标准CSS盒模型规定width和height样式属性只包含内容区域,不包括内边距和边框。称作“内容盒模型”。

        box-sizing:border-box将会变成边框盒模型,即,height和widht包括内边距和边框。

        Chrome和Safari使用-webkit-box-sizing,Firefox使用-moz-box-sizing

      

    <!DOCTYPE html>
    <html>
        <body>
            <div id="myDiv">
    
            </div>
        </body>
    </html>
    <style>
        #myDiv{
            height: 100px;
            width: calc(50% - 8px); /*计算CSS值*/
            background-color: red;
            box-sizing: border-box;
            padding: 10px;
            border: solid black 2px;
        }
    </style>

      2.元素显示和可见性

       visibility和display,区别在于visibility设置hidden时候会占用位置,而display不会。

      3.颜色、透明度和般透明度

       (1)rgba(),alpha设置透明度,0~1。

       (2)background-color:transparent 可以覆盖默认颜色,变成透明的。

       (3)opacity,设置透明度0~1,CSS3标准属性

       (4)filter:alpha(opacitry=75)       IE设置透明度,没有小数点

      4.部分可见:overflow和clip

       visibility属性可以让文档元素完全隐藏,而overflow和clip属性允许只显示元素的一部分。

       overflow可选属性

         visible 默认值,如果需要,内容可以溢出并绘制在元素的边框外面

         hidden 裁减并隐藏溢出的内容

         scroll 元素一直显示水平和垂直滚动条

         auto 滚动条只有在内容超出元素尺寸时才出现,并非一直显示。

      5.text-align只应用于块级元素的内联内容

      6.七个水平属性的总和等于父元素的width,只要所有属性都是大于或等于0的,元素就不会大于其父元素的内容区。只有外边距可以为负数。

        百分数设置width、内边距和外边距:

          假设你希望一个元素的内容时其包含元素宽度的三分之二,左右内边距分别设置为5%,左外边距为5%,剩下的就是右外边距,即18%。

        垂直属性:

          如果正常流中一个块元素的margin-top或margin-bottom设置为auto、它会自动计算为0,也就是元素框没有外边距。对于定位元素来说,上下外边距设置

          auto,其处理会有所不同。七个垂直属性加一起等于父元素的width。

      7.合并外边距

      8.行内元素:

        width,height,内外边距的top/bottom都没法设置

        

    行内元素:
    * a – 锚点 * abbr – 缩写 * acronym – 首字 * b – 粗体(不推荐) * big – 大字体 * br – 换行 * em – 强调 * font – 字体设定(不推荐) * i – 斜体 * img – 图片 * input – 输入框 * label – 表格标签 * s – 中划线(不推荐) * select – 项目选择 * small – 小字体文本 * span – 常用内联容器,定义文本内区块 * strike – 中划线 * strong – 粗体强调 * sub – 下标 * sup – 上标 * textarea – 多行文本输入框 * tt – 电传文本 * u – 下划线 * var – 定义变量

      9.块级元素:

    2.块级元素
    * address – 地址
    * blockquote – 块引用
    * center – 举中对齐块
    * dir – 目录列表
    * div – 常用块级容易,也是css layout的主要标签
    * dl – 定义列表
    * fieldset – form控制组
    * form – 交互表单
    * h1 – 大标题
    * h2 – 副标题
    * h3 – 3级标题
    * h4 – 4级标题
    * h5 – 5级标题
    * h6 – 6级标题
    * hr – 水平分隔线
    * isindex – input prompt
    * menu – 菜单列表
    * noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容)
    * noscript – )可选脚本内容(对于不支持script的浏览器显示此内容)
    * ol – 排序表单
    * p – 段落
    * pre – 格式化文本
    * table – 表格
    * ul – 非排序列表

      10.line-height

        可以应用于哪些元素:

        line-height只影响行内元素,并不能直接应用于块级元素

     

      

  • 相关阅读:
    VC编程锦集-1
    VC窗口关闭调用顺序
    Windows消息WM_USER、WM_APP的区别
    Toolbar添加控件;创建多行toolbar;重新排列toolbar
    SQL模糊查询详解
    MySql格式化日期
    Apache PHP 服务环境配置
    kvm.install
    repo搭建
    apache故障处理
  • 原文地址:https://www.cnblogs.com/sstone/p/8494682.html
Copyright © 2020-2023  润新知