CSSday06笔记

2017-02-24 本文已影响0人兔子和猪

一、盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

二、边框

1、设置内容样式属性常用属性值

上边框：

border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;

右边框：

border-right-style:样式; border-right-width:宽度;border-right-color:颜色；

合写: border-right:宽度样式颜色;

下边框：

border-bottom-style:样式; border-bottom-width:宽度;border-bottom-color:颜色;

合写: border-bottom:宽度样式颜色;

左边框:

border-left-style:样式; border-left-width:宽度;border-left-color:颜色;

合写：border-left:宽度样式颜色;

边框样式:none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线

综合设置:border-style:上，右，下，左；上，左右，下；上下，左右；上下左右.

注意: 设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。

常用的复合属性有font、border、margin、padding和background等

多学几招

1.表单的边框通常改为0；border:0 none;//兼容所有浏览器

2.表格的细线边框table{ border-collapse:collapse; }

3.轮廓（链接有虚线和文本框有蓝色边框）

outline-style:none;

三、内边距

padding属性用于设置内边距，也是复合属性，相关设置如下

padding-top:上内边距；padding-right:右内边距

padding-bottom:下内边距；padding-left:左内边距

padding:上内边距[右内边距下内边距左内边距]

内边距是享有背景色的。

圣诞树：