、

...

、

、
、

、、

、

、

　　　　常用内联元素：、、
、、、、、、、、

　　　　常用内联块状元素：

5、盒模型--填充：设置元素与边框之间的距离，叫做填充。用padding设置，padding也分为四部分，即上右下左（padding-top/padding-right/padding-bottom/padding-left），它们是顺时针。

　　　　例子：

　　　　　　padding: 10px 11px 12px 13px;

　　　　上面也可以写为

　　　　　　padding-top:10px;

　　　　　　padding-right:11px;

　　　　　　padding-bottom:12px;

　　　　　　padding-left: 13px;

　　　　如果上下均为10px，左右均为20px，那么可以这样写

　　　　　　padding: 10px 20px;

　　　　如果上下左右相同，均为10px，那么可以这样写

　　　　　　padding: 10px;

6、盒模型--边界：元素之间的距离就是边界，也就是外边框，用margin设置。margin也分为四部分，即上右下左（margin-top/margin-right/margin-bottom/margin-left）。

　　　　例子：

　　　　　　margin: 10px 11px 12px 13px;

　　　　上面也可以写为

　　　　　　margin-top:10px;

　　　　　　margin-right:11px;

　　　　　　margin-bottom:12px;

　　　　　　margin-left: 13px;

　　　　如果上下均为10px，左右均为20px，那么可以这样写

　　　　　　margin: 10px 20px;

　　　　如果上下左右相同，均为10px，那么可以这样写

　　　　　　margin: 10px;

云服务器 idc机房托管 盒模型 盒模型html吗 简述html盒模型 盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1450.html

• 上一篇：详解CSS的Flex布局
• 下一篇：苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

相关文章

• 深入css布局 (1) — 盒模型 & 元素分类

  摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。  深入css布局（1）—— 盒模型 & 元素分类       在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

  ky0ncheng 2019-04-23 13:43 评论0 收藏0

• 深入css布局(1) — 盒模型 & 元素分类

  摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类     在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

  blankyao 2019-08-29 15:25 评论0 收藏0

• 【快速入门系列】CSS盒模型基础

  摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...

  Code4App 2019-08-29 15:20 评论0 收藏0

• 【快速入门系列】CSS盒模型基础

  摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...

  LinkedME2016 2019-08-02 10:22 评论0 收藏0

• css1：盒模型

  摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。 最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...

  TalkingData 2019-08-30 10:59 评论0 收藏0

• 十分钟复习CSS盒模型与BFC

  摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...

  verano 2019-08-02 10:48 评论0 收藏0

发表评论

登陆后可评论

0条评论



Pandaaa

男|高级讲师

我要关注 我要私信

TA的文章

阅读更多

• 在anaconda下安装tensorflow

  阅读 1240·2023-04-25 15:50

• 怎么看网站是服务器还是虚拟主机-服务器与虚拟主机有什么区别？

  阅读 1085·2021-09-22 15:49

• 主机优势是什么意思-电信云主机是什么？

  阅读 2684·2021-09-22 15:06

• 【每日一包0029】merge-descriptors

  阅读 3265·2019-08-30 15:54

• RDD的前端背包

  阅读 2153·2019-08-29 11:33

• node.js来爬取智联全国的竞争最激烈的前十岗位

  阅读 1994·2019-08-23 17:56

• WebGL three.js学习笔记 纹理贴图模拟太阳系运转

  阅读 1949·2019-08-23 17:06

• 每日 30 秒 ⏱ 复制内容到剪贴板

  阅读 1182·2019-08-23 15:55

最新活动















阅读需要支付1元查看

支付并查看

<