盒子模型

为了演示方便，把内容放到盒子里面

引用css

演示内容

外边距：

4个方向分开写

简写为一条指令，顺序为上右下左

简写为一条指令，第一个值为上下，第二个值为左右

简写为一条指令，只有一个值时，即四个方向的距离都为此值

内间距

4个方向分开写

简写为一条指令，顺序为上右下左

简写为一条指令，第一个值为上下，第二个值为左右

简写为一条指令，只有一个值时，即四个方向的距离都为此值

边框

边框距离：border-width
边框样式：border-style None则为无
边框颜色：border-color

分开设置

一条命令简写，顺序为上右下左

简写为一条指令，第一个值为上下，第二个值为左右

简写为一条指令，只有一个值时，即四个方向的宽度都为此值

一条指令设置：边框为5个像素，虚线，红色

css

/* 为了方便辨识，把内容放到一个盒子里面 */
#box{
    width: 300px;
    height: 300px;
    background-color: blue;
}

/*外边距*/
#box{
    /*margin-top: 50px;!*离上面的距离*!*/
    /*margin-right: 40px;!*右侧的距离*!*/
    /*margin-bottom: 30px;!*下侧的距离*!*/
    /*margin-left: 20px;!*左侧的距离*!*/

    /*!*简写为一条指令，顺序为上右下左 *!*/
    /*margin: 50px 40px 30px 20px;*/

    /*!*简写为一条指令，第一个值为上下，第二个值为左右 *!*/
    /*margin: 50px 40px;*/

    /*简写为一条指令，只有一个值时，即四个方向的距离都为此值 */
    margin: 50px;
}

/*内间距 */
#box{
    /*padding-top: 50px;!*离上边框的距离*!*/
    /*padding-right: 40px;!*离右边框的距离*!*/
    /*padding-bottom: 30px;!*离下边框的距离*!*/
    /*padding-left: 20px;!*离左边框的距离*!*/

    /*!*简写为一条指令，顺序为上右下左 *!*/
    /*padding: 50px 40px 30px 20px;*/

    /*!*简写为一条指令，第一个值为上下，第二个值为左右 *!*/
    /*padding: 50px 40px;*/

    /*简写为一条指令，只有一个值时，即四个方向的距离都为此值 */
    /*padding: 50px;*/
}

/*
边框距离：border-width
边框样式：border-style  None则为无
边框颜色：border-color
*/
p{
    /*一条指令设置：边框为5个像素，虚线，红色*/
    border: 5px dashed red;

    /*border-top-width: 5px;!*上框线*!*/
    /*border-top-style: solid;!*实线*!*/
    /*border-top-color: red;*/
    /*border-right-width: 4px;!*右框线*!*/
    /*border-right-style: dotted;!*点划线*!*/
    /*border-right-color: black;*/
    /*border-bottom-width: 3px;!*下框线*!*/
    /*border-bottom-style:dashed;!*虚线*!*/
    /*border-bottom-color: orange;*/
    /*border-left-width: 2px;!*左框线*!*/
    /*border-left-style:double;!*双线*!*/
    /*border-left-color: red;*/

    /*!*简写为一条指令，顺序为上右下左 *!*/
    /*border-width: 50px 4px 3px 2px;*/
    /*border-style: solid;*/
    /*border-color: red;*/

    /*!*简写为一条指令，第一个值为上下，第二个值为左右 *!*/
    /*border-width: 5px 4px;*/
    /*border-style: solid;*/
    /*border-color: red;*/

    /*!*简写为一条指令，只有一个值时，即四个方向的宽度都为此值 *!*/
    /*border-width: 5px;*/
    /*border-style: solid;*/
    /*border-color: red;

    /*边框为5个像素，虚线，红色*/
    /*border-width: 5px dashed red;*/
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字样式</title>
    <link rel="stylesheet" href="../css/css06.css">
</head>
<body>
    <p>CSS盒模型</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto eaque facilis, id nesciunt nisi nulla provident
        quod! Accusamus architecto debitis dignissimos doloremque explicabo nobis non optio pariatur sapiente, temporibus
        vitae!</p>
    <div id="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae delectus harum, magnam maiores nihil qui
            repellat tempora? Asperiores dolorem, earum laudantium magni necessitatibus nisi placeat, praesentium quae quasi
            sapiente ut!</p>
    </div>
</body>
</html>

测开之路九十四：css之盒子模型的更多相关文章

  1. 测开之路九十：css的引用方式

    第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...

  2. 测开之路九十六：css进阶之元素显示和可见性

    元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...

  3. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  4. 测开之路九十二：css之背景色和背景

    引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...

  5. 测开之路九十九：js函数、事件、window窗体对象

    函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...

  6. 测开之路九十八：js变量和语句

    这里为了方便调试,在jsbin网站上面编写js脚本:https://jsbin.com/?js,console 可以点击增加/减少对应展示分页,Console为控制台部分,Output为页面部分 变量 ...

  7. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  8. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  9. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

随机推荐

  1. jQuery进阶第二天（2019 10.10）

    一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...

  2. 通过runtime对类别进行属性的扩展

    category使用  objc_setAssociatedObject/objc_getAssociatedObject 实现添加属性 属性 其实就是 get/set 方法. 我们可以使用 objc ...

  3. num1，随堂笔记（3月10日）

    1.计算机发展史(略) 2.我们所使用的计算机包括了计算机硬件.操作系统和应用程序与网络. 3.计算机硬件构成---CPU(运算器和控制器).内存.硬盘.输入设备和输出设备. ①CPU是计算机的主要计 ...

  4. 个人智能家居系统 - MQTT服务器搭建（centOS7.3）

    个人智能家居系统 - MQTT服务器搭建(centOS7.3) 0x00 参考 在CentOS7 上安装mosquitto1.4.1服务器,实现MQTT信息推送功能并增加websocket功能 mos ...

  5. Linux 开机自动启动脚本

    1)编写要执行脚本的sh文件mysetup.sh #!/bin/sh ### BEGIN INIT INFO # Provides: land.sh # Required-start: $local_ ...

  6. GNU ARM eclipse 安装--Linux 版本

    官方网站:https://gnu-mcu-eclipse.github.io/ 1. 工具链安装 1.1 xpm 安装 安装 nodejs: sudo apt-get install nodejs s ...

  7. CF1103D Codeforces Round #534 (Div. 1) Professional layer 状压 DP

    题目传送门 https://codeforces.com/contest/1103/problem/D 题解 失去信仰的低水平选手的看题解的心路历程. 一开始看题目以为是选出一些数,每个数可以除掉一个 ...

  8. 基于VUE多人聊天项目

    项目背景 公司平台要做一个通讯系统,本来是java 来做的后面改前端+PHP来做,所以就用VUE来做这个了. github github地址 新人求star 技术栈 vue-axios vuex we ...

  9. Django【第1篇】：Django之MTV模型

    Django框架第一篇基础 一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model ...

  10. sql中count(1)和count(*)有区别吗

    count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...