11.21 CSS学习-下午
CSS框模型,看似一个盒子,封装周围的HTML元素,包括:边距、边框、填充和实际内容 Margin:清除边框区域,没有背景色,完全透明 Border:边框周围的填充和内容,边框是受到盒子的背景色影响 Padding:清除内容周围的区域,会受到框中填充的背景颜色影响 Content:盒子的内容,显示文本和图像 指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度,要知道,完全大小的元素,你还必须添加填充,边框和边距。 div.ex{ width: 220px; padding: 10px; border: 5px solid gray; margin: 5px; } 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 边框属性:允许指定一个元素边框的样式和颜色 border-style边框样式:指定显示什么样的边界 dotted:点线边框 dashed:虚线框 solid:实线框 double:定义两个边界框 groove:3D沟槽边界 ride:3D脊边界 inset:3D嵌入边框 outset:3D突出边框 border-width边框宽度 指定宽度的两种方法:1)指定值,如1px、1em;2)使用3个关键字之一,thin,medium,thick border