HTML-布局

最新推荐文章于 2024-05-25 10:40:54 发布

抠脚打代码

最新推荐文章于 2024-05-25 10:40:54 发布

阅读量678

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_73595197/article/details/130104155

版权

布局

1.1 盒子布局

1.1 border

盒子的主体为border，border表示边框，它有几种标签限制：

1.1.1 none（定义无标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div4{
         border: 1px none ;
         background-color: bisque;
        }
     </style>
<body>
    <div4>没有边框(none型)</div4>
</body>
</html>

1.1.2 hidden（作用与“none”相似，hidden用于解决边框冲突）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div5{
         border: 1px hidden;
         background-color: aqua;
        }
     </style>
<body>
    <div5>没有边框(hidden型)</div5>
</body>
</html>

1.1.3 dotted（定义点状边框）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div1{
         border: 1px dotted black;
        }
     </style>
<body>
    <div1>这是点状边框（dotted）</div1>
</body>
</html>

1.1.4 dashed（定义虚线）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div2{
         border: 1px dashed black;
        }
     </style>
<body>
    <div2>这是虚线边框(dashed)</div2>
</body>
</html>

1.1.5 solid（定义实线）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div3{
         border: 1px solid black;
        }
     </style>
<body>
    <div3>这是实线边框(solid)</div3>
</body>
</html>

1.2 padding和margin

padding表示内边距（内容距离边框的距离，有上（top）下（bottom）左（left）右（right））

margin表示外边距（边框距离页面的距离，有上（top）下（bottom）左（left）右（right））

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div{
          width: 100px;
          height: 100px;
          background-color: rgb(109, 109, 114);
          border: 1px solid green;
          padding-left: 20px;
          margin-left: 100px;
          }
      </style>
<body>
    <div>padding-left和margin-left</div>
</body>
</html>

2 元素的分类

2.1 块级元素

独占一行（自动换行）div p hn(n是数字) hr可以设置宽度和高度

2.2 行内元素（内联）

不会自动换行 a span 不可以设置宽度和高度（不起作用）
display标签可以实现块级元素和行内元素之间互换，它有以下几种取值

2.2.1 none---该元素不会被显示

<!DOCTYPE html>
<html lang="en">
<head>
<title>display的应用</title>
<head>
<style>
 div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }
.x{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: none;
    }
a{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: none;
    }
</style>
</head>
    <body>
        <div>1</div>
        <div class="x">2</div>
        <br>
        <br>
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
    </body>
</html>

2.2.2 block---将元素变为块级元素，会自动换行（默认有个换行符）

<!DOCTYPE html>
<html lang="en">
<head>
<title>display的应用</title>
<head>
<style>
 div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }
.x{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: block;
    }
a{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: block;
    }
</style>
</head>
    <body>
        <div>1</div>
        <div class="x">2</div>
        <br>
        <br>
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
    </body>
</html>

2.2.3 inline---将元素变为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
<title>display的应用</title>
<head>
<style>
 div{
    width: 100px;
    height: 100px;
    border: 1px solid black;

最低0.47元/天解锁文章

抠脚打代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML-布局

布局1.1 盒子布局1.1 border盒子的主体为border，border表示边框，它有几种标签限制：1.1.1 none（定义无标签）<!DOCTYPE html><html lang="en"><head> <title>布局</title> <style> div4{ border: 1px none ; background-col
复制链接

扫一扫