2020.9.1
1、CSS margin 属性
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释： 允许使用负值。
例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4 个外边距都是 10px
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.margin="10px 5px"
可能的值
值 描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
2、CSS border 属性
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.border="3px solid blue"
可能的值
值 描述
border-width 规定边框的宽度。参阅：border-width 中可能的值。
border-style 规定边框的样式。参阅：border-style 中可能的值。
border-color 规定边框的颜色。参阅：border-color 中可能的值。
inherit 规定应该从父元素继承 border 属性的设置。
2.1、CSS border-width 属性
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
例子 1
border-width:thin medium thick 10px;
上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框
例子 2
border-width:thin medium thick;
上边框是 10px
右边框和左边框是中等边框
下边框是粗边框
例子 3
border-width:thin medium;
上边框和下边框是细边框
右边框和左边框是中等边框
例子 4
border-width:thin;
所有 4 个边框都是细边框
默认值： medium
继承性： no
版本： CSS1
JavaScript 语法： object.style.borderWidth="thin thick"
可能的值
值 描述
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
2.2、CSS border-style 属性
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。
例子 1
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
例子 2
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线
例子 3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线
例子 4
border-style:dotted;
所有 4 个边框都是点状
默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.borderStyle="dotted double"
可能的值
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。
设置四边框样式
设置每一边的不同边框
2.3、CSS border-color 属性
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：
例子 1
border-color:red green blue pink;
上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色
例子 2
border-color:red green blue;
上边框是红色
右边框和左边框是绿色
下边框是蓝色
例子 3
border-color:dotted red green;
上边框和下边框是红色
右边框和左边框是绿色
例子 4
border-color:red;
所有 4 个边框都是红色
要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。
注释： 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.borderColor="#FF0000 blue"
可能的值
值 描述
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。
3、CSS padding 属性
padding 简写属性在一个声明中设置所有内边距属性。说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释： 不允许使用负值。
例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例子 4
padding:10px;
所有 4 个内边距都是 10px
默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.padding="10px 5px"
可能的值
值 描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。
4、CSS overflow 属性
overflow 属性规定当内容溢出元素框时发生的事情。说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值： visible
继承性： no
版本： CSS2
JavaScript 语法： object.style.overflow="scroll"
可能的值
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
5、CSS position 属性
position 属性规定元素的定位类型。说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position="absolute"
可能的值
值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
TIY 实例
定位：相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
定位：绝对定位
本例演示如何使用绝对值来对元素进行定位。
定位：固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
设置元素的形状
本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。
Z-index
Z-index可被用于将在一个元素放置于另一元素之后。
Z-index
上面的例子中的元素已经更改了Z-index。
6、CSS height 属性
height 属性设置元素的高度。
width 类似
说明
这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
默认值： auto
继承性： no
版本： CSS1
JavaScript 语法： object.style.height="50px"
可能的值
值 描述
auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。
TIY 实例
使用像素值设置图像的高度
本例演示如何使用像素值设置元素的高度。
使用百分比设置图像的高度
本例演示如何使用百分比值来设置元素的高度。
7、CSS float 属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释： 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.cssFloat="left"
可能的值
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
TIY 实例
float 属性的简单应用
使图像浮动于一个段落的右侧。
将带有边框和边界的图像浮动于段落的右侧
使图像浮动于段落的右侧。向图像添加边框和边界。
带标题的图像浮动于右侧
使带有标题的图像浮动于右侧
使段落的首字母浮动于左侧
使段落的首字母浮动于左侧，并向这个字母添加样式。
创建水平菜单
使用具有一栏超链接的浮动来创建水平菜单。
创建无表格的首页
使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
