块元素：div、h1、p等等。

列表的样式：

/*使用系统提供的一些样式：例如无序、有序都可以使用circle*/

ul{

    list-style-type: circle;

}

ol{

    list-style-type: circle;

}
/*使用图片，实现自定义*/

ul{

    /*图片要小一点*/

    list-style-image: url("../2.png");

    /*list-style: url("../2.png");*/    /*简写: 即image、position、type的事，它都可以干*/

}

<ul>

    <li>猫</li>

    <li>狗</li>

    <li>猪</li>

</ul>

添加轮廓，突出内容：

p{

    /*使用outline添加一个轮廓：outline相当于一个简写，因为它可以设置所有的轮廓属性*/

    outline: auto;

    outline-color: aqua;

    outline-style: groove;

    outline-width: 2px;

}

<p>测试文本</p>

CSS Box Model——对于一个元素而言：

盒子模型包含：content、padding、border、margin。

设置内边距padding：

td{

    /*padding: 100px;*/

    padding-top: 100px;

    padding-bottom: 100px;

    padding-left: 100px;

    padding-right: 100px;

}

<table border="1">

    <tr>

        <td>盒子模型padding</td>

    </tr>

</table>

设置边框border：

p{

    /* 1 样式、border-style: double;*/

    /*对每一边进行设置(可以将简写覆盖掉)*/

    border-top-style: double;

    border-bottom-style: double;

    border-left-style: double;

    border-right-style: double;

    /* 2 宽度、border-width: 2px;*/

    border-top-width: 2px;

    /* 3 颜色、border-color: red;*/

    border-bottom-color: red;

    /* 4、CSS3提供边框的：圆角、阴影、环绕图片*/

    border-radius: 5px;

    box-shadow: 10px 10px 2px red;

    /*不用线或者点了，用图片自定义(把前面的宽度、颜色、圆角、阴影注掉)*/

    /*border-image: url(http://www.w3school.com.cn/i/border.png) 30 30 round;*/

}

<p>一共定义了10种border-style</p>

外边距margin：

.margin{

    /*外边距默认为透明区域，可以接受任何长度单位或百分数*/

    /*margin: 100px;*/

    /*margin: 0px 10px 15px 20px;*/     /*上、右、下、左(顺时针)*/

    margin-top: 100px;

    margin-bottom: 100px;

    margin-left: 100px;

    margin-right: 100px;

}

Box-Model结构设计：

body{

    /*将整个页面拟作一个盒子(一个元素)，所以去掉body的干扰*/

    margin:;

}

.margin{

    margin: 100px;

}

.border{

    border: double;

}

.padding{

    padding: 100px;

}

.content{

    background-color: red;

    text-align: center;

}

<body>

    <!--描述Box Model的层次结构-->

    <div class="margin">

        <div class="border">

            <div class="padding">

                <div class="content">Box Model</div>

            </div>

        </div>

    </div>

</body>

外边距合并（位置上的重叠）：

/*重叠后，取margin较大者，作为新margin*/

.margin-one{

    margin-bottom: 100px;

}

.margin-two{

    margin-top: 50px;

}

<!--只有垂直方向存在合并-->

<div class="margin-one">margin-one</div>

<div class="margin-two">margin-two</div>

CSS定位：

定位的思想：定义该元素，相对于其正常、父元素、其他元素、浏览器窗口的位置。

三种基本的定位机制：普通流、绝对定位、浮动。默认所有框都在普通流中定位。

块级框之间的距离，只由框之间的垂直margin计算。行框：一行所有的框组合而成。

所有元素都是框：行内框inline+块框block，通过display更改

<a href="">a不设置</a>

<a href="" style="display: block">a设置block</a>

让指定元素没有框，因此不显示(没有框占文档的空间)

<p style="display: none">p设置none</p>

<p style="display: inline">p设置inline</p>

<p>p不设置</p>

相对定位（可看作普通流）：

<p>.p1元素无论是否移动，都会占据其原来位置</p>

<p class="p1">相对定位</p>

<style>

    .p1{

        /*relative：采用相对定位 — 设置水平、垂直位置(可以为负数)，就会相对于原来位置移动*/

        position: relative;

        left: 20px;     /*水平位置：left、right*/

        top: 20px;      /*垂直位置：top、bottom*/

    }

