zoukankan      html  css  js  c++  java
  • 基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

    css基础选择器

    *(统配选择器): 控制html, body,以及body下所有用于显示的标签
    
    div(标签选择器): 该标签名对应的所有该标签
    
    .(class选择器)(eg: .div => class="div"): 类名为div的所有标签
    
    #(id选择器)(eg: #div => id="div"): id名为div的唯一标签
    

    选择器的优先级

    理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
    结论: 优先级顺序  统配 < 标签 < class < id < 行间式 < !important
    
    注意: !important书写在属性值后;前
    background-color: red!important;
    

    长度与颜色

    长度单位: px mm cm em rem vw vh in
    px:像素
    mm:毫米
    cm:厘米
    vw:视图的宽,100vw整个屏幕的宽
    vh:视图的高,100vh整个屏幕的高
    in:英寸
    
    '''颜色设置方式:
    1.颜色英语单词
    2.#000000 ~ #FFFFFF  黑-白(#abc == #AABBCC #F00红 #0F0绿 #00F蓝)
    3.rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)
    # background-color: rgba(255, 0, 0, 0.5);#红色,半透明
    # background-color:rgba(0,255,0,1); #绿,不透明
    # background-color:rgba(0,0,255,0); #蓝,全透明
    '''
    

    标签的分类

    1.有些标签支持宽高,有些标签不支持宽高 span不支持宽高(宽高由内容宽高撑起),p支持宽高
    
    2.有些标签同行显示,有些标签异行显示(独占标签) span同行显示,p异行显示
    
    3.有些标签有结束标识,有些标签没有结束标签(省略了) img没有结束标签
    
    1.单双标签的分类
    单标签: br|hr|img|meta|link, 功能具体, 不需要内容, 设置为单标签, 单标签结束符在标签尾部, 可以省略
    eg: <img /> | <br /> #其中/可以省略
    结论: 主功能
    
    双标签: h1|p|span|div, 具有子标签, 包含内容, 设置为双标签, 双标签首尾分离
    eg: <h1>内容</h1> | <div>子标签</div>
    结论: 主内容
    
    2.通过display属性进行划分
    <style>
        henry{
             200px;
            height: 100px;
            background-color: #00bbee;
        }
        .h1{
            display: inline;
        }
        .h2{
            display: block;
        }
        .h3{
            display: inline-block;
        }
    </style>
    <henry class="h1">123</henry>
    <henry class="h2">123</henry>
    <henry class="h3">123</henry>
     
    display: inline;
    /*
    1.同行显示
    2.只支持部分css样式(不支持宽高)
    3.宽高由文本内容撑开,与文本内容的宽高相同
    */
    
    display: block;
    /*
    1.异行显示
    2.支持所有css样式
    3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
    */
    
    display: inline-block;
    /*
    1.同行显示
    2.支持所有css样式
    3.设置了宽高就采用设置的值
    */
    '''
    # 总结: 1.标签的显示方式就是用display属性控制
    #       2.带有inline的就会同行显示, 带有block的就会支持所有css样式
    #       3.带有inline的都是与内容相关的标签, 带有block的主要用来搭建架构的
    
    嵌套关系
    why: 页面架构就是由标签一层层嵌套关系形成
    
    嵌套关系由一定的规则
    1. inline-block类型不建议嵌套任意标签, 所以系统的inline-block都设计成了单标签
    2. inline类型只嵌套inline类型的标签
    3. block类型可以嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签)
    
    结果:
    1.inline嵌套block和inline-block,不起任何作用, 所以只能嵌套inline
    #<sapn></span>是inline类型,如果嵌套<div></div>,div是block类型,block类型起作用,inline类型不起任何作用
    
    2.inline-block可以嵌套其他类型标签,但是不建议使用,如果使用,一定要结合vertical-align属性操作, 但结果左右还是有一空格间距,产生空格间距的原因:body会有一个默认的边框宽度为8px
    .list{
        display: inline-block;
        vertical-align: middle;
    }
    /*总结: vertical-align(垂直对齐) 设置与display设置在同一个作用域中 
    baseline: 文本底端对齐(默认值) 
    top: 标签顶端对齐 
    middle: 标签中线对齐 
    bottom: 标签底端对齐 */ 
    3.block如何同行显示,就是下面的盒模型解决 

    盒模型

    四个区域都是独立存在的区域
    padding:内边距,加内边距,整个盒子可以看到的宽度增加 padding: 10px 10px 10px 10px;四个值一样的话我们可以简写为一个10px  /*起始为上, 顺时针依次赋值, 不足边取对边*/
    
    border:边框 有三个参数:样式border-style(solid实线 dashed虚线 dotted点状线),颜色border-color,宽度border-width (默认宽度是3px,颜色是黑色)  border: dotted green 30px;
    
    margin:外边距  margin:100px 50px /*起始为上, 顺时针依次赋值, 不足边取对边*/
    
    总结:
    盒模型由四部分组成: margin + border + padding + content(width*height)
    1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
    2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
    3.padding: 内边距,从显示角度控制文本的显示区域(注意显示的角度)
    4.content: 内容区域,显示内容, 由宽 x 高组成
            
    注意:
    1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
    2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content
    3.margin为0,但是上下还是有一定的间距,这个间距是body产生的,他会产生一个默认宽度为8px的边框

    盒模型布局

    #其实就是设置margin来改变布局
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>盒模型布局</title>
        <style>
            div{
                 78px;
                height: 33px;
                background-color: orange;
                border: 1px black solid;
            }
            .s1{}
            .s2{
                margin-left: 80px;
                margin-top: -35px;
            }
            .s3{
                margin-left: calc(80px*2);
                margin-top: -35px;
            }
            .s4{
                margin-left: calc(80px*3);
                margin-top: -35px;
            }
            .s5{
                margin-left: calc(80px*4);
                margin-top: -35px;
            }
            .s6{
                margin-left: calc(80px*5);
                margin-top: -35px;
            }
            .s7{
                margin-left: calc(80px*6);
                margin-top: -35px;
            }
        </style>
    </head>
    <body>
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
        <div class="s4">4</div>
        <div class="s5">5</div>
        <div class="s6">6</div>
        <div class="s7">7</div>
        <hr>
        <!-- 实现b1与b2间距为50px-->
        <style>
            .b1{
                margin-bottom: 50px;
            }
            .b2{
                margin-top: 50px;
            }
        </style>
        <div class="b1"></div>
        <div class="b2"></div>
    </body>
    </html>
    
    '''
    1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
    2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值,当第一个子级margin-top大于父级,第一个子级下移父级也下移,当父级margin-top大于第一个子级,父级下移第一个子级也下移,父级只与第一个子级联动,当第一个子级不显示,则第二个子级就成为第一个子级.
    3.实际开发中不考虑父级盒子大小,父级只给子级提供布局的开始,它的宽高不会控制到子级
    
    解决2:
    1.父级设置border-top 相当于往父级上钉了一排钉子,子级扯不动
    2.父级设置padding-top 相当于把子级往下挤开了,这样子级也不能和父级联动
    一般解决是使用padding-top
    '''
    #精灵图 减少io,提升效率虽然浪费内存空间,但是可忽略不计
    

      

  • 相关阅读:
    Android游戏开发22:Android动画的实现J2me游戏类库用于Android开发
    android sqlite SQLiteDatabase 操作大全 不看后悔!必收藏!看后精通SQLITE (第三部分,完整代码)
    使用OGR创建dxf格式矢量数据
    mysql 数据库引擎 MyISAM InnoDB 大比拼 区别
    android sqlite SQLiteDatabase 操作大全 不看后悔!必收藏!看后精通SQLITE (第二部分)
    mysql 更改数据库引擎
    android sqlite SQLiteDatabase 操作大全 不看后悔!必收藏!看后精通SQLITE (第一部分)
    android 数字键盘使用
    MySQL Innodb数据库性能实践
    eclipse : Error while performing database login with the driver null
  • 原文地址:https://www.cnblogs.com/lizeqian1994/p/10285861.html
Copyright © 2011-2022 走看看