CSS 区块、方框、边框样式

left表示不允许左边有浮动对象 right表示不允许右边有浮动对象

none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。

默认值:none

浮动的主要作用是将块元素排在同一行(span也可以设置浮动);

浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";

浮动元素向它遇到父元素的边框就停止浮动;

浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;

浮动元素只会影响后面的元素, 不会影响前面的元素：

浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;

第一个：需要清除浮动

第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用

清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者

当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；

(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。

可以分别设置分别设置上、右、下、左内边距。

padding-top

padding-right

padding-bottom

padding-left

p {padding:20px} 设置设置上、右、下、左内边距都为20px

p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px

默认值：0。

要懂得, 用小属性层叠大属性：

padding: 20px;

padding-left: 30px;

注意：大属性要写在前面, 小属性写在后面;

比如：

div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}

padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。

(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。

可以分别设置上边界、右边界、下边界、左边界的值。

margin-top

margin-right

margin-bottom

margin-left

p {margin:20px}

p {margin:10px 0px 15px 5px;}

默认值：0

marign：上边界值 右边界值 下边界值 左边界值

margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。

如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：

div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/

5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)

border面板可以设置对象边框的宽度、颜色及样式。

(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。

border-top-width border-right-width border-bottom-width border-left-width

thin 定义细的边框。

medium 默认。定义中等的边框。

thick 定义粗的边框。

length 允许您自定义边框的宽度。

inherit 规定应该从父元素继承边框宽度。

默认值: medium

(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。

注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。

border-top-color border-right-color border-bottom-color border-left-color

默认值: not specified(未规定的)

(3)border-style：设置边框样式。

border-top-style border-right-style border-bottom-style border-left-style

可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、

groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。

默认值:none(无边框)

推荐：表单输入框：inset(凹边) 按钮：outset(凸边)

兼容性问题

比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：

如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。

就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。

border可以没有： border: none;

某一条边没有： border-left: none;

也可以调整左边边框的宽度为0px： border-left-width: 0px;

注意：border-bottom-style：可以修改a链接的"下划线"的风格

border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)

border-bottom-color：可以修改a链接的"下划线"的颜色