• CSS详细基础（六）边框样式

     本期是CSS基础的最后一篇~

    目录

    一.border属性

    二.边框属性复合写法

    三.CSS修改表格标签

    四.内边距属性

    五.外边距属性

    六.其他杂例 

    1.盒子元素水平居中

    2.清除网页内外元素边距

    3.外边距的合并与塌陷

     4.padding不会撑大盒子的情况

    七.综合案例——新浪导航栏仿真 

    一.border属性

    border属性是用于指定元素边框的样式、宽度和颜色。可以通过设置一到四个值来定义上、右、下、左四个边框的样式。例如，使用border-top属性可以设置上边框的样式、宽度和颜色。border属性的初始值是none，表示没有边框。边框样式可以是实线、虚线、点状等等，可以使用dotted、dashed、solid等值来定义不同的样式。边框的宽度可以通过设置像素值来控制，例如1px代表1像素的宽度。边框的颜色可以使用颜色名称或者十六进制值来定义，例如red代表红色。在border属性中，还可以通过设置border-radius来定义边框的圆角效果。

    1.         .bian {
    2.             border-width: 5px;
    3.             border-color: brown;
    4.             border-style: solid;
    5.         }
    6.  
    7.         img {
    8.             border-width: 5px;
    9.             border-color: rgb(236, 202, 6);
    10.             border-style: solid;
    11.         }

    大部分元素均可以使用边框选择器，如下：

    二.边框属性复合写法

    边框的复合写法是通过使用border属性来同时设置边框的宽度、样式和颜色。具体语法是border: 宽度 样式 颜色;。例如，border: 1px solid black; 表示边框宽度为1像素，样式为实线，颜色为黑色。

    1.         div
    2.         {
    3.             width: 500px;
    4.             height: 500px;
    5.             background-color: lawngreen;
    6.             border-style: dashed;
    7.             border-color: lightcoral;
    8.             border-width: 5px;
    9.             border-top-color: lightseagreen;
    10.         }
    11.         .bian
    12.         {
    13.             border: 3px solid greenyellow;
    14.         }

     

    三.CSS修改表格标签

    CSS同样可以用来修改表格标签table默认的样式，通过对table标签抑或td标签等均可实现~

    1.         table
    2.         {
    3.             width: 500px;
    4.             height: 249px;
    5.             text-align: center;
    6.         }
    7.         table,td,th
    8.         {
    9.             border: 1px solid palevioletred;
    10.             border-collapse: collapse;
    11.         }

     

    四.内边距属性

    内边距padding，顾名思义，针对的是元素内部的样式：即内部元素相对于当前元素的距离

    1.         div
    2.         {
    3.             width: 500px;
    4.             height: 500px;
    5.             background-color: plum;
    6.             font-size: 30px;
    7.             color: red;
    8.             padding-left: 20px;
    9.             padding-right: 20px;
    10.             padding-top: 230px;  
    11.         }

    如下图，文本与边距的距离受到了padding属性的控制~

     

    五.外边距属性

    与padding相反，外边框属性时针对当前元素与上一级元素之间的距离等属性~

    1.

    效果如下：

     

    六.其他杂例 

    1.盒子元素水平居中

    1.         div
    2.         {
    3.             width: 900px;
    4.             height: 200px;
    5.             background-color: chartreuse;
    6.             line-height: 200px;
    7.             text-align: center;
    8.             font-size: 40px;
    9.             color: black;
    10.             /* margin: 0 auto; */
    11.             
    12.         }

    原理很简单：即行高等于行间距~

    2.清除网页内外元素边距

    细心的小伙伴一定会发现，网页整体本身存在着一定的内外边距，如下，并没有顶住上左的边界：

     如下的通配符选择器可以实现内外边距的清零：

    1.         *
    2.         {
    3.             margin: 0;
    4.             padding: 0;
    5.         }

    3.外边距的合并与塌陷

    margin合并：是指在垂直方向上，相邻的两个盒子的外边距会合并为一个外边距的现象。当一个盒子的上边距与下边距相遇时，它们会合并成一个较大的外边距。

    而margin塌陷：是指在垂直方向上，父子元素之间的外边距不是简单地相加，而是取它们之间的最大值作为最终的外边距值。这样会导致子元素的外边距无法完全展示，因为它们的外边距被父元素的外边距所替代。

    找来截图给大家直观地看一下：

     

    如下一段代码案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div
    10.         {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: blue;
    14.         }
    15.         .one
    16.         {
    17.             margin-bottom: 20px;
    18.         }
    19.         .two
    20.         {
    21.             margin-top:10px;
    22.             /* 因为one的下边距大与two的上边距，所以会发生垂直合并，即选更大的20px作为两者之间的外边距。 */
    23.         }
    24.         .div2
    25.         {
    26.             width: 400px;
    27.             height: 400px;
    28.             background-color: brown;
    29.             border: 5px solid black;
    30.         }
    31.         
    32.         .three
    33.         {
    34.             margin-top: 50px;
    35.         }
    36.     style>
    37. head>
    38. <body>
    39.     <div class="one">div>
    40.     <div class="two">div>
    41.     <div class="div2 two">
    42.         <div class="three">div>
    43.         
    44.         
    45.         
    46.     div>
    47.     
    48. body>
    49. html>

     

     4.padding不会撑大盒子的情况

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         h1
    10.         {
    11.             background-color: plum;
    12.             height: 50px;
    13.             padding: 30px;
    14.         }
    15.         div
    16.         {
    17.             height: 90px;
    18.             background-color: powderblue;
    19.         }
    20.         p
    21.         {
    22.             
    23.             padding: 30px;
    24.             background-color: purple;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <h1>我是没有撑大的盒子标签h1>
    30.     <div>
    31.         <p>不会将盒子撑大。p>
    32.     div>
    33. body>
    34. html>

    七.综合案例——新浪导航栏仿真 

    做了一个案例玩，运用了大部分基础知识，大家可以参考看看~

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div
    10.         {
    11.             height: 41px;
    12.             border-top: 3px solid #ff8500;
    13.             border-bottom: 1px solid #edeef0;
    14.             background-color: #fcfcfc;
    15.             line-height: 41px;
    16.         }
    17.         div a
    18.         {
    19.             font-size: 12px;
    20.             color: #4c4c4c;
    21.             text-decoration: none;
    22.             display: inline-block;
    23.             height: 41px;
    24.             padding: 0 20px;
    25.         }
    26.         a:hover
    27.         {
    28.           background-color:#eee;
    29.           color: #ff8500;
    30.         }
    31.  
    32.     style>
    33. head>
    34. <body>
    35.     <div class="nav">
    36.           <a href="#">新浪导航a>
    37.           <a href="#">手机新浪网a>
    38.           <a href="#">移动客户端a>
    39.           <a href="#">微博a>
    40.           <a href="#">PC端a>
    41.     div>
    42. body>
    43. html>

  • 相关阅读:
    pytorch的使用：使用神经网络进行气温预测
    第一章：最新版零基础学习 PYTHON 教程（第三节 - 下载并安装Python最新版本）
    idea工具，debug模式小技巧，调试正确姿势。快进收藏夹。
    使用Element进行前端开发
    Numpy 逻辑函数和位处理函数
    AI 时代的向量数据库、关系型数据库与 Serverless 技术丨TiDB Hackathon 2023 随想
    《数据结构C++版》实验三：二叉树实验
    pdf怎么转换成jpg图片或png图片
    【LeetCode热题100】--73.矩阵置零
    【寻路】超级简单的A星寻路算法实现
  • 原文地址：https://blog.csdn.net/jsl123x/article/details/133419290