DIV布局应用,常用边框样式
分类:生活感悟

一种原创边框!很可爱的说图片 1图片 2图片 3 边框教程.jpg (155.4 KB)2007-8-23 15:20[ 本帖最后由 『檸檬』貝貝 于 2007-8-23 15:21 编辑 ]

边框风格样式属性border-style

1.none 边框 (默认值)
2.solid 直线边框
3.dashed 虚线边框
4.dotted 点状边框
5.double 双线边框
6.groove 凸槽边框
7.ridge 垄状边框
8.inset inset边框
9.outset outset边框
若想要实现其中边框的一条边有属性,可以将border-style改为border-top-style(top,bottom,left,right上下左右)

二、重点布局css属性介绍

边框颜色:border-color

实例如下:

<style type="text/css">
        div{
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 10px;
            background-color: brown;
            border-width:medium;
            border-color: #dddddd;
        }
        .div1{
            border-style: solid;
        }
        .div2{
            border-style: dashed;
        }
        .div3{ 
           border-style: dotted; 
       } 
       .div4{
            border-style: double;
        }
        .div5{
            border-style: groove;
        }
        .div6{
            border-style:ridge ; 
       }
        .div7{
            border-style:inset;
        }
        .div8{
            border-style:outset;
        }
    </style>
</head>
<body>
<div class="div1">solid</div>
<div class="div2">dashed</div>
<div class="div3">dotted</div>
<div class="div4">double</div>
<div class="div5">凸槽边框</div>
<div class="div6">垄状边框</div>
<div class="div7">inset边框</div>
<div class="div8">outset边框</div>
</body>

图片 4

Screenshot from 2016-12-09 16-26-40.png

2.4.3、宽度-border-width

border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none,边框宽度实际上会重置为 0。不允许指定负长度值。

CSS 的border-width属性定义了几种样式,见下表。

描述

thin

定义细的边框。

medium

默认。定义中等的边框。

thick

定义粗的边框。

length

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

与border-style同理,border-width也支持省略式写法:

例子 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 个边框都是细边框

同样地,除了省略式写法,也可以通过下列属性分别设置边框各边的宽度:

border-top-width: ……

border-right-width: ……

border-bottom-width: ……

border-left-width: ……

边框宽度:border-width

1.细边框:thin
2.中等边框:medium
3.粗边框:thick
4.固定值边框:数字+px
5.继承:inherit

2.2.2、特点

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

特点

假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear。

.news {

  background-color: gray;

  border: solid 1px black;

  }

 

.news img {

  float: left;

  }

 

.news p {

  float: right;

  }

 

.clear {

  clear: both;

  }

 

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。

因此,针对这一问题,推荐使用以下解决方案,那就是对容器 div 进行浮动。

.news {

  background-color: gray;

  border: solid 1px black;

  float: left;

  }

 

.news img {

  float: left;

  }

 

.news p {

  float: right;

  }

 

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>
2.3.1、外边距-margin

定义

边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

描述

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

规定应该从父元素继承边框样式。

Border-style 支持省略式写法,如下:

例子 1

border-style: dotted solid double dashed; 

· 上边框是点状

· 右边框是实线

· 下边框是双线

· 左边框是虚线

例子 2

border-style: dotted solid double;

· 上边框是点状

· 右边框和左边框是实线

· 下边框是双线

例子 3

border-style: dotted solid;

· 上边框和下边框是点状

· 右边框和左边框是实线

例子 4

border-style: dotted;

· 所有 4个边框都是点状

除了省略式写法,必要时还可以进行单边定义,如:

border-top-style:……

border-right-style:……

border-bottom-style:……

border-left-style:……

2.1.4、固定定位-fixed

定义

固定定位,使元素脱离文档流位置,结合TRBL属性(TOP、RIGHT、BOTTOM、LEFT)根据浏览器位置进行定位。

特点

当一个层定义了fixed之后,则这个层总是根据浏览器的窗口结合TRBL属性来进行元素的定位,相对于浏览器来自动调整该层的位置。

2.1.2、相对定位-relative

定义

