css高级选择器与盒模型

脱离文档流 ,其中就是产生了BFC

1.组合选择器
    - 群组选择器
        /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */
        div, #div, .div {color: red}

    - 后代(子代)选择器
        .sup .sub {
            后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套)
        }
        .sup > .sub {子代}

    - 兄弟(相邻) 选择器
        .up ~ .down {兄弟}
        .up + .down {相邻}

    - 交集选择器
        section.ss#s {标签类名id名综合修饰}

2.复杂选择器的优先级
    1.与修饰符位置无关
    2.属性选择器与类选择器权重相同
    3.id 无限大于 类[属性] 无效大于 标签
    4.权重只与个数相关,个数(类型)均相同时,最后由位置决定

3.伪类选择器
    a链接标签四大伪类
        :link 初始状态
        :hover(鼠标悬浮!!!!!!)
        :active(鼠标点击中)
        :visited

    位置相关
        :nth-child() | :last-child |:first-child先确定位置再匹配类型
        :nth-of-type() 先匹配类型再确定位置

    取反
        选择器:not(修饰词) | div:not(:nth-child(2))

    :before  (盒子渲染前)
    :after  (盒子渲染后)
    :focus (表单标签获取焦点)
    :blur

4 精灵图:
    <head>
        <style type="text/css">
            .lt1 {
                width: 155px;
                height: 48px;
                background: url('img/bg.png') no-repeat;
                background-position:0 0;
            }
            .lt1:hover {
                cursor: pointer;
                background: url('img/bg.png') no-repeat 0 -48px;
            }
            /*1.显示区域一定要与精灵图目标小图大小一致*/
            /*2.通过背景图片定位方式将目标小图移至显示位置*/
                 background-position里通常是写负值
        </style>
    </head>
    <body>
        <!-- 精灵图: 各种小图拼接起来的一张大图 -->
        <!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) -->
        <div class="box"></div>
        <div class="lt1"></div>
    </body>

5.盒模型
    盒子的四个组成部分:
        margin + border + padding + content(width x height)
        display:inline,block,inline-block
    都具有自身区域:
        content 提供给内容(文本,图片,子标签整个盒子)的显示区域
        padding 介于border与content之间的区域
            可以撑开border与content之间的距离,没有自身颜色(透出背景颜色),只有区域
          注意:padding-top可以将自身与自身第一个子级分离

        border 边框,宽度 颜色自身定义,padding和content颜色有背景色填充
        margin 控制盒子位置==>盒模型布局,不参与盒子显示,其他都参与盒子显示

            # 整体设置  padding: 上 右 下 左 (无值边取对边)
            # 分开设置
                padding-top: 10px;
                padding-right: 10px;
                padding-bottom: 10px;
                padding-left: 10px;

            # 整体设置 border: 10px solid black;
            # 分开设置
                border-top: 10px solid black;
                border-right: 10px solid black;
                border-bottom: 10px solid black;
                border-left: 10px solid black;

            如何要保证显示区域大小不变,增加了padding和border,可以相应减小content的区域

    边界圆角:
        border-radius:20px;(最大只能到盒子的一半)
        border-radius:50%;
        border-radius:10px 20px 30px ;顺序:左上  右上  右下 左下(没有的值取对边)
        border-radius:10px / 20px;  横向都取10px,纵向都取20px

6.盒模型margin布局
    完成自身布局: 上移|左移margin-left | margin-top

    影响兄弟布局:下移|右移: margin-top取正值|margin-left取正值
    (上移|左移: top取负值|left取负值)

    作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置

坑1:父子联动;
    解决方案1:子级里放个浮动 ,后再margin布局
             float:left;
             margin-top:30px;
    解决方案2:position:relative;
             top:30px;
坑2:上兄弟下margin和下兄弟上margin重叠取大值

Python-ccs高级选择器 盒模型的更多相关文章

  1. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  2. web开发： css高级与盒模型

    一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...

  3. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  4. python全栈开发day39-CSS继承性和层叠性、权重问题、盒模型和其属性、文本级标签和块级标签、浮动

    一.上次内容回顾 1.CSS的三种引入方式: 行内式 内接式 外接式 链接式 导入式 2.基础选择器和高级选择器 1)标签选择器 p{} 2)  id选择器 #nva{} 3) 类选择器 .nva{} ...

  5. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  6. 选择器(&伪)/盒模型

    一.选择器高级 1.组合选择器: /*群主选择器 : 同时可以控制多个选择器*/ /*#dd,div,#a{}*/ /* d{ 起相同类名 color: red; }*/ 举例: .d1,.d2,.d ...

  7. css 选择器；盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  8. 任务二：1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系

    1.选择器类型 标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器 相邻同胞标签: h2 + p{ color:red; ...

  9. 【CSS】盒模型+选择器(你选择的要操作的对象)

    盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的w ...

随机推荐

  1. asp.net C#压缩打包文件例子

    /// <summary> /// 压缩和解压文件 /// </summary> public class ZipClass { /// <summary> /// ...

  2. 题解【bzoj4650 [NOI2016]优秀的拆分】

    Description 求对每一个连续字串将它切割成形如 AABB 的形式的方案数之和 Solution 显然 AABB 是由两个 AA 串拼起来的 考虑维护两个数组 a[i] 和 b[i] ,其中 ...

  3. Ruler.java

    /****************************************************************************** * Compilation: javac ...

  4. 监听INPUT值的即时变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使用K-S检验一个数列是否服从正态分布、两个数列是否服从相同的分布

    假设检验的基本思想: 若对总体的某个假设是真实的,那么不利于或者不能支持这一假设的事件A在一次试验中是几乎不可能发生的.如果事件A真的发生了,则有理由怀疑这一假设的真实性,从而拒绝该假设. 实质分析: ...

  6. GO语言的进阶之路-协程和Channel

    GO语言的进阶之路-协程和Channel 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 看过我之前几篇博客小伙伴可能对Golang语言的语法上了解的差不多了,但是,如果想要你的代码 ...

  7. OS + Linux RedHat 6 / redhat 6 configuration / configure / autoconf / make / make install

    s These critical programs are missing or too old: as ld http://blog.csdn.net/testcs_dn/article/detai ...

  8. 设计模式---组件协作模式之模板方法模式（Tempalte Method）

    前提:组件协作模式 现代软件专业分工之后的第一个结构是“框架与应用程序的划分”,“组件协作”模式通过晚期绑定,来实现框架与应用程序之间的松耦合,是二者之间协作时常见的模式. 我们常常使用框架来写自己的 ...

  9. CM记录-操作系统调优

    1.避免使用swap分区---将hadoop守护进程的数据交换到磁盘的行为可能会导致操作超时:物理内存(交换)--Swap分区 2.调整内存分配策略---操作系统内核根据vm.overcommit_m ...

  10. servlet dispatcher .forward(request, response); 进入其它servlet【原】

    dispatcher .forward(request, response); 进入其它servlet 假如我们的web.xml配置如下 <servlet> <servlet-nam ...