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 ...
随机推荐
- vue 轮播图插件 vue-awesome-swiper
1.npm安装 npm install vue-awesome-swiper --save 2.vue 引入 //在main.js 中全局引入 import VueAwesomeSwiper from ...
- mysql视图的作用
测试表:user有id,name,age,sex字段 测试表:goods有id,name,price字段 测试表:ug有id,userid,goodsid字段 视图的作用实在是太强大了,以下是我体验过 ...
- laravel 里面结合关联查询 的when()用法
Laravel 5.6 里面的when用法: $name = $request->get('name'); //活动标题 $start_time = $request->get('star ...
- Datagrip导入导出为一个sql文件详细说明 (mysql)
Datagrip导入导出为一个sql文件详细说明 导出: (我的无法截图, 借用一张) 导入: (我的无法截图, 再借用一张) 完
- python目录和文件的列表清单
import os # 通过给定的文件夹,列举出这个文件夹当中,所有的文件,以及文件夹,子文件夹当中的所有文件def listFilesToTxt(dir,file): # 1.列举出,当前给定的文件 ...
- python is和==的区别
# ==和is # ==用来判断值是否相等# is是用看来判断是不是指定了同一个东西,判断是不是指向了同一个地址等 a = [11,22,33]b = [11,22,33] a == b # True ...
- 金蝶k3完全卸载，注册表手动清理
HKEY_LOCAL_MACHINE\SOFTWARE\KINGDEE 如果操作系统是64位的,在注册表目录:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node下面还有一个 ...
- Leetcode刷题第004天
class Solution { public: int findKthLargest(vector<int>& nums, int k) { , nums.size()-, k) ...
- mybatis_generator_逆向工程的使用笔记
1:解压mybatis_generator_1.3.1.zip文件. 2:把features,pougins文件夹copy到D:\java\eclipse\eclipse目录下(D:\java\ecl ...
- [转] js实现对图片的二进制流md5计算
//计算图片md5 function img_MD5(img_path,callback) { plus.io.resolveLocalFileSystemURL(img_path, function ...