<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
盒模型 css盒模型本质上就是一个盒子
用来封装周围的html的元素,包括(width,height)实际内容+(padding)内填充+(border)边框+(margin)外边距
边框:边框是围绕内容和外间距之间的一条或者多条线
边框的宽度:border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
边框的样式:border-style
取值:solid实线
dashed虚线
dotted点状线
double双实线
none无边框线
groove阴影
边框的颜色:border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
transparent( 透明颜色)
简写:border:宽度 样式 颜色 (定义边框四条边)
定义单个方向:border-方向:宽度 样式 颜色
边框的样式颜色宽度没有顺序要求
如果没有设置边框的宽度,默认是3px
默认颜色是黑色
样式没有默认,必须设置
边框会影响盒子的实际大小
-->
<!--
三角形
①宽高设为0
②设置边框,边框颜色为透明色
③确定三角形的朝向然后该边框的颜色
④把该边框的对立边取消掉
-->
<!--
padding:内填充,内边距
定义元素边框和元素内容之间的距离
取值:px
em
百分比
不允许有负值
-->
<!--
margin 用于设置盒子与盒子之间的距离
margin-top
margin-bottom
margin-left
margin-right
取值:px
em
百分比
允许用负值
outo 浏览器自动计算,实现已知宽度的盒子水平居中
-->
<!--
图片下产生间隙的原因
父元素没有设置高度,由图片撑开,就会产生间隙
方法:①给img的父元素设置高度,和图片的高度一致
②给img的父元素设置font-size为0,或者line-height为0
③给img标签转换为块级元素,display:block;
④给img标签设置垂直对齐方式 vertical-align:middle/top/bottom/baseline;
-->
</body>
</html>