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. Comet OJ - Contest #14

    Rank38. 还是比较不满意吧,C卡了太久,E没调出来,D也没空去做了. A 签到题. #include<bits/stdc++.h> using namespace std; #def ...

  2. Python数据基础类型-列表

    1,列表的创建 list1 = ['hello', 'world', 1997, 2000] list2 = [1, 2, 3, 4, 5 ] list3 = ["a", &quo ...

  3. 对比XGBoost与深度学习

    观点1:XGBoost要比深度学习更重要.2016年Kaggle大赛29个获奖方案中,17个用了XGBoost.因为它好用,在很多情况下都更为可靠.灵活,而且准确:在绝大多数的回归和分类问题上,XGB ...

  4. input搜索框实时检索功能实现（超简单，核心原理请看思路即可）

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  5. python接口、抽象类与抽象方法

    接口: -url -数据类型,python不存在 class 类名 1.类中的方法可以写任意多个 2.如果想要对类中的方法做约束,就需要写接口 接口中定义一个方法f1,可以约束继承他的子类 class ...

  6. 解决：centos配置ssh免密码登录后仍要输入密码

    转自https://www.jb51.net/article/121180.htm 第一步:在本机中创建秘钥 1.执行命令:ssh-keygen -t rsa 2.之后一路回车就行啦:会在-(home ...

  7. 082、数据收集利器 cAdvisor （2019-04-30 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7683190.html   cAdvisor 是google 开发的容器监控工具,下面我们开始安装和体验 cAdvisor ...

  8. 最大熵与EM算法

    一.熵.联合熵(相当于并集).条件熵.互信息 1.熵是什么? (0)信息量:信息的度量p(xi).信息量和概率成反比,熵是信息量的期望. X是一个随机变量,可能取值有很多个.熵是信息量的期望.熵反应的 ...

  9. Python笔试面试题目及答案

    1.is 和==的区别? is:比较的是两个对象的id值是否相等,也就是比较俩对象是否为同一个实例对象.是否指向同一个内存地址 == : 比较的两个对象的内容/值是否相等,默认会调用对象的eq()方法 ...

  10. docker 开启特权模式

    可以在创建容器时通过 --privileged=true 开启特权模式. 创建容器: # docker run -d --name centos7 --privileged=true centos7: ...