块元素：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. 20165215 2017-2018-2 《Java程序设计》第八周学习总结

    20165215 2017-2018-2 <Java程序设计>第八周学习总结 教材学习内容总结 进程与线程 进程是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过程. ...

  2. JustOj 1994: P1001

    题目描述         给定一个长度为N(0< n< =10000)的序列,保证每一个序列中的数字a[i]是小于maxlongint的非负整数  ,编程要求求出整个序列中第k大的数字减去 ...

  3. 1分钟完美安装最新CentOS+Nginx+PHP-FPM+MySQL

    PHP 5.3.1 MySQL 5.0.89 Nginx 0.8.33 或 0.7.65 (可选) 现在,我们可以快速全自动搞定 CentOS + Nginx + PHP-FPM + MySQL 的安 ...

  4. C#简单线程

    一.实例1 static void Main(string [] args) { Console.WriteLine("开始线程"); startFunc(); Console.W ...

  5. nmap扫描验证多种漏洞

    nmap在Kali Linux中是默认安装的.它不仅可以用来确定目标网络上计算机的存活状态,而且可以扫描各个计算机的操作系统.开放端口.服务,还有可能获得用户的证书. 命令结构: nmap -sS - ...

  6. HTML（续）

    1.有frame就无body,框架的noresize:设置框架大小不能改变.2.链接在框架中的应用target:有定为目标的功能.<a href = "链接源地址" targ ...

  7. Android NDK MediaCodec在ijkplayer中的实践

    https://www.jianshu.com/p/41d3147a5e07 从API 21(Android 5.0)开始Android提供C层的NDK MediaCodec的接口. Java Med ...

  8. MyBatis中#{ }和${ }的区别，数据库优化遵循层次和查询方法

    MyBatis中#{ }和${ }的区别详解 1.#将传入的数据当成一个字符串,会对自动传入的数据加一个 双引号. 例如order by #id#,如果传入的值是111,那么解析成sql时变为orde ...

  9. Docker学习笔记之保存和共享镜像

    0x00 概述 让 Docker 引以为傲的是它能够实现相比于其他虚拟化软件更快的环境迁移和部署,在这件事情上,轻量级的容器和镜像结构的设计无疑发挥了巨大的作用.通过将容器打包成镜像,再利用体积远小于 ...

  10. CentOS ping: unknown host 解决方法

    如果ping命令返回如下错误,那主要的可能性就是系统的DNS设置有误 [root@CentOS5 ~]# ping www.sina.com.cn ping: unknown host www.sin ...