Sublime 快捷键：

文件保存后，输入 html:xt + tab  ,补全html

html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>Document</title>

</head>

<body>

</body>

</html>

补全class

div.nav + tab = 

<div class="nav"><div>

输入多行<a> 标签

a[#]*3 + tab

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

案例：

模仿新浪首页

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        .nav{

            height: 40px;

            background: #eee;

            border-top: 3px solid orange;

            border-bottom: 1px solid #aaa;

        }

        .nav-con{

            width: 1000px;

            height: 40px;

            margin:   auto; /*盒子居中对齐*/

            /*line-height: 40px;*/

        }

        a{

            font:12px/40px 微软雅黑;/* 文字大小 行高 */

            color: #;

            display: inline-block;

            height: 40px;

            text-decoration: none;

        }

        a:hover{

            background: #;

        }

    </style>

</head>

<body>

    <div class="nav">

        <div class="nav-con">

            <a href="#">设为首页</a>

            <a href="#">手机新浪网</a>

            <a href="#">移动客户端</a>

        </div>

    </div>

</body>

</html>

垂直方向外边距合并 

　  垂直方向的两个盒子，如果都设置了垂直方向的外边距，取设置的较大的值。

外边距塌陷

    嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷。

    解决方法：

    1.给父盒子设置边框；

    2.给父盒子设置 overflow:hidden      bfc 格式化上下文。

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        .father{

            width: 500px;

            height: 400px;

            background: #;

            border: 1px solid #;

        }

        .son{

            width: 200px;

            height: 200px;

            background: #eee;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>

</body>

</html>

 

CSS 盒子模型 二的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  3. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  4. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  5. CSS盒子模型之详解

    前言:        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念    CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...

  6. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  7. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  8. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  9. CSS盒子模型（框模型）

     一.如何理解盒子模型  盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...

随机推荐

  1. 详解CorelDRAW中关于群组的操作

    CorelDRAW软件中的“群组”功能键主要用于整合多个对象.在进行比较复杂的绘图编辑时,通常会有很多的图形对象,为了方便操作,可以对一些对象设定群组.设定群组以后的多个对象,将被看作一个单独的对象. ...

  2. javascript提取联通个人信息和通话记录的代码

    由于一些巨大的困难,一些后端爬虫改成了前端爬虫. 前端爬虫是只有js语言,后端爬虫有python java nodejs php这些语言. 前端爬虫有window.document对象,在浏览器端的爬 ...

  3. linux系统调用函数---12

    Linux应用编程学习笔记                                 周学伟 一．系统调用文件编程   1.文件打开函数 /*************************** ...

  4. Spring中可以复用的工具类&特性记录

    Spring 里有用工具类: GenericTypeResolver 解析泛型类型.核心逻辑还是调用 ResolvableTypeResolvableType 解析泛型类型 BeanWrapper 利 ...

  5. IIS------如何占用80端口

    如何占用80端口 请看我的一篇随笔: https://www.cnblogs.com/tianhengblogs/p/9292347.html

  6. CentOS 6.3 + Subversion + Usvn 搭建版本管理服务器

    一． Subversion 简介 Subversion是一个自由,开源的版本控制系统.在Subversion管理下,文件和目录可以超越时空.Subversion将文件存放在中心版本库里.这个版本库很像 ...

  7. 彻底删除weblogic域方法

    1.删除 D:\Oracle\Middleware\wlserver_10.3\common\nodemanager\nodemanager.domains 里的base_domain域内容 #Dom ...

  8. jquery 复制文本到剪切板插件（非 flash）

    原创插件,转载请声明出处!!! jquery.copy.js 内容如下: /*! * jQuery Copy Plugin * version: 1.0.0-2018.01.23 * Requires ...

  9. vmware下虚拟机不能上网问题解决

    这个问题困扰了好久,vmware下装的虚拟机可以通过DHCP获取单独IP,但当用到管控较严格的环境,需要它与主机共享IP时,就不好使了. 今天在一篇文章中找到答案,如下图,windows系统中要启动V ...

  10. oracle非空不做更新

    update test set B=nvl(p1,B),C=nvl(p2,C),D=nvl(p3,D),E=nvl(p4,E) where A='good'