JavaWeb-CSS的盒模型与弹性布局

这篇具有很好参考价值的文章主要介绍了JavaWeb-CSS的盒模型与弹性布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS的盒模型

每一个HTML就相当于一个矩形的"盒子".

这个盒子由以下几个部分组成

  • 边框 border
  • 内容 content(下图中间蓝色部分)
  • 内边距 padding
  • 外边距 margin

JavaWeb-CSS的盒模型与弹性布局

边框

边框的基础属性:

粗细: border-width
样式: border-style
颜色:border-color

<style>
    div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    /* solid为实线边框,dashed为虚线边框,dotted为点线边框 */
    border-color: blue;    
    }
</style>
<div>
    边框
</div>

JavaWeb-CSS的盒模型与弹性布局
接下来我们设计一个500x250的盒子

<style>
    div {
        height: 250px;
        width: 500px;
        background-color: green;
    }
</style>
<div >盒子</div>

JavaWeb-CSS的盒模型与弹性布局
我们为其设置一个边框

        border-width: 10px;
        border-style: solid;
        border-color: red;

JavaWeb-CSS的盒模型与弹性布局

我们会发现盒子变大了,得出边框会撑大盒子的结论.那么怎么样才能使盒不会被边框撑大呢

通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子

  * {
    box-sizing: border-box;
  }

JavaWeb-CSS的盒模型与弹性布局

内边距

设置内容和边框之间的距离

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
<style>
div {
    background-color: red;
    width: 400px;
    height: 200px;
    padding-top: 50px;
    padding-left: 100px;
  
}
</style>
<div>盒子</div>

JavaWeb-CSS的盒模型与弹性布局
可以看到内边距也会撑大盒子的,当然也可以使用box-sizing 属性进行修改.

外边距

控制盒子和盒子之间的距离

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

使用方法跟内边距相差无几,所以这里就不子演示了

块级元素水平居中

三种写法:

      <style>
    div {
        width: 500px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        /* 第二种:
        margin: auto;
        第三种:
        margin: 0 auto; */
        background-color: green;
    }
</style>
<div>盒子</div>

JavaWeb-CSS的盒模型与弹性布局
有一个前提是必须为块元素指定宽度,不然就会跟父元素一致.
JavaWeb-CSS的盒模型与弹性布局

有一点需要注意的是
text-align: center 是让行内元素或者行内块元素居中的.
margin: auto 是给块级元素用得.

弹性布局

弹性布局需要了解一些概念

flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

  • 被设置为 display:flex 属性的元素, 称为 flex container
  • 它的所有子元素立刻称为了该容器的成员, 称为 flex item
  • flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

这些概念看完不懂没关系,继续看下面的属性及案例演示.

常用的一些属性

justify-content

设置主轴上的子元素排列方式

<style>
    div {
       height: 150px;
       width: 100%;
       background-color: red;
        display: flex;
    }
    div span {
        width: 100px;
        height: 100px;
        background-color: green;    
    }
</style>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

JavaWeb-CSS的盒模型与弹性布局

 div {
        height: 150px;
        width: 100%;
        background-color: red;
        display: flex;
        justify-content: center;   
    }

加上 justify-content: center后样式就发生了变化
JavaWeb-CSS的盒模型与弹性布局

justify-content的常用取值有:
center -位于容器中央
flex-start -位于容器结尾
flex-end -位于容器开头
space-between -在行与行之间留有空间
space-around -在行前行后行之间都留有空间

align-items

设置侧轴上的元素排列方式

<div>
    
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <style>
    div {
    width: 500px;
    height: 500px;
    background-color: green;
    display: flex;
    justify-content: space-around;
    }
    div span {
    width: 150px;
    background-color: red;
    }
    </style>

JavaWeb-CSS的盒模型与弹性布局
使用 align-items 实现容器的结尾对行打包

<div>
    
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <style>
    div {
    width: 500px;
    height: 500px;
    background-color: green;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    }
    div span {
    width: 150px;
    background-color: red;
    }
    </style>

JavaWeb-CSS的盒模型与弹性布局
align-items的常用取值:
center -容器的中央对行打包
flex-start -容器开头对行打包
flex-end -容器结尾对行打包
space-between -行均匀分布在容器中
space-around -行均匀分布在容器中,两端各占一半文章来源地址https://www.toymoban.com/news/detail-465932.html

到了这里,关于JavaWeb-CSS的盒模型与弹性布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html&CSS-----弹性布局

      目录 前言 什么是弹性布局  样式  学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式)  2.父元素容器的属性(*5) (1)主轴  代码示例:  (2)交叉轴 3.子元素项目的属性(*4)         前面我们学习了浮动布局方式,那么今天我们学习新的布局方式-

    2024年02月13日
    浏览(43)
  • CSS 弹性布局

    提示:这篇比较重要,做复杂页面时经常会用到!会不断更新❗ 提示:这里可以添加本文要记录的大概内容: 弹性布局的总体思想是把布局不写在标记上,而是把布局的样式代码写在最大的父标记上 让布局实现自适应和自动调整,可以在不同屏幕大小和设备上保持一定的布

    2024年02月11日
    浏览(83)
  • CSS3弹性布局

    2009年,W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局,使用该模型可以轻松地创建自适应窗口的流动布局,或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案,其中混合过渡版本主要针对IE10进行兼容。目前,CSS3弹性布

    2024年02月06日
    浏览(47)
  • CSS弹性布局常用设置

    目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 设置一个容器元素为弹性块状元素(内部允许有弹性元素flex撑开)   

    2024年02月11日
    浏览(51)
  • css 弹性布局的详细说明

    CSS弹性布局(Flexible Box Layout,简称Flexbox)是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局,使它们能够自动调整大小、排列和对齐。 Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用

    2024年02月16日
    浏览(45)
  • CSS3弹性盒布局详解

    弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知,弹性盒由 弹性容器 , 弹性子元素 和 轴 构成,在默认情况下,弹性子元素的排布

    2024年01月18日
    浏览(44)
  • html&CSS-----弹性布局案例展示

    目录 前言 效果展示 ​编辑 代码 思路分析         上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客) html代码: CSS代码: 首先我们去创建一个大盒子box,作为容器,里面放入5个

    2024年02月12日
    浏览(45)
  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(45)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(52)
  • 第二章:CSS基础进阶-part3:弹性例子布局

    1、普通盒模型 2、弹性盒布局 使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换 这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包