-
属性
<!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>
HTML——盒子模型中的属性
最新推荐文章于 2023-02-08 12:29:32 发布