块元素：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. 关于js闭包之小问题大错误

    闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...

  2. JustOj 2038: 叶神的字符串

    题目描述 众所周知,ACS协会会长叶神学习特别好,算法能力也强,作为一个弱渣的大豪哥特别崇拜叶神,觉得‘Y’‘S’这两个字符特别厉害,所以大豪哥的一个键盘上就只有Y,S两个键,大豪哥用这个键盘打出了一 ...

  3. Codeforce 814A - An abandoned sentiment from past （贪心）

    A few years ago, Hitagi encountered a giant crab, who stole the whole of her body weight. Ever since ...

  4. 运行tomcat报Exception in thread "ContainerBackgroundProcessor[StandardEngine[Catalina]]"

    解决方法1:   手动设置MaxPermSize大小,如果是linux系统,修改TOMCAT_HOME/bin/catalina.sh,如果是windows系统,修改TOMCAT_HOME/bin/c ...

  5. JOBDU 题目1100：最短路径

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5786 解决:902 题目描述: N个城市,标号从0到N-1,M条道路,第K条道路(K从0开始)的长度为2^K,求编号为0的城市到其他城市的 ...

  6. linux下启动多个php，分别监听不同的端口。

    在工作中,我们可能会遇到,服务器集群的搭建. 这个时候,我们不可能,每一台服务器都是lnmp的环境,我们会把nmp分别放在不同的服务器上,不同的服务器负责不同的功能.比如我们下面要说的php 加入ng ...

  7. pyqt5 界面切换

    QStackedWidget 只需要关联好对应的信号和槽,调用setCurrentIndex函数,想切哪个界面就切到哪个界面

  8. 基于RHEL6.3 安装MySQL踩过的坑

    MySQL版本:Percona-Server-5.6.29 OS:RHEL6.3 安装出错 [mysql@oracle ~]$ /home/mysql/scripts/mysql_install_db ...

  9. node.js 初学（一）—— http fs 服务器/文件/post get

    node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...

  10. UVa Live 4670 Dominating Patterns - Aho-Corasick自动机

    题目传送门 快速的通道I 快速的通道II 题目大意 给定一堆短串,和一个文本串,问哪些短串在文本串中出现的次数最多. 我觉得刘汝佳的做法,时间复杂度有问题.只是似乎这道题短串串长太短不好卡.比如给出的 ...