首页 前端知识 HTML布局总结

HTML布局总结

2024-04-18 00:04:03 前端知识 前端哥 708 757 我要收藏

一、盒子布局

boder-边框上右下左

padding-外边距

内容距离边框的距离上右下左
margin-外边距边框距离页面的距离
none

定义无边框

hiedden与none相同。不过应用于表时除外,对于表,hidden用于解决边框冲突
dotted定义点状边框。在大多数浏览器中呈现为实线
dashed定义虚线。在大多数浏览器中呈现实线
solid定义实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子布局</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
padding: 20px;
margin-left: 100px;
}
</style>
</head>
<body>
    <div>
      我是重庆彭于晏
    </div>
</body>
    </html>

二、元素分类

块级元素------独占一行(自动换行)div p hn hr  可以设置宽度和高度

行内元素(内连)------不会自动换行a span 不可以设置宽度和高度(不起作用)

display可以实现会计元素和行内元素之间互换

属性取值:

none----表示不会被显示,隐藏元素的方式之一

block----将元素变为款及元素,也会自动换行(默认有个换行符)

inline----将元素变为行内元素,元素前后没有换行符

注意:css中隐藏元素的方式:

第一种:display:none;

第二种:width:0;heigth:0;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素分类</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
width: 100px;
height: 100px;
background-color: red;
/* display: none;
width: 0;
height: 0; */
}
</style>
</head>
<body>
<div class="one">这是第一个div</div>
<div>这是第二个div</div>
<div>这是第三个div</div>
<a href="#">这是第一个a标签</a>
<a href="#">这是第二个a标签</a>
<a href="#">这是第三个a标签</a>
<a href="#">这是第四个a标签</a>
</body>
</html>

三、浮动布局

通过float属性去设置浮动布局

取值:left none(不浮动)right

注意:如果浮动取值是left的话(左浮),会对后面的元素产生一定的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
    <style>
        .box1{
            width: 200px;
            border: 1px;
            height: 200px;
            background-color: blueviolet;
            float: right;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px;
            background-color: blue;
            clear:both;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px;
            background-color: brown;
             float:left ;
        }
    </style>
</head>
<body>
    <div class="box1">这是一个div</div>
    <div class="box2">这是二个div</div>
    <div class="box3">这是三个div</div>    
</body>
</html>

 浮动布局如上面所示

如果要消除这总影响(消除浮动)通过clear属性

none默认允许两边都浮动
left不允许左边浮动
right不允许右边浮动
both不允许两侧有浮动

四、定位布局

定位就是将指定元素摆放到页面的任意位置,通过定位可以任意摆放元素。
通过position属性来设置元素的定位。

                                                position的取值

描述
static与正常流相同,并且为默认值
relative盒子的位置可以相对其在正常流中的位置出现偏移,对象不可层叠,可根据left、right、top和bottom等属性的值在正常流中偏移。
fixed固定在屏幕的某个位置,位置通过left、right、top和bottom属性指定,并且不随用户滚动窗口而改变位置。

示列代码如下面所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <style>
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid rgb(255, 47, 161);
            margin: 200px;
            position: relative;
        }
        .box1{
            width: 200px;
            border: 1px solid black;
            height: 200px;
            background-color: blueviolet;
            position: absolute;
            top: 100px;
            left: 200px;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            /* position: relative;
            left: 200px; */
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: brown;
             float:left ;
        }
    </style>
</head>
<body>
    <div class="main">
    <div class="box1">中国彭于晏</div>
    <div class="box2">重庆彭于晏</div>
    <div class="box3">永川彭于晏</div>
</div>    
</body>
</html>

五、弹性盒子 

弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex而定义为的弹性容器。 

设置弹性容器是通过 display 属性进行设置, ---------- display:flex 或则 inline-flex 注意:一个弹性容器可以包含多个弹性元素  弹性盒子只是规定了弹性子元素如何在弹性容器内布局,其他时候(弹性容器外,弹性子元素内)都是正常渲染的。并且默认弹性子元素只在弹性盒子的一行展示,默认每个容器只有一行
flex- direction 指的是弹性容器中子元素的排列方式
flex-wrap 指的是弹性容器中子元素超出父容器时是否换行
flex-flow -flex- direction flex-wrap 的简写
align-items 设置的弹性容器中元素在侧轴 ( 纵轴)的对齐方式
justify-content 设置的弹性容器中元素在主轴(横轴)的对齐方式
align-content - 修改了 flex-flow 的行为,类似于 align-items ,它是对齐的弹性线

 所示代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        .flex-contain{
            width: 400px;
            height: 400px;
            background-color: orange;
            display: flex;
            
            align-items: center;
        }
        .flex-item{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex-item1</div>
        <div class="flex-item">flex-item2</div>
        <div class="flex-item">flex-item3</div>
    </div>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5117.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!