布局总结

最新推荐文章于 2024-07-26 11:48:42 发布
最新推荐文章于 2024-07-26 11:48:42 发布
阅读量35 收藏
点赞数
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75666673/article/details/130106789
版权

1.盒子布局

border
属性描述
border-top设置上边框   
border-bottom设置下边框
border-left设置左边框
border-right设置右边框
border内的标签
值描述
none表示没有边框
solid表示边框是实线
dotted表示边框是点状的，但在多数浏览器中显示为实线
dashed表示边框是虚线，在多数浏览器中也显示为实线
hidden也表示无边框，但在表内是用于处理边框之间的冲突
边距
属性描述
padding内边距（内容到边框的距离）
margin外边距（边框到页面的距离）

   padding和margin设置的顺序为：上右下左（逆时针）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            color: red;
            padding: 20px 30px 40px 50px;
            margin: 50px 40px 30px 20px;
            border-bottom: 1px dotted black;
            border-top: 1px dashed blue;
            border-left: 1px solid purple;
            border-right: 1px none ;
        }

    </style>
</head>
<body>
    <div>这是一个div盒子</div>
</body>
</html>

2.元素的分类

元素
块级元素（如div p hn hr)独占一行且自动换行，可设置行高和行宽
行内元素（如a,span）不能自动换行，也不能设置宽度和高度（设置也不可用）

display属性可以实线块级元素和行内元素的转换

display
值
none此元素不会被显示
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符

隐藏元素除了display：none，还有width：0 height：0

​​​​​​​​​​​​<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
       .one{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: red;
       }
       .two{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: none;
       }
       .three{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: blue;
       }
    </style>
</head>
<body>
    <div class="one">这是第一个div盒子</div>
    <div class="two">这是第二个div盒子</div>
    <div class="three">这是第三个div盒子</div>
</body>
</html>

3.浮动布局

通过float使元素浮动

值描述
left使元素左浮(会影响后面的元素)
right使元素右浮
none不浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
       .one{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: red;
        float: right;
       }
       .two{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
        float: none;
       }
       .three{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: blue;
        float: right;
       }
    </style>
</head>
<body>
    <div class="one">这是第一个div盒子</div>
    <div class="two">这是第二个div盒子</div>
    <div class="three">这是第三个div盒子</div>
</body>
</html>

 想要消除浮动，则使用clear属性

clear（消除浮动）
值描述
none允许两边都浮动，为默认值
left不允许左边浮动
right不允许右边浮动
both在左右两侧均不允许浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
       .one{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: red;
        float: left;
        
       }
       .two{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
        float: none;
        clear: left;
       }
       .three{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: blue;
        float: right;
       }
    </style>
</head>
<body>
    <div class="one">这是第一个div盒子</div>
    <div class="two">这是第二个div盒子</div>
    <div class="three">这是第三个div盒子</div>
</body>
</html>

 4.定位布局

通过position属性对元素进行定位

position
值描述
absolute绝对定位：通过left,top,buttom,right属性进行规定
relative相对定位：相对于自己正常的位置进行定位
static默认值，没有定位，元素出现在正常的位置上
<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        #main{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
       .one{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: red;
       }
       .two{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
        position:absolute;  
        top: 110px;
        left: 110px;

       }
       .three{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: blue;
        position: relative;
        left: 202px;
        top: 101px;
        }

    </style>
</head>
<body>
    <div id="main">
        <div class="one">这是第一个div盒子</div>
        <div class="two">这是第二个div盒子</div>
        <div class="three">这是第三个div盒子</div>
    </div>
</body>
</html>

 5.其他属性

㈠overfolw：当内容溢出元素框时发生的事情