</style>

绝对定位：

绝对定位使元素的位置与文档流无关，因此不占据空间。

<p class="p1">采用绝对定位</p>

<span>绝对定位不占位置</span>

<style>

    .p1 {

        position: absolute;

        /*绝对定位的位置是相对于最近的已定位祖先元素；而对于其他元素，就像不存在一样*/

        left: 100px;

        top: 100px;

    }

</style>

浮动：

<p>test</p>

<style>

    p{

        /*所有元素都可以浮动*/

        /*假如在一行之上不足以容纳浮动元素，那么这个元素会继续占据下一行，直到能够容纳。*/

        float: right;   /*向右浮动；默认是none(不浮动)，而不是left*/

        /*使用JS操纵：object.style.cssFloat="right"*/

    }

</style>

浮动不同于定位，对于浮动，就理解为如同在水中漂浮的元素：

<p>test</p>

<p>test</p>

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

<style>

    p{

        float: left;

        display: inline;

        background-color: purple;

        width: 30px;

    }

</style>

举例 —— 创建水平菜单：

<ul>

    <li><a href="#">Link one</a></li>

    <li><a href="#">Link two</a></li>

    <li><a href="#">Link three</a></li>

    <li><a href="#">Link four</a></li>

</ul>

<style>

    ul{

        /*默认情况ul有margin-top、margin-bottom、padding-left(好像是来自user agent stylesheet)*/

        padding:;

        margin:;

        list-style-type: none;

    }

    li{

        /*看来li也是块*/

        display: inline;

    }

    a{

        float: left;

        width: 7em;

        text-decoration: none;

        color: white;

        background-color: purple;

        padding: 0.2em 0.6em;

    }

    a:hover{

        background-color: #ff3300;

    }

</style>

启用响应式：确保适当的屏幕缩放和绘制，需要添加viewport元信息：

<!-- content包含可选的属性：-->

<!-- width：控制设备屏幕宽度。initial-scale：确保网页加载时,1:1比例呈现,不会有缩放。

user-scalable：是否禁用用户的缩放操作。一般与maximum-scale=1.0一起使用 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">

CSS深入的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Java并发编程1--synchronized关键字用法详解

    1.synchronized的作用 首先synchronized可以修饰方法或代码块,可以保证同一时刻只有一个线程可以执行这个方法或代码块,从而达到同步的效果,同时可以保证共享变量的内存可见性 2.s ...

  2. AtCoder Beginner Contest 085（ABCD）

    A - Already 2018 题目链接:https://abc085.contest.atcoder.jp/tasks/abc085_a Time limit : 2sec / Memory li ...

  3. [资讯] NFC有什么作用。小米手机3NFC解读

    在近几年的智能手机市场,NFC成了Android高端手机产品的标准配置,无论是Android还是Windows Phone阵营,有越来越多的厂商也开始为自己的产品加入NFC功能.而小米最新的旗舰产品— ...

  4. 实例,C# 导出.dbf格式文件

     using System; using System.Collections using System.Configuration; using System.Data; using System. ...

  5. 解决Win 10上SSD缓慢问题

    标准硬盘驱动器(HDD)由于其高存储容量和低成本而长期以来一直是计算机的主要存储设备.固态硬盘(SSD)是另一种存储解决方案,正在逐步取代大多数硬盘驱动器.但是,随着时间的推移,SSD会因各种原因而大 ...

  6. 自写Jquery插件 Datagrid

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9086582.html 废话不多说,先上个整体效果: html <div id='data ...

  7. 10分钟看懂！基于Zookeeper的分布式锁

    实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,其中前两种方案网络上有很多资料可以参考,本文不做展开.我们来看下使用Zookeeper如何实现分布式锁. 什么是 ...

  8. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  9. sqlite3增删改查简单封装

    import sqlite3 class DBTool(object): def __init__(self): """ 初始化函数,创建数据库连接 "&quo ...

  10. python使用super()调用父类的方法

    如果要在子类中引用父类的方法,但是又需要添加一些子类所特有的内容,可通过类名.方法()和super()来调用父类的方法,再个性化子类的对应函数. 直接使用类名.方法()来调用时,还是需要传入self为 ...