初学者之CSS学习（六）盒子模型

<html>
<head>
<meta charset="utf-8"/>
<title>盒子模型</title>
<style type="text/css">
/*大部分HTML元素的盒子属性（padding,margin)都默认为0
有少数HTML元素的浏览器默认值不为0，例如body p ul li
form 标记等，因此我们有时有必要先设置它们的这些属性为0
CSS全局reset*/
*{
padding: 0;
margin: 0;
}
#box{
width: 400px;
/*边框
粗细样式颜色*/
border: 5px solid purple;

/*内边距
指的是盒子与边框之间的距离
盒子里的width指的是内容的宽度，如果有内边距则div盒子会被撑开，内容宽度不变
加入内边距的div盒子宽度：5*2+400+30*2=470*/
/*padding: 30px;*/

/*各个方向的内边距*/
/*padding-top: 20px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 150px;*/

/*一个参数的时候，代表上下左右四个方向
两个参数的时候，第一个代表上下，第二个代表左右方向
三个参数的时候，第一个代表上，第二个代表左右，第二个代表下方向
四个参数的时候，代表上右下左四个方向，也就是顺时针方向*/
padding: 30px 60px 10px 20px;
}

img{
width: 100px;
height: 100px;
}
/*外边距
上下外边距会合并，左右外边距会累加*/
#meinv{
margin-right: 100px;
}
#shuaige{
margin-left: 50px;
}

div{
width: 300px;
height: 200px;
}
#box1{
background: purple;
margin-bottom: 100px;
}

#box2{
background: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="box">
中华民族是最值得自豪的民族，不仅是因为我们拥有世界最多的人口，更因为我们拥有热爱祖国献身祖国的高尚风范、拥有善于学习勇于创新的聪明智慧、拥有志存高远兼济天下的宽广心胸、拥有百折不挠勇往直前的英雄气概。每到国家民族危难之时，总有英雄豪杰挺身而出，为大家舍小家，“亟拯斯民于水火，切扶大厦之将倾。
</div>

</body>
</html>

初学者之CSS学习（六）盒子模型相关推荐

CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
前端--CSS选择器，盒子模型学习
文章目录一.CSS 1.概述 2.入门案例二.CSS选择器 1.概述 1)标签名选择器:根据属性条件选中网页中的所有元素 2)class选择器:根据class属性的选中元素(添加class属性,通 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型内边距(padding) 属性设置内盒尺寸计算 padding什么时候不影响盒子大小盒子模型内边距(padding) pa ...
CSS基础(part10)--盒子模型之边框
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型盒子模型简介边框(border) 边框属性举个例子边框综合设置盒子边框写法总结表边框重叠设置盒子模型盒子模型简介 ...
（9）css常用样式--盒子模型
一.CSS盒子模型介绍盒子模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin. ...

初学者之CSS学习（六）盒子模型

初学者之CSS学习（六）盒子模型相关推荐

最新文章

热门文章