html-盒子模型及pading和margin相关
margin:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
margin 外边距 元素与其他元素的距离（边框以外的距离）
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
margin: auto; 快速左右居中
垂直方向： margin-bottom,margin-top 取两者之间的较大值
水平方向： margin-left,margin-right 取两者的和
overflow:hidden; 解决内边距重叠问题
*/
div{
width: 300px;
height: 200px;
background: antiquewhite;
/*border: 1px solid red;*/
/*margin: 50px;*/
/*margin: auto;*/
/*display: inline-block;*/
overflow: hidden;
}
.box{
/*margin-top: 100px;*/
}
p{
width: 50px;
height: 50px;
background: aqua;
/*margin: 100px;*/
margin: 100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<div class="box"></div>
</body>
</html>
padding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
padding 内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
*/
div{
width: 300px;
height: 200px;
border: 1px solid red;
/*padding: 20px;*/
/*padding-left: 50px;*/
/*padding-top: 50px;*/
padding: 50px 0 50px;
}
</style>
</head>
<body>
<div>
padding 内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
</div>
</body>
</html>
盒子大小：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 150px;
height: 150px;
background: aqua;
border: 10px solid red ;
padding: 20px;
margin: 50px;
}
/*
盒子大小=样式宽 + 内边距 + 边框
盒子宽度=左border+右border+width+左padding+右padding
盒子高度=上border+下border+height+上padding+下padding
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
html-盒子模型及pading和margin相关的更多相关文章
- css盒子模型及属性介绍（margin,padding）
每个HTML元素都可以看作装了东西的盒子 盒子具有宽度(width)和高度(height) 盒子里面的内容到盒子的边框之间的距离即填充(margin) 盒子本身有边框(border) 而盒子边框外和其 ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 标准盒子模型和IE盒子模型
标准盒子模型 ＝ margin + border + padding + content (content = width | height) IE盒子模型 ＝ margin + content ( ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- DIV+CSS两种盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...
- DIV + CSS 盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- 【css】IE盒子模型和标准W3C盒子模型
其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...
- 盒子模型--IE与标准
从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 ma ...
随机推荐
- Hibrenate之事务的理解以及代码编写
3 事务概念 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务,SQL Server能将逻辑相关的一组操作绑定 ...
- vue 循环前十条数据
v-for="(item, index) in items" v-if="index<10"
- 【Linux】基本命令操作
一.用户操作 1.新增用户 useradd -u 1101 -g zte -d /home/xhs -m xhs --其中,1101,为用户ID,尽量使用500以上的 zte,为用户组 /home/x ...
- js获取url参数值，并解决中文乱码
<script type="text/javascript"> function GetQueryString(name) { var reg = new RegExp ...
- 一.定时任务详解https://i.cnblogs.com/EditPosts.aspx
定时任务的详解 h每小时运行 d每天运行 w每周运行 m每个月运行 中毒时查看系统定时任务是否有病毒的脚本. crontab -l 查看用户的定时任务 crontab -e 进入编辑界面增加 ...
- Mycat节点扩缩容及高可用集群方案
数据迁移与扩容实践: 工具目前从 mycat1.6,准备工作:1.mycat 所在环境安装 mysql 客户端程序. 2.mycat 的 lib 目录下添加 mysql 的 jdbc 驱动包. 3.对 ...
- servlet 遇到的奇怪问题
一. servlet URl 连接多了 %09 原因value里面多了个空格 value=" value'; 改成 value="value'; 二.servlet get方法可以 ...
- cf1144G 将串分解成单调递增和递减子串（贪心）
这算哪门子dp.. 具体做法就是贪心,建立两个vector存递增序列递减序列,操作过程中a可以合法地匀一个给b 就是判断第i个数放在递增序列里还是放在递减序列里,需要根据后面的数来进行决策 #incl ...
- Nginx详解一：Nginx基础篇之环境准备
环境确认: 1.确认系统网络可用 2.确认yum源可用 3.确认关闭iptabkes规则 查看是否有iptabkes规则:iptables -L 如果有的话:iptables -F关闭 保险起见也看看 ...
- Python中什么是深拷贝和浅拷贝且有什么区别
浅拷贝: >>> a = [1, 2, 3] >>> b = a >>> a [1, 2, 3] >>> b [1, 2, 3] ...