CSS 盒子模型 二

时间：2022-09-20 16:17:39

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>

案例：

模仿新浪首页

CSS 盒子模型 二

<!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. &lbrack;Web 前端&rsqb; 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. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. CocoaPods升级&comma;升级以后出现bug的解决方法&lpar;升级必看&excl;&rpar;

    命令行更新(安装)步骤[更新步骤] $ sudo gem update --system // 先更新gem,国内需要切换源 $ gem sources --remove https://rubyge ...

  3. 为WordPress某个文章添加额外的样式

    如需把css直接写在某文章,把下面代码放如function.php /* 为特定文章添加特定css最简单的方式. */ /*添加自定义CSS的meta box*/ add_action('admin_ ...

  4. c&num;中创建类&lpar;更新中&rpar;

    类是最常见的一种引用类型,最简单的定义如下 class YouClassNam {} 复杂的类可能包含一下内容 类属性 类属性以及类修饰符.  非嵌套的类修饰符有:public,internal,ab ...

  5. 最全的微软msdn原版windows系统镜像和office下载地址集锦

    随着windows的发展,越来越多的人都热衷于微软的原版系统下载了,相比之前的版本比如winxp版本,windows vista/win7/win8/win8.1/win10后来的版本在安装方面也比较 ...

  6. iOS开发-javaScript交互

    前言 当前混合开发模式迎来了前所未有的发展,跨平台开发.热更新等优点决定了这种模式的重要地位.虽然前端界面在交互.动效等多方面距离原生应用还有差距,但毫无疑问混合开发只会被越来越多的公司接受.在iOS ...

  7. Java链表和递归

    删除链表的指定元素: public class ListNode { public int val; public ListNode next; public ListNode(int x){ val ...

  8. SpringBoot一站式启动流程源码分析

    一.前言 由上篇文章我们得知,SpringBoot启动时,就是有很简单的一行代码.那我们可以很清楚的看到这行代码的主角便是SpringApplication了,本文我们就来聊一聊这货,来探寻Sprin ...

  9. Excel表数据导入Sql Server数据库中

    Excel表数据导入Sql Server数据库的方法很多,这里只是介绍了其中一种: 1.首先,我们要先在test数据库中新建一个my_test表,该表具有三个字段tid int类型, tname nv ...

  10. 寻找最大连续子序列&sol;Find the max contiguous subsequence

    寻找最大连续子序列 给定一个实数序列X1,X2,...Xn(不需要是正数),寻找一个(连续的)子序列Xi,Xi+1,...Xj,使得其数值之和在所有的连续子序列数值之和中为最大. 一般称这个子序列为最 ...

相关文章