css的布局

作者：AllinToyou | 2024-04-14 09:48:41

踩

css的布局

盒子布局

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

元素的分类

元素分为块级元素，行内元素，内联块级元素

一、块级元素（block）

定义：默认情况下，独占一行的元素就是块级元素。

用法: display：block

特点：

每个块级元素独占一行（很霸道）
可以直接设置宽度、长度、行高、上下内外边距
元素在宽度不设置的情况下，继承父容器的宽度（高度不能继承）
常见的块级元素：<div>,<p>,<h1~h6>,<ol>,<ul>,<dl>,<table>,<form>...

二、行内元素（内联元素）

定义：默认情况下，一行能显示多个，并且元素的高度、宽度、行高等不能直接设置

用法: display：inline

特点：

能够一行显示多个
元素的宽度、高度、顶部和底部内外边距不能直接设置
元素的宽度就是其内容的宽度
常见的行内元素：<a>,<span>,<br>,<i>,<em>...

三、行内块元素（内联块状元素）

定义：一行能显示多个，并且元素的宽度、高度等都可以设置的元素就叫行内块元素

用法:display: inline-block;

特点：

一行能显示多个
元素的高度、宽度、行高、以及顶部底部的内外边距都可以设置
常见的行内块元素：<img>,<input>

定位布局

属性：position ------ 设置对象的定位方式

static ----- 静态定位（没有设置位置）
默认 absolute ------- 绝对定位：将对象从文档流中分离出来，设置left top right bottom这四个方向去设置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative ------ 相对定位：对象不从文档流中分离出来，设置left top right 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: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: blue;
/* position: relative;
left: 200px; */
}
.box3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>

弹性盒子

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素（float））相比，Flexbox 是一个更强大的方式，主要表现在：
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器

常用属性

flex- direction ------- 指的是弹性容器中子元素的排列方式
flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行
flex-flow ----flex- direction 和flex-wrap 的简写
align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

1.flex-dirction

类似于float的用法

2.水平对齐方式justify-content

属性值	含义
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔相等
space-around	项目两侧的间距相同，项目之间的间距比两侧的间距大一倍


<!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: 350px;
background-color: orange;
display: flex;
justify-content: space-around;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
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</di>
</div>
</body>
</html>

交叉轴对齐方式align-items

属性值	含义
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline:	项目的第一行文字的基线对齐。
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。


<!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: 350px;
background-color: orange;
display: flex;
align-items: baseline;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/421443