zoukankan      html  css  js  c++  java
  • CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章

    第十三章

    1.在使用浮动时,源代码的顺序非常重要。浮动元素的HTML必须处在要包围它的元素的HTML之前。

    2.清楚浮动:

    (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素。关键字:left、right或both。

    (2).浮动外围元素:让包含浮动元素的<div>也浮动。选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方。

    (3).利用overflow : hidden。另一种常见的方法是在外围的样式中添加以下属性:overflow:hidden。

    第十四章

    1.在样式表中添加媒体查询:

    (1).使用@import指令

    @import url(css/small.css)(max-320px);

    (2).在样式表中嵌入媒体查询

    @media (max-width : 480px){
        body {
            /* style properties go here */
    }
        style1{
            /* style properties go here */
        }
    }

    2.防止浮动下落:

    使用box-sizing : 可以重置盒模型。防止因为border产生的宽度超出而导致并排的元素被挤下去。

    第十五章

    1.position:

    定位类型

    属性关键字

    特点

    静态定位

    static

    position的默认值

    绝对定位

    absolute

    会将元素位置从文档流删除

    相对定位

    relative

    保留元素位置,但是显示在其他位置

    固定定位

    fixed

    元素固定在页面某个位置不随滚动条移动

    2.

    (1).如果一个标签的位置是绝对定位的,它又不在任何设定了absolute、relative或fixed定位的标签里面,那它就是相对于浏览器窗口进行的定位。

    (2).如果一个标签处在另一个设定了absolute、relative或fixed定位的标签里面,那它就是相对于另一个元素的边沿进行定位。

    3.堆叠元素

    绝对定位的元素处在网页的上层。

    4.隐藏

    方式

    特点

    display:none

    将元素从网页上不留痕迹的消失

    visibility:hidden

    将元素在网页上不可见,但是位置还在

    opacity:0

    将元素的可见度设置为0,可以添加动画

    十六章

    1.CSS支持10种不同的媒体类型:all、braille、embossed、handheld、print、projection、screen、speech、tty和tv。

    2.特别注意以下3中媒体类型:

    (1).all:适用于每一种设备

    (2).screen:只适用于显示器

    (3).print:只适用于打印网页

    3. 添加media样式表

    (1). 给外部样式表指定媒体类型:

    <link rel=”stylesheet” media=”print” href=”print.css”/>

    从技术上来讲,CSS规则允许在用@import方法添加外部样式表的同时定义媒体类型,像这样:@import url(print.css)print;但是IE8不支持这行代码因此最好不用。

    (2)在样式表中指定媒体类型

             可以利用@media指令直接在样式表中定义特定的媒体类型。

    @media print{
         /* put your styles for the printer in here */
    }

    第十七章:

    CSS设计习惯

    1.添加注释

    2.使用多个类来创建样式

    3.使用派生选择器

    4.在一个外部样式表中使用@import导入多个样式表,然后链接到网页中。

  • 相关阅读:
    nodejs+express+mysql实现restful风格的增删改查示例
    使百度统计排除自己
    node.js和JavaScript的关系
    完善chrome翻译插件ChaZD,支持有道智云api
    面向对象编程 —— java实现函数求导
    我的第一篇博客 —— 博客内容简介
    微信公众号支付
    Shiro的原理及Web搭建
    AOP 切面编程------JoinPoint ---- log日志
    quartz 不同时间间隔调度任务
  • 原文地址:https://www.cnblogs.com/koto/p/5361257.html
Copyright © 2011-2022 走看看