13、盒子模型

最新推荐文章于 2022-04-21 21:09:44 发布

青叶的全栈之路

最新推荐文章于 2022-04-21 21:09:44 发布

阅读量191

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/dream_AI/article/details/107143418

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

盒子模型（Box Model）

盒子组成
圆角边框
阴影

一、盒子组成

CSS盒子模型本质上就是一个盒子，其组成为：外边距、边框、内边距、实际内容。

在这里插入图片描述

1.1、外边距（margin）

语法：margin:length;

margin：定义外边距的大小，单位（px）

/*写法1*/
#div1{
    margin:10px;/*上下左右的外边距都是10px*/
}
/*写法2*/
#div2{
    margin:10px 20px 30px 40px;/*顺序为：上右下左*/
}
/*写法3*/
#div3{
    margin:10px 20px;/*上下外边距为10px，左右外边距为20px*/
}
/*写法4*/
#div4{
    margin-top:10px;/*上外边距为10px*/
    margin-right:20px;/*右外边距为10px*/
    margin-bottom:30px;/*下外边距为10px*/
    margin-left:10px;/*左外边距为10px*/
}

1）、关于盒子水平居中问题：
通过设置margin属性是可以实现盒子水平居中的，但是有一个前提就是必须指定盒子的宽度。

/*通过margin属性实现盒子的水平居中对齐*/
#div{
    width:100px;
    height:50px;
    margin:0 auto;/*就这么简单*/
}

2）、关于嵌套元素的垂直外边距的塌陷问题。

当子元素和父元素之间没有其它元素时，子元素和父元素同时定义外边距，如果子元素的外边距小于父元素的外边距，那么子元素的外边距会失效。如果子元素的外边距大于父元素的外边距，则父元素的外边距大小取决于子元素，而子元素的外边距仍然失效。解决方案：为父元素定义边框或内边距。

#outer {
    width: 200px;
    height: 200px;
    margin-top:30px;
    background-color: hotpink;
}
#inner{
    width: 100px;
    height: 100px;
    margin-left: 20px;/*子元素的外边距失效*/
    background-color: red;
}

1.2、内边距（padding）

语法：padding:length;

padding：定义内边距的大小，单位（px）
padding有可能会撑开盒子的，解决办法：不给盒子设置宽高属性。

/*写法1*/
#div1{
    padding:10px;/*上下左右的内边距都是10px*/
}
/*写法2*/
#div2{
    padding:10px 20px 30px 40px;/*顺序为：上右下左*/
}
/*写法3*/
#div3{
    padding:10px 20px;/*上下内边距为10px，左右内边距为20px*/
}
/*写法4*/
#div4{
    padding-top:10px;/*上内边距为10px*/
    padding-right:20px;/*右内边距为10px*/
    padding-bottom:30px;/*下内边距为10px*/
    padding-left:10px;/*左内边距为10px*/
}

1.3、边框（border）

语法：border:border-width||border-syle||border-color;

border-width：定义边框的粗细，单位（px）
border-style：定义边框的样式。可选值：none（无边框）、solid（实线边框）、dashed（虚线边框）、dotted（点线边框）、double（双实线边框）
border-color：定义边框的颜色

/*简单写法*/
#div1{
	width: 200px;
    height:100px;
    border：2px solid red;
}
/*复合边框*/
#div2{
    width: 200px;
    height:100px;
    border-top:2px solid red;/*上边框*/
    border-bottom:2px double blue;/*下边框*/
    border-left:none;/*左边框*/
    border-right:none;/*右边框*/
}

盒子元素的实际宽度=左右外边距+边框厚度2+左右内边距+内容宽度
盒子元素的实际高度=上下外边距+边框厚度2+上下内边距+内容高度

<!--用border制作三角形-->
<body>
    <div></div>
</body>

div{
    width:0;
    height: 0;
    border:100px solid transparent;/*将四个边框设置为透明色*/
    border-bottom-color:red;/*将需要的边框颜色覆盖*/
}

在这里插入图片描述

二、圆角边框

2.1、说明

在CSS3中新增了圆角边框样式，这样就可以通过border-radius属性设置圆角了。

参数值可以是数值或者百分比。
如果是正方形，将圆角半径设置为宽高的一半就可以获得一个圆形的盒子了。
该属性是一个简写值，可以给4个值，分别代表左上角、右上角、右下角、左下角的圆角半径。
如果给2个值，则代表左上角-右下角、右上角-左下角。

2.2、使用

.div{
	width:200px;
	height:200px;
	border:#D3D3D3 3px solid;
	border-radius: 100px;/*圆边框诞生。。。*/
}

三、阴影

3.1、盒子阴影

在CSS3找那个新增了盒子阴影的样式，我们可以使用box-shadow属性为盒子添加阴影样式

语法：box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow：必填。水平阴影的位置。可以是负值
v-shadow：必填。垂直阴影的位置。可以是负值
blur：选填。模糊阴影的距离
spread：选填。阴影的尺寸（影子的大小，0刚好是原图大小）
color：选填。阴影的颜色
inset：选填。将外部阴影改为内部阴影

#outer{
    width: 200px;
    height: 200px;
    margin:50px auto;
    background-color: hotpink;
}
#outer:hover {
    box-shadow: 5px 5px 10px 0 grey;/*添加阴影*/
}

3.2、文字阴影

在CSS3中，我们可以使用text-shadow属性为文字添加阴影

语法：text-shadow:h-shadow v-shadow blur color;

h-shadow：必填。水平阴影的位置。可以是负值
v-shadow：必填。垂直阴影的位置。可以是负值
blur：选填。模糊阴影的距离
color：选填。阴影的颜色

#outer{
    font-size:50px;
    color:red;
    font-weight:600;
    text-shadow:10px 10px 10px grey;
}

关于CSS属性的书写顺序（建议）：

布局定义属性：display>position>fload>clear>visiblity>overflow
自身属性：width>height>margin>padding>border>background
文本属性：color>font>text-decoration>text-align>vertical-align>white-space>break-word
其他属性（CSS）：content>cursor>border-radius>box-shadow>text-shadow>…