zoukankan html css js c++ java

CSS 盒子模型二

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{
             1000px;
            height: 40px;
            margin: 0  auto; /*盒子居中对齐*/
            /*line-height: 40px;*/
        }
        a{
            font:12px/40px 微软雅黑;/* 文字大小 行高 */
            color: #333;
            display: inline-block;
            height: 40px;
            text-decoration: none;
        }
        a:hover{
            background: #999;
        }
    </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{
             500px;
            height: 400px;
            background: #232323;
            border: 1px solid #232323;
        }
        .son{
             200px;
            height: 200px;
            background: #eee;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>

查看全文

相关阅读:
(连通图模板题无向图求桥)Critical Links -- UVA -- 796
（连通图模板题）迷宫城堡--hdu--1269
（连通图模板题无向图求割点）Network --UVA--315（POJ--1144）
（线段树区间合并更新）Tunnel Warfare --hdu --1540
（线段树区间查询更新） Can you answer these queries? -- hdu--4027
（线段树）Balanced Lineup --POJ --3264
（线段树） Count the Colors --ZOJ --1610
（线段树）Just a Hook -- hdu -- 1689
All about <httpRuntime targetFramework>
ASP.NET 4.0升级至ASP.NET 4.5需要注意的地方【转】

原文地址：https://www.cnblogs.com/taiguyiba/p/8493430.html

CSS 盒子模型 二

CSS 盒子模型二