css三大模块之一——盒子模型

最新推荐文章于 2024-07-16 17:18:30 发布

单纯、

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量1.3k

点赞数 31

文章标签：前端 html css3 html5 css 学习笔记

本文链接：https://blog.csdn.net/qq_65174063/article/details/139757429

版权

盒子模型组成部分:

content(width/height)

padding(内边距)

border(边框)

margin(外边距)

1.盒子边框

border : border-width border-style border-color;

粗细样式颜色

边框样式（border-style），常用属性值如下：

none：没有边框

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

边框四个方向：

border-top 上

border-right 右

border-bottom 下

border-left 左

圆角边框

<style>
        .con1,
        .con2,
        .con3 {
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 20px;
        }

        .con1 {
            /* border-radius: 10px 10px 10px 10px; */
            /* 左上 右上 右下  左下 */
            border-radius: 10px;

        }

        .con2 {
            border-radius: 10px 20px 30px 40px;
        }

        .con3 {
            width: 200px;
            height: 200px;
            /* 圆的写法 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
</style>

<div class="con1">圆角边框</div>
<div class="con2">圆角边框</div>
<div class="con3">圆角边框</div>

运行结果

2.内边距

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

1个值:上下左右都是20px

padding: 20px;

2个值:上下左右

padding: 10px 20px;

3个值:上左右下

padding: 10px 20px 30px;

顺时针上右下左

padding: 10px 20px 30px 40px;

3.外边距

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边

1个值:上下左右都是20px

margin: 20px;

2个值:上下左右

margin: 10px 20px;

3个值:上左右下

margin: 10px 20px 30px;

顺时针上右下左

margin: 10px 20px 30px 40px;

外边距塌陷

外边距塌陷，也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距的现象。这种现象主要发生在垂直相邻的块元素之间，当给其中一个元素设置margin-bottom，而给另一个元素设置margin-top/bottom时，两个边距会组合在一起，形成一个单一的外边距，且取两者中的较大值。这种行为会导致预期的间距与实际显示的间距不一致，从而影响页面的布局和外观。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

盒子居中的要素：

块元素
版心内容中心的宽度
margin: 0 auto;

清除内外边距：使用通配符*来清除内外边距

* {
            margin: 0;
            padding: 0;
        }

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

并列的元素外边距的合并情况：合并后的外边距为两者中的较大者

嵌套的外边距的合并情况：外边距塌陷

解决方案：

给父元素设置1px的上边框或者1px 上内边距
overflow:hidden; 溢出隐藏 BFC原理

/* 1.给父元素设置1px的上边框或者1px 上内边距 */
            /* border-top: 1px solid red; */
            padding-top: 1px;

/* 2.overflow:hidden; 溢出隐藏 BFC原理*/
            /* 合并后的外边距为两者中的较大者 */
            overflow: hidden;

行内以及行内块元素如果html元素中间右回车将会被解析为空白符 ,会有空白
一行内显示的元素当空间不足,会自动换行排列

插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒子模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 用 background-position */
	}