2021-3-2-14-28
盒子模型:
关于css记录的笔记简要保存如下:
`
<!--
作者:learningFromsxt
时间:2021-03-01
描述:css盒子模型学习:
div标签:
块级标签:主要用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在。
特点:
默认宽度是页面的宽度,但可以设置
高度默认是没有的,但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的。
盒子模型:
外边距:margin
作用:设置元素与元素之间的间隔
居中设置:margin:0px auto;上下为0px,左右居中
边框:border
作用:用来设置元素与元素之间的边框大小
内边距:padding
作用:设置内容与边框之间的距离
注意:不会改变内容区域的大小
可以单独设置上下左右
内容区域:
作用:改变内容区域的大小
设置宽和高不会改变内容区域的大小
-->
<style type="text/css">
img{
width:49.53%;
}
#showdiv{
border:solid 3px;
width:40%;
height: 400px;
margin-bottom: 10px;
margin: auto;/*左右居中*/
padding:10px;
}
#div01{
border: dashed 3px;
width:40%;
height:200px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="showdiv">
<img src="img/img08.jpg" />
<img src="img/img08.jpg" />
</div>
<div id="div01">
</div>
</body>
` 代码块保存上传时存在格式错误,显示不全:缺少head的前标签。 重点:关注style区域的css代码以及注释区