盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式,可以分开写:

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

border-color:#888;//前面的井号不要忘掉。

3、border-width(边框宽度)中的宽度也可以设置为:

thin | medium | thick(但不是很常用),最常还是用象素(px)。

时间: 2024-10-22 12:37:13

盒模型--边框(一)的相关文章

CSS盒模型--边框设置:border: 1px solid red(像素 样式 颜色 ),border-bottom:1px dotted #ccc

盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dashed

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

21.盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dashed(虚线)| dotte

盒模型--边框(二)

现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式: div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边(上.右.左)边框的设置: border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;

盒模型(一)

一.什么是盒模型 padding(内边距,一个盒子里的边距离内容的距离,上下左右) margin(外边距,两个盒子之间的距离) border(盒子的边框) 内填充,外边距,边框都有四个方向:如padding-top,padding-right,padding-bottom和padding-left, 盒子模型里面的元素实际的高度加上padding-top,padding-bottom, 实际宽度是元素宽度加上padding-right和padding-left. 二.盒模型-边框 盒子模型的边框

css学习の第三弹—盒模型的创建和使用

一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 设置display:block就是将元素显示为块级元素.如下代码就是将内联元素a转换为块状元素,从而使a元

【CSS3】---盒模型margin、padding及border

盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是 border 代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dash

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c