盒模型--边框(二)

现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式:

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置:

border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
时间: 2024-10-14 11:02:53

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

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

盒模型--边框(一)

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

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

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

《CSS3实战》笔记--弹性盒模型(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间.注意,显示空间包括子元素的宽度和高度,而不只是子元素所在栏目的宽度,也可以说是子元素在盒子中所占的面积.该属性在弹性布局中非常重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端.box-flex属性的基本语法: box-flex:<number> 取值说明: <number>

回头看看盒模型

盒模型的二次理解. 1定义 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子. 1.1排布 这些盒子们都要按照可见版式模型在页面上排布,版式模型由position,display,float这三个属性来控制,position属性控制页面上元素间的位置关系,用于定位:display属性控制元素显示的本质(inline:默认值,显示为内联元素:block:块级元素:inline-block:行内块级:table:作为块级表格来显示:none:不会被显示......)这些值可以令元素轻松

盒模型-回头看看基本功(盒子)

盒模型的二次理解. 1定义 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子. 1.1排布 这些盒子们都要按照可见版式模型在页面上排布,版式模型由position,display,float这三个属性来控制,position属性控制页面上元素间的位置关系,用于定位:display属性控制元素显示的本质(inline:默认值,显示为内联元素:block:块级元素:inline-block:行内块级:table:作为块级表格来显示:none:不会被显示......)这些值可以令元素轻松

盒模型(一)

一.什么是盒模型 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元