生成相对定位的元素,相对于其正常位置、结合TRBL属性(TOP、RIGHT、BOTTOM、LEFT)进行定位。

特点

1、relative保持对象所在文档流中的位置,也就是说它具有和static相同的呈现方式,它同样占有在文档流中的固定位置,后面的对象不会侵占或覆盖

2、定位参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位;

Div+css布局应用

2.2.1、定义

float 属性定义元素在哪个方向浮动。在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

2.3、内联元素(Inline element )

定义

内嵌元素、行内元素,默认情况下一个或者多个内联元素会一行显示。

特点

1、内联元素之间会在同一行显示;

2、设置宽度width 无效,宽度取决于元素中文字或图片的宽度;

3、设置高度height无效,高度只能通过line-height设置;

4、设置外边距margin 只有左右margin有效,上下无效;

5、设置外边距padding只有左右padding有效,上下无效;

6、只能容纳文本或者其他内联元素;

常见元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐) (html5取消了该标签)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器,定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

2.2、浮动(float)
2.1.3、绝对定位-absolute

定义

绝对定位,使元素脱离文档流位置,结合TRBL属性(TOP、RIGHT、BOTTOM、LEFT)进行定位。

特点

1、absolute不保持对象所在文档流中的位置,它不占有在文档流中的固定位置,后面的对象会侵占或覆盖

2、如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位。如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位;

2.1.5、div层-z-index

定义

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

特点

1、z-index只能在position属性值为relative或absolute或fixed的元素上有效;

2、同级且position属性值均为relative的元素无法比较z-index;

3、z-index值只决定同一父元素中的同级子元素的堆叠顺序,父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”);

4、向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序;

5、同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面;

一、html元素分类

CSS+DIV布局应用,cssdiv布局

2.1、顶级元素(Top-level element)

定义

组成html页面最顶级标签

特点

1、 不可设置宽高;

2、 必须在文档流中处于最高级位置;

3、 包含所有块级元素及内联元素,不可被包含;

常见元素

html

body

frameset

2.1、定位(position)
2.2、块级元素(Block-level element)

定义

以块显示的元素,常用于排版,默认情况下每一个块级元素会换行显示。

特点

1、每一个块级元素总是在新行上开始;

2、高度,行高以及外边距和内边距都可控制;

3、宽度缺省是它的容器的100%,除非设定一个宽度;

4、它可以容纳内联元素和其他块元素;

常见元素

address - 地址

blockquote - 块引用

center - 举中对齐块 (html5取消了该标签)

div - 常用块级容易,也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)

noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表(无序列表)

address - 地址

2.3、外边距、内边距(margin & padding)
2.1.1、默认值-static

默认值,没有定位,即正常位置,元素出现在正常的HTML流中。当一个div为无定位状态时, top, bottom, left, right 或者 z-index 声明失效。(相对定位demo1)

2.4.4、颜色-border-color

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为4个边分别设置不同的颜色。

CSS 的border-color属性支持下表几种颜色写法:

描述

color_name

规定颜色值为颜色名称的边框颜色(比如 red)。

hex_number

规定颜色值为十六进制值的边框颜色(比如 #ff0000)。

rgb_number

规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。

transparent

默认值。边框颜色为透明。

省略式写法

例子 1

border-color:red green blue pink;

· 上边框是红色

· 右边框是绿色

· 下边框是蓝色

· 左边框是粉色

例子 2

border-color: red green blue;

· 上边框是红色

· 右边框和左边框是绿色

· 下边框是蓝色

例子 3

border-color: red green;

· 上边框和下边框是红色

· 右边框和左边框是绿色

例子 4

border-color: red;

· 所有 4 个边框都是红色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:

border-top-color: ……

border-right-color: ……

border-bottom-color: ……

border-left-color: ……

Div+css布局应用 一、html元素分类 2.1、顶级元素(Top-level element) 定义 组成html页面 最顶级 标签 特点 1、 不可设...

本文由365bet在线网站发布于生活感悟,转载请注明出处:DIV布局应用,常用边框样式

上一篇:Claire意大利版展现盛夏 下一篇:没有了
猜你喜欢
热门排行
精彩图文