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,提升效率虽然浪费内存空间,但是可忽略不计
    

      

  • 相关阅读:
    Kibana查询说明
    windows下安装python 且 安装pip
    pycharm编辑器,各种设置及配置修改
    用python输出未来时间,递增
    window 下python2.7与python3.5两版本共存设置
    python 运算符
    python 运算及注释
    js 实现动态的图片时钟
    js table的笔记,实现添加 td,实现搜索功能
    js实现图片无缝连接
  • 原文地址:https://www.cnblogs.com/lizeqian1994/p/10285861.html
Copyright © 2011-2022 走看看