DIV设置

DIV简介

  • 什么是DIV
    • DIV是层叠样式表中的定位技术,全称DIVsion
    • 有时把div称为图层,更多时候称为“块”

DIV样式设置

  • div大小、背景设置
  • div溢出效果演示、换行、滚动条显示
  • div边框、轮廓设置
  • 盒子模型

DIV设置大小、位置、背景

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。div标签定义 HTML 文档中的一个分隔区块或者一个区域部分,

标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。

height:属性设置元素的高度。这个属性定义元素内容区的高度,在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。
width:属性设置元素的宽度。这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。

position:属性规定元素的定位类型。属性值:
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed ,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative ,生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20px” 会向元素的 LEFT 位置添加 20 像素。
static ,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit :规定应该从父元素继承 position 属性的值。

DIV溢出处理效果

  • 超出div宽度高度的文字或图片进行隐藏处理
  • 超出div宽度高度的文字或图片增加滚动条

overflow属性指定如果内容溢出一个元素的框,会发生什么。属性值
值:

序号 属性 作用
1 visible 默认值。内容不会被修剪,会呈现在元素框之外。
2 hidden 超出的部分被隐藏。内容会被修剪,并且其余内容是不可见的。
3 scroll 不论是否需要,都显示滚动条。内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4 auto 按需显示滚动条以便查看其余的内容。如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5 inherit 规定应该从父元素继承 overflow 属性的值。

CSS轮廓——outline

CSS outline 属性:

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓线不会占据空间,也不一定是矩形。outline 简写属性在一个声明中设置所有的轮廓属性。示例:

outline: dashed;/*虚线轮廓*/

还有:dotted(点状轮廓)、solid(实线)、double(双线)等

可以按顺序设置如下属性:
outline-color
outline-style
outline-width
如果不设置其中的某个值,也不会出问题,比如 :

outline:solid #ff0000;

也是允许的。

outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现。可以使用的值:
none : 默认。定义无轮廓。
dotted :定义点状的轮廓。
dashed :定义虚线轮廓。
solid :定义实线轮廓。
double :定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove :定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge :定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset :定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset :定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit :规定应该从父元素继承轮廓样式的设置。

outline-color 属性:
请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色,轮廓线不会占据空间,也不一定是矩形。可以使用以下这几种颜色值:
颜色值为颜色名称的轮廓颜色(比如 red)。
颜色值为十六进制值的轮廓颜色(比如 #ff0000)。
颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。
invert :默认。执行颜色反转(逆向的颜色)。
inherit :规定应该从父元素继承轮廓宽度的设置。

outline-width 属性:
outline-width 属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none 时,这个宽度才会起作用。如果样式为 none,宽度实际上会重置为 0,不允许设置负长度值。
可以使用的值:
thin :规定细轮廓。
medium :默认。规定中等的轮廓。
thick : 规定粗的轮廓。
length :允许您规定轮廓粗细的值。
inherit: 规定应该从父元素继承轮廓宽度的设置。

CSS边框(border)

CSS border 属性:
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border),元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面:宽度、样式,以及颜色。
border 简写属性在一个声明设置所有的边框属性。

border-left、border-right、border-top、border-bottom

作用:设置div边框的边线宽度、颜色、虚线、实线等样式css属性

示例:

border-bottom: solid;/*设置下边框为实线*/

还有:none(无边框)、double(双线边框)等

可以按顺序设置如下属性:
border-width
border-style
border-color
如果不设置其中的某个值,也不会出问题,比如

border:solid #ff0000;

也是允许的。

border-style:border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式,只有当这个值不是 none 时边框才可能出现。可以使用的值:
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 :规定应该从父元素继承边框样式。

您可以为一个边框定义多个样式,例如:

p.example {
    border-style: solid dotted dashed double;
}

上面这条规则为类名为 example 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
例如:

border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线


border-style:dotted solid double;

上边框是点状
右边框和左边框是实线
下边框是双线


border-style:dotted solid;

上边框和下边框是点状
右边框和左边框是实线


border-style:dotted;

所有 4 个边框都是点状


如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
border-top-style
border-right-style
border-bottom-style
border-left-style
可以使用的值与border-style 属性相同

CSS笔记

CSS选择器优先级

2020-2-4 14:18:42

CSS笔记

盒子模型

2020-2-4 21:26:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索