zoukankan      html  css  js  c++  java
  • 选择器 种类与优先级,颜色与长度,显示方式,嵌套模型,盒模型

    选择器

    1.行间式

    2.内联

    3.外联

    内联

    1.标签名 2.别名 3.id

    <style>

    div {}

    </style>

    <div>

    2.

    <style>

    .iv {}

    </style>

    <div class='iv>

    3.

    <style>

    #iv {}

    </style>

    <div id='iv>

    4!.important优先级最高

    颜色

    background-color #546857  blue  rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)

    长度

    em px mm cm vw rem

    display

    inline

    支持部分css长宽由文本撑开

    在一行

    block

    异行显示

    支持全部css

    nline-block;
    /*
    1.同行显示
    2.支持所有css样式
    3.设置了宽高就采用设置的值

    在html中显示模式分为块级和行内,其中常用的块级有:div,p,h1~h6,ul,li,dl,dt,dd...  常用的行内有:span,font,b,u,i,strong,em,a,img,input,其中img和input为行内块元素

    嵌套关系

    inline只可以套inline 

    block可以inline但是hn和p 建议inline

    inline-block 建议inline套block的话默认文本对齐

    结果:
    1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline
    2.inline-block可以嵌套其他类型标签, 但一定要结合vertical-align属性操作, 左右还有一空格间距
    3.block任何同行显示 ???

    盒子模型

    margin  border padding  content

    margin , , , ,上右下左 不足取对边

    border solid| dashed点划线|dotted 圆点线             3px   blue

    padding  , , , ,上右下左不足取对边

    content   width   height   

    如果建立父子盒子,必须将父 通过border定死 或者padding设值 否则 父随子 在设定margin 时取最大值向下移动,然后父子上下粘连、

     兄弟的上面的bottom与下的top 会重叠取大

    block没有设置宽自适应父的宽,没有设置高有内容撑开
    margin的坑只存在于block如果设立成inline-block就不存在

    .h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。

    在chrome中:16,15,14,16,17,19;

    在firefox中:16,15,14,16,17,20;

    在safari中:16,15,14,16,17,19;

    在opera中:16,15,14,14,17,21;

    在maxthon中:16,14,14,15,16,18;

    在IE6.0中:都是19;

    在IE7.0中:都是19;

    在IE8.0中:16,15,14,16,17,19;

    二.dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中:margin:12px 0px;

    在IE6.0,7.0中:margin:19px 0px;

    dd标签有默认margin-left:40px;(在所有上述浏览器中)。

    三.ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中:margin:12px 0px;

    在IE6.0,7.0中:margin:19px 0px;

    默认padding-left值:在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left:40px;在IE6.0,7.0中没有默认padding值,因为ol,ul标签的边框不包含序号。

    四.table标签没有默认的margin,padding值;th,td标签没有默认的margin值,有默认的padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon中:padding:1px;

    在IE8.0中:padding:0px 1px 1px;

    在IE7.0中:padding:0px 1px;

    相同内容th的宽度要比td宽,因为th字体有加粗效果。

    五.form标签在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中没有默认的margin,padding值,但在IE6.0,7.0中有默认的margin:19px 0px;

    六.p标签有默认margin(top,bottom)值,没有默认padding值。

    在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中:margin:12px 0px;

    在IE6.0,7.0中:margin:19px 0px;

    七.textarea标签在上述所有浏览器中:margin:2px;padding:2px;

    八.select标签在Chrome,Safari,Maxthon中有默认的margin:2px;在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。

    option标签只有在firefox中有默认的padding-left:3px;

  • 相关阅读:
    运算符
    变量
    JSP EL表达式使用
    MySQL JDBC 连接数据库基本操作
    一个带标号的CSS文章列表写法
    CSS图片列表
    YUI3 CSS
    Ubuntu 13.10 64位 无法 安装 ia32-libs 解决办法
    [转]编译Android源代码常见错误解决办法
    js 复制对象
  • 原文地址:https://www.cnblogs.com/wrqysrt/p/10279312.html
Copyright © 2011-2022 走看看