CSS3 3

最新推荐文章于 2024-07-25 16:45:46 发布

Life3rsami

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量71

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/a258139/article/details/129117888

版权

盒子模型

在盒子模型中，可以把所有HTML元素看作成一个盒子，即一个盛装内容的容器。而这个容器包含：边框（border），外边距（margin），内边距（padding）和实际内容（content）。

边框宽度	作用
border-width: 5px	设置四个边框均为5px
border-width: 5px 10px	设置上下边框为5px，左右边框为10px
border-width: 5px 10px 5px	设置上边框为5px，左右边框为10px，下边框为5px
border-width: 5px 10px 10px 5px	设置上边框为5px，左边框为10px，右边框为10px，下边框为5px

边框的复合属性：
border: 边框宽度边框样式边框颜色

margin-top：设置元素的上外边距
margin-right：设置元素的右外边距
marginbottom：设置元素的外内边距
margin-left：设置元素的外内边距
margin：复合属性，在一个声明种设置所有外边距属性

margin：10px；／／同时设置4个边框
margin：10px 20px；／／上下10px；左右20px
margin：10px 5px 20px；／／上10px；左右5px；下20px
margin：10px 5px 20px15px；／／上右下左

padding-top：设置元素的上内边距
padding-right：设置元素的右内边距
padding-bottom：设置元素的下内边距
padding-left：设置元素的左内边距
padding：复合属性，在一个声明种设置所有内边距属性

padding：10px；／／同时设置4个边框
padding：10px 20px；／／上下10px；左右20px
padding：10px 5px 20px；／／上10px；左右5px；下20px
padding：10px 5px 20px15px；／／上右下左

盒子的总宽度 = width + 左右内边距之和 + 左右边框宽度之和

盒子的总高度 = height +上下内边距之和 +上下边框高度之和

外盒的总宽度 = width + 左右内边距之和 + 左右边框宽度之和 + 左右外边距之和

外盒的总高度 = height + 上下内边距之和 + 上下边框高度之和 +上下外边距之和

定义和用法：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

值	描述
content-box	宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit	规定应从父元素继承 box-sizing 属性的值。

定义和用法：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框

语法：
border-radius: 1-4 length | %  /  1-4 length | %;

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

定义和用法：
box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮

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