HTML——盒子模型中的属性

最新推荐文章于 2023-02-08 12:29:32 发布

Jhinhua

最新推荐文章于 2023-02-08 12:29:32 发布

阅读量703

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104900255

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				background-color: palegoldenrod;
				font-size: 0;
			}
			img{
				background-color: plum;
				
				/* 标准盒子模型为例 */
				/* 内容区的大小 */
				width: 150px;
				height: 213px;
				
				/* 内边距: 内容区与边框之间的间隙*/
				/* 上下左右都会有间隙 而且 间隙是一致的 */
				/* padding: 10px; */
				/* 上下左右都会有间隙 第一个控制的是上下， 第二个控制的是左右  */
				/* padding: 10px 30px; */
				/* 上下左右都会有间隙 上    左右    下 */
				/* padding: 10px 30px 50px; */
				/* 上下左右都会有间隙 上  右  下 左 */
				/* padding: 10px 30px 50px 70px; */
				
				/* 某个方向有间隙 其他方向没有 */
				/* 只设置左边间隙 */
				padding-left: 10px;
				/* padding-top: ;
				padding-bottom: ;
				padding-right: ; */
				
				/* 边框 --- 标签的边缘线 宽度默认是0 
					线宽
					线的样式 solid 单实线  double 双实线 dashed段虚线 dotted点虚线
					线的颜色
							顺序没有关系
				*/
				/* border: solid 2px deepskyblue; */
				
				/* 只有一边有边框 其他的没有 */
				/* border-bottom: ;
				border-top: ; */
				border-left: dotted 3px deepskyblue;
				/* border-right: ; */
				
				/* 外边距：标签与其他标签之间的间隙 */
				/* 上下左右的间隙一致 */
				/* margin: 50px; */
				/* margin的赋值情况类似于padding
				 有四种赋值情况 每一种赋值都会使上下左右有间隙的
				 */
				/* 只设置某一边的外边距 */
				/* margin-left: 50px; */
				/* margin-right: ;
				margin-top: ;
				margin-bottom: ; */
				
				/* 切圆角 
				设置四个角的内切圆半径 按照半径在四个角画圆， 最后按照圆弧切割四个角出现圆角
				
				如果图形是正方形 要切圆形， 设置的值就得边长的一半为半径才可以，
				因为不同的图形的边长的值是不一样的  直接赋值50%即可
				
				*/
				border-radius: 10px;
			}
			div{
				height: 100px;
				background-color: palevioletred;
				border: solid 1px palevioletred;
				
				/* 溢出：
				 子标签的大小超过了父标签的大小
				 或者是标签的内容超出了标签的范围
				 
				 处理溢出overflow
					visible  溢出部分是可见的
					hidden 溢出的部分隐藏
					scroll 溢出的部分隐藏  但是可以滚动可见  不管有没有溢出 滚动条都可见
					auto 自适应  溢出的话 溢出部分隐藏 但是滚动可见
							如果没有溢出 正常显示 不会出现滚动条
				 */
				overflow: scroll;
				
			}
			p{
				width: 50px;
				height: 50px;
				background-color: paleturquoise;
				/* 对外的距离上面的间隙 --- 现在体现的效果应该是距离div的间隙 */
				margin-top: 20px;
				/* 
				 结果发现： 设置完成之后 并不是p相对于div向下移动了20px 而是把div一起
				 向下移动了20px ---- 这并不是我们想要的结果
				 出现这种情况的原因：  p和div的边缘紧挨在一起， 浏览器处理的时候没有
				直接就把div当做了p的边缘 所以最终显示是把div向下移动了20px
				
				解决这个问题：
					给div一个明显的边缘接线 让p与div不是紧挨在一起的
					简单的说就是给div设置一个边框， 告诉浏览器div的边不是与p的重叠的
				 */
				
				/* 切圆 */
				/* border-radius: 50%; */
			}
			
			.page{
				width: 70px;
				height: 70px;
				color: black;
				font-size: 14px;
				overflow: scroll;
			}
			
		</style>
	</head>
	<body>
		<!-- 标签之间明明设置间隙 结果在页面上显示的时候 是有间隙的
		 原因：就是标签之间的换行 在页面上体现出来了 因为换行也是文本 以空隙的形式显示
		 出来了 如果想去除掉这个间隙 一般情况下 设置标签的默认字号为0
		 \n这个东西体现出来了
		 -->
		<img src="../img/动漫.jpg" />
		<img src="../img/动漫.jpg" />
		<div>
			<p></p>
		</div>
		
		
		<p class="page">
			hello nice to meet you 
		</p>
		
		<!-- window电脑上的 
		测验一下： 内容溢出标签  overflow scroll 和 auto 的区别
		-->
	</body>
</html>

Jhinhua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML——盒子模型中的属性

属性 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; background-color: palegol...
复制链接

扫一扫

专栏目录