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日
    浏览(42)
  • CSS3弹性布局

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

    2024年02月06日
    浏览(44)
  • CSS 弹性布局

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

    2024年02月11日
    浏览(81)
  • CSS弹性布局

    ​ 弹性盒子是 CSS3 的一种新的布局模式。 ​ CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 ​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月13日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包