CSS选择器

盒子模型

 

 

盒子模型之宽度和高度

宽度和高度的单位

1。px 像素 写死

2. % 百分比 动态计算的单位（自适应 响应式）

 

 

 

 

 

 

 

 

盒子模型之内边距padding

图一：padding-left:10px;

padding-bottom:20px;

=>padding :0 0 20px 10px;

图二：padding-top:10px;

padding-right:20px;

padding-bottom:20 px;

=>padding :10px 20px 20px 0;

内边距会影响盒子在浏览器中的实际大小

盒子模型之边框线border的使用技巧

border：边框的宽度 边框线类型 边框线的颜色

边框线类型

solid 实线

dashed 虚线

dotted 点状线

边框线的颜色：黑色

颜色的英文名 black

# #000

rgb rgb（0,0,0）

border:10px solid #000 如果没有指明方向的情况下 表示四个方向都有边框线而且边框线相等

border-top 上边框线

border-right 右边框线

border-bottom 下边框线

border-left 左边框线

如果border属性只有边框宽度 没有边框线类型和颜色 则border属性失效

border制作小箭头

三角箭头原理：正方形的任意相邻的两条边线

然后旋转一定的角度 得到我们需要的任意方向的箭头

deg 角度单位 rotate 旋转角度

小三角的大小由正方形的宽高去控制

小三角的粗细由border边框线的宽度控制

小三角的颜色由border边框线颜色去控制

border制作三角形

三角形原理：利用border的3个属性：border-width/border-style/border-color去实现

宽度和高度要为0 实现一个由4个小三角组成的正方形

要什么方向的三角形只需要保留这个方向的颜色色值 其余方向的颜色色值设为透明transparent即可

三角形的大小 由border-width边框线的宽度去控制

三角形的颜色 由border-color边框线的颜色去控制