常见的布局方式

最新推荐文章于 2024-06-11 22:02:21 发布

不爱学习的nnz

最新推荐文章于 2024-06-11 22:02:21 发布

阅读量87

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_47157937/article/details/128973473

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写目录标题

CSS
- 1.盒模型
- - CSS使用的两种盒子
  - 什么是CSS盒模型？
响应式布局
自适应布局

CSS

1.盒模型

CSS使用的两种盒子

在css中所有的元素都没一个个盒子包围着，盒子可分为块级盒子和内联盒子

块级盒子的特点：
- 会自动换行
- 盒子会在内联方向上扩展并占据父容器子该方向上的所有可用空间，绝大多数情况下盒子宽度是父容器宽度
- width和height会发挥作用
- 设置内边距、外边距、边框会将其他元素从当前盒子周围推开

标题、段落、div默认情况下都是块级盒子

内联盒子的特点：
- 不会自动换行
- width和height不会被应用
- 在垂直方向设置内、外边距、边框会被应用但是不会将上下元素推开
- 在水平方向设置内、外边距、边框会被应用且会将处于内联状态的盒子推开

span、a默认情况下是内联盒子

使用display属性可修改盒子状态为块级盒子和内联盒子

display:inline // 设置为内联元素
display:block // 设置为块级元素
display:inline-block // 设置为行内块元素既有行内元素的（一行可有多个）特性，又有块元素的（可设宽高）特性

display：inline-block处于内联和块级盒子中间
元素设置后

宽、高将会生效
margin、padding、border会推开其他元素

display: inline-block的应用：
在这里插入图片描述

什么是CSS盒模型？

浏览器的渲染引擎在对网页文档布局时，会按照css基础盒模型标准，将所有的元素看成一个个盒子，再用css去决定盒子的属性

盒模型由四部分组成：
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性

在这里插入图片描述
标准盒模型
设置box-size:content-box（默认值）

如果给盒设置宽、高实际设置的是： content box
计算-标准盒模型宽、高为：宽、高+border+margin+padding 一起来决定盒子的大小

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

设置了宽、高为350、150
标准盒模型宽度：350+25+25+25+25+5+5=460

怪异盒模型
设置box-size:boder-box

如果给盒设置宽、高实际设置的是：去除 margin 后剩下的元素占用区域的宽高。
计算-怪异盒模型宽、高：宽、高+border+padding

<div class="box alternate">I use the alternate box model.</div>
<style>
    .box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px; //表示除margin的部分
  height: 150px; //表示除margin的部分
}

.alternate {
  box-sizing: border-box;
}

响应式布局

什么是响应式布局：确保一个页面在所有终端上都能展现出满意的效果

1.媒体查询

什么是媒体查询：为适应不同屏幕尺寸而设定的CSS样式

在这里插入图片描述

设置浏览器的宽度，调整浏览器的可视化窗口改变

2.flex布局

flex布局是从行或列去布局元素的一维布局方法，元素可膨胀填充额外的空间，也可以收缩适应更小的空间。可以配合rem处理尺寸的适配问题，用来为盒状模型提供最大的灵活性，任何一个容器都可以被指定为flex布局更加符合响应式设计的特点

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
没用flex布局：

<body>
    <article>标题</article>
    <section>
        <div>看书</div>
        <div>写字</div>
        <div>画画</div>

    </section>
    <style>
        div {
            border: 1px solid blue
        }

        article {
            border: 1px solid blueviolet
        }
    </style>
</body>

在这里插入图片描述

想让 section里的内容排列成一行

 section{
            display: flex;
        }

在这里插入图片描述

设置display为flex的元素为一个块级元素，它的子元素会成为flex项
如果希望其他元素也成为该元素的flex项，可以设置display：inline-flex，该元素将类似于行内元素

  article {
            border: 1px solid blueviolet;
            display: inline-flex;
        }

在这里插入图片描述
flex模型如何布局：
flex沿着两个轴布局：

主轴：元素放置方向的延伸
交叉轴：垂直于元素放置的方向

设置了flex的父元素称为容器，容器中表现为flex的元素称为项

容器的属性

flex-direction: 项目排列的方向，默认为row
- column、row、column-reverse、row-reverse
flex-wrap: wrap 子项换行
flex-flow:row wrap 是 flex-direction、flex-wrap的缩写
justify-content：存在剩余空间时设置间距的方式
align-items：主轴的所有项目的排列方式（每一行当做独立的个体去处理）
align-content：与上一个相似，是把多行里面的内容当作整体处理

项目的属性

order:子项设置的数值越小排列越靠前，默认值为0
flex-grow：设置弹性盒子的扩展比例，有剩余空间后如何去填充，flex-grow：1是所占的份数，所占一份
- flex-shrink：设置弹性盒子的缩小比例
flex-basis:设置弹性盒子伸缩基准值，可以理解为宽度，%为父元素的百分比，设置flex-basis后width将不再生效
flex：是flex-grow、flex-shrink、flex-basis的简写，顺序不能乱

在这里插入图片描述
flex：1 1 auto 允许自动扩大和缩小
flex：0 0 auto 不允许自动扩大或缩小，所以设置的width生效
flex：150px 允许扩大允许缩小长度是150px
如果flex设置1 1，后面第三个数设不设置都没有关系，因为已经自动扩大或缩小了

align-self

3.rem的使用

rem是一个度量单位，这个度量单位是以rem度量的尺寸大小作为依据
概念：指相对于根元素的字体大小单位

在这里插入图片描述
与em的区别：em相对于父一级的字体对象

4.rem弹性布局

在这里插入图片描述

自适应布局

在这里插入图片描述

不同的设备对应不同的html，也就是不同的设备进入不同的文件
局部自适应：三栏布局效果

 <style>
        #div0{
            display: flex;
        }
       div:first-child{
            background-color: yellow;
            flex: 0 0 50px;
        }
        div:nth-child(2){
            background-color: red;
            flex: 1 1 auto;
        }
        div:nth-child(3){
            background-color: yellow;
            flex:0 0 50px;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

在这里插入图片描述

不爱学习的nnz

关注

0
点赞
踩
0

收藏

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

浏览器的渲染引擎在对网页文档布局时，会按照css基础盒模型标准，将所有的元素看成一个个盒子，再用css去决定盒子的属性盒模型由四部分组成：Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。
复制链接

扫一扫