overflow
值                                             描述
visible默认值，内容不会被修剪会呈现在边框外
hidden内容会被修剪，且被修建的内容不可见
scroll内容会被修剪，但浏览器会显示滚动条以便查看其余内容
auto如果内容会被修剪，则浏览器会显示滚动条以便查看其余内容
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
        div{
            width: 500px;
            height: 500px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <img src="../images/轮播1.png" alt="">
    </div>
    
</body>
</html>

㈡zoom：放大或缩小元素

zoom
值描述
normal默认值，无变化（相当于number输入1.0或100%）
number可输入无符号的浮点数或半分比（1.0相当于100%）

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
        div{
            width: 500px;
            height: 500px;
            /* zoom: normal; */zoom: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="../images/中国新闻网.png" alt="">
    </div>
    
</body>
</html>

 6.弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

<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: rgb(27, 181, 71);
display: flex;  /* display: inline-flex */
}
.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>

6.1  flex-driection

该属性用于规定弹性项目的排列方式或者方向，如果元素不是弹性项目则无效

flex-driection
值描述
row默认值。作为一行，水平的显示弹性项目
row-reverse等同行，但方向相反
column作为列。垂直的显示弹性项目
column-reverse等同列，但方向相反
<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: rgb(27, 181, 71);
display: flex;
flex-direction: column-reverse;
}
.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>


 

 6.2  flex-warp

该属性用于弹性项目是否换行

flex-warp
值描述
nowrap默认值，不会换行
warp需要时会换行
warp-reverse在需要换行时以反方向换行
<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: rgb(27, 181, 71);
display: flex;
flex-wrap: wrap-reverse;
}
.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>

6.3 flex-flow

flex-driection和flex-warp的简写，输入的值就是flex-driection和flex-warp相应的值

<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: rgb(27, 181, 71);
display: flex;
flex-flow:row-reverse wrap-reverse ;
}
.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>

6.4 align-items

该属性为弹性容器内的项目在纵轴对齐方式

align-items
值描述
strecth默认。项目拉伸以适应容器
center居中
flex-start位于容器开头
flex-end位于容器末端
baseline项目被定位到容器基线
<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: rgb(27, 181, 71);
display: flex;
align-items: center;
.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>

6.5  justify-content

横轴对齐方式

justify-content
值描述
 flex-start位于容器开头（默认值）
flex-end位于容器结尾

center

位于容器中央
space-between行与行之间有空隙
space-around行之前，行之间，行之后都有间隙
<html lang="en">
<head>
<title>弹性盒子</title>
<style>
.flex-contain{
        width: 400px;
        height: 400px;
        background-color: rgb(27, 181, 71);
        display: flex;
       justify-content:space-between;
}
.flex-item{
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
}
</style>
</head>
<body>
<div>    
    <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>

6.5  align-content 

属性修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。

align-content
值描述
stretch默认值。行拉伸以占据剩余空间。
center朝着弹性容器的中央对行打包。
flex-start朝着弹性容器的开头对行打包。
flex-end朝着弹性容器的结尾对行打包。
space-between行均匀分布在弹性容器中。
space-around行均匀分布在弹性容器中，两端各占一半。
<html lang="en">
<head>
<title>弹性盒子</title>
<style>
.flex-contain{
        width: 400px;
        height: 400px;
        background-color: rgb(27, 181, 71);
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
}
.flex-item{
        width: 100px;
        height: 100px;
        background-color: red;
        
        border: 1px solid black;
}
</style>
</head>
<body>
<div>    
    <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>

 7.1  转换

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2D转换​​​​​​​

值描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
（参数顺序： scaleX ,skewY,skewX,scaleY,translateX,translateY）
translate(x,y)定义 2D 转换。（x为距左边框的距离，y为距上边框的距离）相当于移动该项目
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
scale(x,y)定义 2D 缩放转换。（x,y分别为横轴和竖轴的缩放比例）
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
<html lang="en">
<head>
<title>弹性盒子</title>
<style>
.flex-contain{
        width: 400px;
        height: 400px;
        background-color: rgb(27, 181, 71);

     
}
.flex-item{
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        transform: ;
        transform:rotate(30deg);
       
}
</style>
</head>
<body>
<div>    
    <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>

 

<html lang="en">
<head>
<title>弹性盒子</title>
<style>
.flex-contain{
        width: 400px;
        height: 400px;
        background-color: rgb(27, 181, 71);

     
}
.flex-item{
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        transform: ;
        /* transform:rotate(30deg); */
        transform: scale(0.5,2.0);
}
</style>
</head>
<body>
<div>    
    <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>

 

