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. Python 入门之 内置模块 -- sys模块

    Python 入门之 内置模块 -- sys模块 1.sys模块 sys模块是与python解释器交互的一个接口 print(sys.path) #模块查找的顺序 print(sys.argv) # ...

  2. kafka 教程(一)-初识kafka

    消息队列 MQ 消息队列就是 消息 message 加 队列 queue,是一种消息传输的容器,提供生产和消费 API 来存储和获取消息. 消息队列分两种:点对点(p2p).发布订阅(pub/sub) ...

  3. Ajax提交数据后，清空form表单

    按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...

  4. group_concat默认长度限制

    这几天做后台一个订单汇总数据报表时,发现当使用group_concat函数时,发现会漏掉数据,究其原因是因为这个函数有默认长度显示1024 可以修改mysql配置文件my.ini 设置group_co ...

  5. KL散度的理解（GAN网络的优化）

    原文地址Count Bayesie 这篇文章是博客Count Bayesie上的文章Kullback-Leibler Divergence Explained 的学习笔记,原文对 KL散度 的概念诠释 ...

  6. Python基础——函数的迭代器和生成器

    等待更新…………………… 后面再写

  7. 60. Permutation Sequence (JAVA)

    The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...

  8. HashMap 的实现原理（1.8）

    详见:https://blog.csdn.net/richard_jason/article/details/53887222 HashMap概述 1.初始容量默认为16 最大为2的30次方,负载因子 ...

  9. pycharm解释器链接如何pymongo

    1.pymongo 链接数据库 # pycharm 链接我们的mogodb # 下载pymongo from pymongo import MongoClient # 客户端请求 服务端 # 链接 c ...

  10. 2019.9.16 linux安装软件lamp

    2019/9/16 Linux软件安装 方式:yum/rpm/源码安装 yum安装: yum 是通过分析RPM的包头数据后,根据各软件的相关性制作出属性相对应的解决方案,然后可以自动处理软件的相依属性 ...