css盒子模型
Posted fgcs111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css盒子模型相关的知识，希望对你有一定的参考价值。
资料来源于：B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ，本人才疏学浅，记录其笔记以供他日回顾
视频链接
知识点总结
<!--
IE浏览器：实际尺寸 = width
chrome浏览器：实际尺寸= width+左右borderwidth+padding
CSS盒子模型：
1.border 边框
2.margin 间距
3.padding 填充
-->
代码示例
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1
width:400px;
height:400px;
background-color:greenyellow;
/* 1. border 边框样式 */
border-width:1px; /*边框粗细*/
border-style:solid; /*边框样式：solid(实线) , dotted(点状线) ... */
border-color:blue; /*边框颜色*/
/* border:4px double blue;*/
/* border-top : 4px dotted blue;*/
#div2
width:150px;
height:150px;
background-color:darkorange;
margin-top:100px;
margin-left:100px;
/*margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */
/* padding : 填充 */
padding-top:50px;
padding-left:50px;
#div3
width:100px;
height:100px;
background-color:aquamarine;
/*
margin-top:50px;
margin-left:50px;
*/
#div4
width:200px;
height:200px;
margin-left:100px;
background-color:greenyellow;
/*加了这个属性后，div就紧贴边缘线了，不加的话，div与左侧和上方会有一条缝隙 */
body
margin:0;
padding:0;
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> </div>
</div>
</div>
<div id="div4"> </div>
</body>
</html>
以上是关于css盒子模型的主要内容，如果未能解决你的问题，请参考以下文章