<html lang="en">
<head>
<title>弹性盒子</title>
<style>
.flex-contain{
        width: 400px;
        height: 400px;
        background-color: rgb(27, 181, 71);

     
}
.flex-item{
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid black;
        transform: ;
        /* transform:rotate(30deg); */
        /* transform: scale(0.5,2.0); */
        transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div>    
    <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>

 3D转换

与2D转换相似，就是多了z轴

值描述
none定义不进行转换。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
        perspective(n)为 3D 转换元素定义透视视图。
@wllllllll
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
响应式布局总结(推荐)
09-22
下面小编就为大家带来一篇响应式布局总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css布局总结
11-09
包含居中的各种方案，多列布局（自适应布局设计），全局布局方法
响应式布局总结
热门推荐
LOxia的博客
03-28 1万+
rem适配布局，内含阿里百秀案例代码，bootstrap内容讲解
网页布局总结及案例
qq_44757223的博客
03-23 995
网页布局总结以及淘宝焦点图布局制作
JavaFX 布局总结
学习使我快乐_玉祥
07-01 2715
Pane 布局的父类，使用坐标定位，类似绝对布局，子控件使用layoutX，layoutY定位 BorderPane边框布局 将界面分割成上中下，中间部分又分成左中右，一共五部分，通过<top><left><center><right><bottom>来设置内容。 HBox水平布局 将控件水平排列，不换行。 VBox垂直布局 将控件垂直排列，不换行。 FlowPane 流式布局 默认水平排列，排满一行之后会换行，提供属性设置水..
Flex布局总结
qq_50909707的博客
03-14 5440
目录 一、基本使用 二、主要的父容器属性 （1）flex-direction设置子元素排列 （2）justify-content设置子元素对齐方式 （3）flex-wrap设置换行 （4）align-items单行时设置子元素位置 (5) align-content多行时设置子元素位置 （6）flex-flow复合属性 三、子项常用属性 （1）flex设置子项的空间大小 （2）align-self单独设置每个子项的位置 （3）order设置item顺序 一、基本使用...
【css】最全布局总结
qq_45406325的博客
08-13 7959
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
Android布局总结
weixin_41549804的博客
02-19 906
表格布局 网格布局 卡片布局 抽屉布局 流式布局 瀑布流布局 轮播布局 底部导航异形布局 协调者布局 回弹布局 3D画廊布局 头部/底部布局
flex布局总结
棒怡情的专栏
01-12 1618
针对容器的属性 flex布局属性。声明一下布局是flex布局。 display:flex； 声明一下flex布局的方向（默认是水平。） flex-direction:row； 设置里面的内容如果一行放不下。是否自动换行 flex-wrap:wrap //换行 flex-wrap:nowrap //不换行 flex-wrap:wrap-reverse //换行，第
div+css布局总结
yuange
04-06 1760
一 布局分为静态布局和响应式布局。我们div和css布局是静态布局。    在静态布局下，用百分号和像素设置div等区块的width和heigth属性效果是不一样的。                                                           百分号    1 当你用百分号设置各个div（区块）的时候，是相对父元素的，当父元素相对父元素，父元素与又相对父元素...
Eclipse SWT 布局总结
张知文的博客
12-10 2483
绝对布局 absolute ，表单布局 FormLayout （相对布局），填充布局 FillLayout（水平填充、垂直填充），网格布局 GridLayout（列数、列宽度是否相同），行布局 RowLayout（水平行、垂直行），栈布局 StackLayout （后进先显示）
Android开发——布局总结
m0_38012497的博客
09-17 1108
今天完成项目主页的布局，这里总结一下。
PCB布局总结
11-08
关于各层布线的环境，内外层布线的优势，顶底层分析PCB走线总结。
PCB 布局总结
10-30
挺不错的多年PCB LAYOUT总结资料，对于新手的启发很大
移动端布局总结相关内容：.md
12-13
布局
网站基本布局CSS
m0_46608027的博客
07-24 808
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 790
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 261
【代码】TS如何处理js模块的类型？
Spring Cloud微服务项目统一封装数据响应体
最新发布
洛*璃的博客
07-26 453
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
"QuietGRID前端技术分享与入门布局总结
本文将对该ppt进行总结，向读者介绍Grid布局的基本原理和使用方法。 Grid布局是一种二维布局系统，可以将网页布局分为网格区域，通过规定行和列的大小来控制元素的排列和对齐。Grid布局与传统的基于盒模型的布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值