border属性介绍

  • border属性设置元素边框。
  • 边框3个要素如：粗细、线型、颜色。

边框线型属性值说明表如：

属性指 描述
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-top 设置元素上边框。
border-bottom 设置元素下边框。
border-left 设置元素左边框。
border-right 设置元素右边框。

边框实践

  • 实践代码：
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>边框</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        border: 1px solid red;

     }

  </style>

</head>

<body>

   <div class="box">

     微笑是最初的信仰

   </div>

</body>

</html>
  • 结果图

  • 注意：边框颜色可以省略不写，默认为黑色。如果其他2个属性不写就不会显示边框。

  • 设置元素边框方向实践

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>边框</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        border-top: 2px double red;

        border-bottom: 2px ridge lawngreen;

        border-left: 2px  inset darkorange ;

        border-right:2px groove darkblue;

     }

  </style>

</head>

<body>

   <div class="box">

     微笑是最初的信仰

   </div>

</body>

</html>

  • 结果图

display属性介绍

  • display属性它是显示的意思，display属性可以将行内元素与块级元素之间相互转换，将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。
  • display属性值说明表如下：
属性值 描述
inline 将块级元素转换为行内元素。
block 作用：1、将行内元素转换为块级元素。2、将隐藏的元素设置为显示状态。
none 将显示的元素设置为隐藏状态。

display属性实践

  • 使用display属性的属性值为block将span标签设置宽高度并且设置一个背景颜色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>将span标签转换为块级元素</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        display: block;

        background-color: red;

     }

  </style>

</head>

<body>

   <span class="box">微笑是最初的信仰</span>

</body>

</html>

  • 结果图

  • 注意：如果行内元素使用了display: block;，就拥有了块级元素特点。

  • 使用display属性的属性值为inline将h1标签转换为行内元素。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>将h1标签转换为行内元素</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        display: inline;

        background-color: red;

     }

  </style>

</head>

<body>

   <h1 class="box">微笑是最初的信仰</h1>

</body>

</html>

  • 结果图

  • 注意：如果块级元素使用了display: inline;，就拥有了行内元素特点。

css中如何使用border属性与display属性的更多相关文章

  1. 盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

  2. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  3. CSS 中区块的使用_宽高属性

    width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 ...

  4. css常用属性之display属性

    1.dispaly属性之一:块级标签转行内便签display: inline(内容有多大,就展示多大(用F12看区别)) 2.display属性之二:行内便签转块级标签:diaplay: block ...

  5. 控制span的width属性及display属性值的选择

    给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...

  6. CSS中可以和不可以继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  7. 前端基础之--css中可被继承和不可被继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shado ...

  8. CSS中可以继承和不能继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  9. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

随机推荐

  1. 洛谷 P1801 黑匣子 题解

    题面 离线处理: 大体思路就是将数组排序,然后对于第k次询问把不可行的数打上标记,然后从头开始寻找第k个没打标记的点的值(排序后的数组保证了它是第k小的). 实现方法:首先离散化原始数组,得到数组fi ...

  2. Radio Button误区

    在同一个父容器下,Radio Button控件默认只能选择一个,所以无需多余代码管控 如果将Radio Button的多个子对象存入NSArray列表,发现长度为0(巨坑),因此通过列表对其初始化不可 ...

  3. JAVA并发编程实战笔记 第二章

    2.1 线程安全性 当多个线程访问某个类时,不论这些线程如何交替执行,这个类始终都能表现出正确的行为,且主调代码中不需要任何额外的同步或协同,则称这个类是线程安全的. 类不变性条件(Invariant ...

  4. poj2186--tarjan+缩点（有向图的强连通分量中点的个数）

    题目大意:       每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...

  5. oracle中的表空间以及和表空间有关的操作

    oracle中表空间 表空间是oracle对物理数据库上相关数据文件的逻辑映射.一个数据库逻辑上被划分成一个或若干个表空间,每个表空间包含了在逻辑上相关联的一组结构.每个数据库至少有一个表空间(sys ...

  6. window对象open方法详解

    window.open详解 window.open("sUrl","sName","sFeature","bReplace&quo ...

  7. CSS高度坍塌问题的原因以及解决办法

    原因: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高.但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. ...

  8. EC元素

    '''判断title是否是一致,返回布尔值'''WebDriverWait(driver,10,0.1).until(EC.title_is("title_text")) '''判 ...

  9. hadoop的权限控制

    HDFS支持权限控制,但支持较弱.HDFS的设计是基于POSIX模型的,支持按用户.用户组.其他用户的读写执行控制权限.在linux命令行下,可以使用下面的命令修改文件的权限.文件所有者,文件所属组: ...

  10. HMC版本支持

      Target Version Upgrade From Upgrade Instructions Updates Date Available End of Service Models supp ...