2021-07-13-盒子模型课堂笔记

7月13日课堂笔记

css三大模块：盒子模型、浮动、定位

盒子模型（重点）

盒子模型：

• 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

1.盒子边框（border）

语法格式：border：border-width| border-style | border-color ;

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

提示：我们在开发中，经常把表单原本的边框去掉，然后添加任意的样式。（border: 0）

1.1 border的三角原理

可以通过将元素宽高设置为0，实现将不需要方向的border设置为透明（transparent），而通过控制border来得到想要的三角形了。。

#box{
  width:0px;
  height:0px;
  border-top: 20px solid red;
  border-right:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid transparent;
}

1.2 圆角边框（css3）

语法格式：border-radius: 左上角  右上角  右下角  左下角;
其中每一个值可以为 数值或百分比的形式。 

2.内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

2.1 属性值设置

值的个数	表达意思
1个值	padding： 只设置一个值就代表上下左右边距都是设置的值<