布局的总结

最新推荐文章于 2024-10-10 11:15:29 发布

VermouthPro

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量61

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/VermouthPro/article/details/130152003

版权

1.盒子布局

none	定义无边框
hidden	与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。
dotted	定义点状边框。（大部分浏览器中显示为实线）
dashed	定义虚线。（大部分浏览器中显示为实线）
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>盒子布局</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
       .two{
            width:100px ;
            height: 100PX;
            background-color: red;
            /* border-bottom:1px solid black;
            border-top: 2px solid green; */
            /* boder  边框 上右下左 */
            border: 20px;
            /* 
            none：定义无边框
            hiddn：与"none"相同。不过应用于表时除外，对于表，hiddn用于解决边框冲突。
            dotted：定义点状边框，在大多数浏览器中呈现为实线。
            deshed：定义虚线，在大多数浏览器中呈现为实线。
            solid:定义实线。
             */
            padding: 20px;
            /* padding: 内边距 内容距离边框的问题 上右下左 */
           margin-left:27px;
           /* margin: 外边距 边框距离页面的问题 */
        }
     </style>
</head>
<body>
    <div class="one">
    <div class="two">这是一个div</div>
</div>
</body>
</html>

2.元素分类

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

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

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

属性取值：

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

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

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

none：此元素不会被显示

block：此元素将显示块级元素，此元素前后会带有换行符。

inline：默认，此元素会被显示为内联元素，元素前后没有换行符。

css元素隐藏方式：

1.dispaly：none

2.widt：0px，height：0px

<!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>
 
    <!-- 
    块级元素 ------- 独占一行(自动换行) div p hn hr 可以设置宽度和高度
    行内元素（内联） ------ 不会自动换行 a span 不可以设置宽度和高度（不起作用）
    display可以实现块级元素和行内元素之间互换
    属性取值：
    none ----- 表示不会被显示，隐藏元素的方式之一
    block ----- 将元素变为块级元素，也会自动换行（默认有个换行符）
    inline ----- 将元素变为行内元素
    -->
     
    <!--
         css中隐藏元素的方式：
    第一种：display：none
    第二种：width：0；height：0; 
     -->
</head>
<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>
<body>
    <div class="one"></div>
    <div >这是第一个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>

3.浮动布局

通过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>
 
    <!-- 
    通过float属性去设置浮动布局
   取值：left none(不浮动) right
   注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
   -->
   <!--
     如果要消除这种影响（消除浮动）通过clear属性
     none:默认 允许两边都可以浮动
     left：不允许左边的浮动
     right：不允许右边的浮动
     both：不允许两侧有浮动 -->
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            float: left;
 
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            clear: both;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
            float: right;
            clear: right;
        }
    </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：不允许两侧有浮动

4.定位布局

属性：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>
    <!-- 
        属性：position ------ 设置对象的定位方式
        tatic ----- 静态定位（没有设置位置）默认
        absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设
       置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
       relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置
       相较于自身的相对定位 -->
    <style>
        .main{
            width:1200px;
            height: 600px;
            border: 1px solid black;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            float: left;
            /* position: absolute;
            top: 200px;
            left: 200px; */
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            clear: both;
            position: relative;
            left: 600px;
 
        }
        .box3{
            width: 200px;
            height: 200px;
            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>

5.其他属性

5.1 overflow

设置对象内容超过指定的高度或者宽度的时候如果管理它的内容

visible	默认值不剪切内容也不添加滚动条
auto	在必需时对象才会被裁剪或者添加滚动条
hidden	不显示超过对象尺寸的内容（会被隐藏）
scroll	总会显示滚动条

<!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>
.main{
width: 600px;
height: 600px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div class="main">
<img src="..\images\图片1.png" alt="">
</div>
</body>
</html>

5.2 zoom

设置或者检索对象的缩放比例 normal : 默认值显示的是对象的实际尺寸

number: 百分比，无符号的浮点数浮点数为1.0相当于100%相当于取值为normal

<!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>zoom</title>
    <!-- 
    设置或者检索对象的缩放比例
    normal : 默认值 显示的是对象的实际尺寸
    number:百分比|无符号的浮点数 浮点数为1.0相当于100%相当于取值为normal -->
<style>
    .main{
       width: 200px;
    height: 200px;
    border: 1px solid black;
}
img{
    zoom: 1.0;
}
</style>
</head>
<body>
    <div class="main">
    <img src="D:\demo\images\2023-04-05_115204.png" alt="">
    </div>
</body>
</html>

6.弹性盒子css3

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