<!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>
6012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
