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 设置元素右边框。

边框实践

  • 实践代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>边框</title>
  9.   <style>
  11.      .box{
  12.         width: 200px;
  13.         height: 100px;
  14.         border: 1px solid red;
  15.      }
  16.   </style>
  17. </head>
  19. <body>
  20.    <div class="box">
  21.      微笑是最初的信仰
  22.    </div>
  23. </body>
  25. </html>
  • 结果图

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

  • 设置元素边框方向实践

  • 代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>边框</title>
  9.   <style>
  11.      .box{
  12.         width: 200px;
  13.         height: 100px;
  14.         border-top: 2px double red;
  15.         border-bottom: 2px ridge lawngreen;
  16.         border-left: 2px  inset darkorange ;
  17.         border-right:2px groove darkblue;
  18.      }
  19.   </style>
  20. </head>
  22. <body>
  23.    <div class="box">
  24.      微笑是最初的信仰
  25.    </div>
  26. </body>
  28. </html>

  • 结果图

display属性介绍

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

display属性实践

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

  • 代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>将span标签转换为块级元素</title>
  9.   <style>
  10.      .box{
  11.         width: 200px;
  12.         height: 100px;
  13.         display: block;
  14.         background-color: red;
  15.      }
  16.   </style>
  17. </head>
  19. <body>
  20.    <span class="box">微笑是最初的信仰</span>
  21. </body>
  23. </html>

  • 结果图

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

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

  • 代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>将h1标签转换为行内元素</title>
  9.   <style>
  10.      .box{
  11.         width: 200px;
  12.         height: 100px;
  13.         display: inline;
  14.         background-color: red;
  15.      }
  16.   </style>
  17. </head>
  19. <body>
  20.    <h1 class="box">微笑是最初的信仰</h1>
  21. </body>
  23. </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. div距离左边设置

    margin-right:不加负号, margin-left:必须加负号,理解为倒数 margin-left:-10px;

  2. mysql之general log 日志

    开启 general log 将所有到达MySQL Server的SQL语句记录下来. 一般不会开启开功能,因为log的量会非常庞大.但个别情况下可能会临时的开一会儿general log以供排障使用 ...

  3. PythonDay12

    day12内置_函数 今日内容 生成器 推导式 内置函数一 生成器 什么是生成器?生成器的本质就是一个迭代器 迭代器是python自带的 生成器是程序员自己写的一种迭代器 生成器编写方式: 1.基于函 ...

  4. 模板 - 强连通分量 - Kosaraju

    Kosaraju算法 O(n+m) vector<int> s; void dfs1(int u) { vis[u] = true; for (int v : g[u]) if (!vis ...

  5. [Vue] vue的一些面试题3

    1. vue 组件里的定时器要怎么销毁? 当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行 cons ...

  6. mybatis中的动态代理应用(mapper对象)

    -----------------UserMapper的配置信息--------------------- <?xml version="1.0" encoding=&quo ...

  7. Jdbc Driver驱动和ServerTimeZone时区的的问题

    一.JDBC驱动的版本号以及名称问题 区别: com.mysql.jdbc.Driver 是 mysql-connector-java 5中的 com.mysql.cj.jdbc.Driver 是 m ...

  8. TCP的.cc文件代码解释（中文）

    #ifndef lint static const char rcsid[] =     "@(#) $Header: /nfs/jade/vint/CVSROOT/ns-2/tcp/tcp ...

  9. VIM如何自动保存文件、自动重加载文件、自动刷新显示文件

    1.手动重加载文件的命令是:e! 2.一劳永逸的方法是:vim提供了自动加载的选项 autoread,默认关闭. 在vimrc中添加 set autoread即可打开自动加载选项,相关选项: :hel ...

  10. IBM小机拆镜像换盘

    1.硬盘告警信息     2.故障排查 查看错误日志 #  errpt   -aj   C62E1EB7     查看hdisk0的信息,发现hdisk0属于rootvg # lspv   查看hdi ...