常见的布局

lzy031012

于 2023-04-14 01:28:46 发布

阅读量79

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/lzy031012/article/details/130142767

版权

一.盒子布局

设置一个div，加入width宽和height高即为设置一个盒子大小

boder ------ 盒子边框（none为不显示，可设置边框大小以及颜色，solid为实线边框）

padding ---- 内边距（内容距离边框的距离）

margin ------外边距（边框距离页面的距离）

（以上两种后加“上下左右”即为该方向上的边距）

<!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>Document</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        background-color: rgb(186, 238, 44);
        border: 1px solid black;
        padding: 10px;
        margin-left: 50px;
        }
        </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

二.浮动布局

1.在一个div中使用属性float即为一个浮动布局

可使用left right none（不浮动）来定义

`2.消除浮动`

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

<!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>Document</title>
    <style>
        .qwe{
        width: 100px;
        height: 100px;
        background-color: rgb(186, 238, 44);
        border: 1px solid black;
        float: left;
        }
        .asd{
        width: 100px;
        height: 100px;
        background-color: rgb(22, 225, 144);
        border: 1px solid black;
        float: right;
        }
        .zxc{
        width: 100px;
        height: 100px;
        background-color: rgb(238, 173, 44);
        border: 1px solid black;
        float: none;
        }
        </style>
</head>
<body>
    <div class="qwe">盒子</div>
    <div class="asd">盒子</div>
    <div class="zxc">盒子</div>
</body>
</html>

三.定位布局

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static：（静态）元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
relative：设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
fixed：相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom 和 left 属性用于定位此元素。
absolute：可随页面滚动一起移动
sticky：根据用户的滚动位置进行定位。

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

<!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>
.hhh{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.b1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: orange;
position:absolute;
top: 100px;
left: 200px;
}
.b2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
}
.b3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color:purple;
}
</style>
</head>
<body>
<div class="hhh">
<div class="b1">这是第一个div</div>
<div class="b2">这是第二个div</div>
<div class="b3">这是第三个div</div>
</div>
</body>
</html>

四.弹性盒子css3

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>
</html>

五.元素的分类

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

行内元素（内联） ------ 不会自动换行 a span 不可以设置宽度和高度（不起作用）

display可以实现块级元素和行内元素之间互换

属性取值： none ----- 表示不会被显示，隐藏元素的方式之一

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

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

六.属性

flex- direction ------- 指的是弹性容器中子元素的排列方式

flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行

flex-flow ----flex- direction 和flex-wrap 的简写

align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式

justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式

align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

lzy031012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
常见的布局

设置一个div，加入width宽和height高即为设置一个盒子大小boder ------ 盒子边框（none为不显示，可设置边框大小以及颜色，solid为实线边框）padding ---- 内边距（内容距离边框的距离）margin ------外边距（边框距离页面的距离）（以上两种后加“上下左右”即为该方向上的边距）
复制链接

扫一扫