css Learning3

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的空间尺寸计算公式是这样的：

元素空间尺寸宽度=宽度+左填充padding+右填充padding+左边框border+右边框border+左边距margin+右边距margin

元素空间尺寸高度=高度+上填充padding+下填充padding+上边框border+下边框border+上边距margin+下边距margin

元素的实际总宽/高度最终计算公式是这样的：

元素实际宽度=宽度+左填充padding+右填充padding+左边框border+右边框border
元素实际高度=高度+上填充padding+下填充padding+上边框border+下边框border

Content(内容)

宽：width px；
高：height px；
定义的内容的宽和高。

Padding(内边距)

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

内边距是可以被背景色渲染的。
padding属性可以有一到四个值
四值法：
单值：上下左右。
双值：上下 左右。
三值：上 左右 下
四值：上 右 下 左 顺时针。

Border(边框)

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框样式 border-style

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-style属性可以有1-4个值：
border-style:dotted solid double dashed; 上 右 下 左
border-style:dotted solid double; 上 左右 下
border-style:dotted solid; 上下 左右
border-style:dotted; 上下左右

边框宽度 border-width

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

边框颜色 border-color

可以设置的颜色：
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

Margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin属性可以有一到四个值。四值法同border

其他

溢出内容隐藏

overflow: hidden;

外边距塌陷(外边距合并)

垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。

取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。

如果两个margin值为负数，取值为绝对值最大的。

如果一正一负，结果为两者之和。

如何解决？

            /* 解决外边框合并问题 */
            /* 1. 给父元素添加padding代替子元素margin */
            /* padding-top: 50px;*/
            /* 2. 给父元素添加边框 */
            /* border: 1px solid #FF6D5D; */
            /* 3. 父元素设置overflow */
            /* overflow: hidden; */

如何用html+css做出一个三角形

/*方法一*/
        div {
       		width: 0px;
            height: 0px;
            border: 30px solid orange;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
/*方法二*/
         div {
            width: 0px;
            height: 0px;
            border: 20px solid white;
            border-bottom: none;
            border-top-color: green;
        }

2020/11/09