CSS+DIV如何新建一个盒子
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS+DIV如何新建一个盒子相关的知识，希望对你有一定的参考价值。
<html><head>
<title>无标题文档</title>
<style type="text/css">
.box width:500px; height:500px; border:1px solid #F00;
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这就是一个简单的div盒子，盒子就是所谓的一个个div，N个DIV组成的就是HTML网页。具体的你需要看一些相关书籍学习一下。 参考技术A 盒子只是他们说的一个理论。
一个div也就等于是一个盒子。。
所以盒子是无数个div建起来的，是这个道理。
希望你自己能手动去多试，你试过之后就会明白这个道理，或者你加下这个设计流的群：752977241 进来不会问便是。。 参考技术B 我想你对盒子理解有点儿问题。css+div确实应用的是盒子模型。但这个盒子不是你自己创建的。我们可以把html中任何可包含页面内的其它元素的html元素看成一个盒子。进而控制它的显示样式。 参考技术C float属性不为none或overflow不为visible或position为absolute,fixed或display为inline-block,table-cell,table-caption,flex,inline-flex 参考技术D 盒子只是他们说的一个理论。
一个div也就等于是一个盒子。。
所以盒子是无数个div建起来的，是这个道理。
盒子模型
CSS+DIV
将数据封装到div中，页面中都是有很多div组成的，通过css布局(通过css属性布局)完成这些div位置的存放，一个div就是一个盒子。
边框 border:{
--left
--right
--top
--bottom
};
#div_1{
border-top:1px solid #ccc;
border-bottom:1px dashed #ccc;
border-right:1px dotted #ccc;
border-left:1px double #ccc;
};
solid:实线
dashed:虚线
dotted:点线
double:双线
内边距/内填充
属性：padding{
--top
--bottom
--right
--left
};
padding:20px 20px 20px 20px;
外边距
margin 属性{
--top
--bottom
--right
--left
};
margin:20px 20px 20px 20px
在div中，如果margin是0,px，为什么还要空白?那空白就是body本身距离浏览器边框的距离。
所以要设置body{margin:0px};
浏览器解析body的方式不同，造成边宽边窄不同。
以上是关于CSS+DIV如何新建一个盒子的主要内容，如果未能解决你的问题，请参考以下文章