前端学习 -- Css -- 盒子模式

简介: 框模型:CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

框模型:

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。
为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

 

一个盒子我们会分成几个部分:
– 内容区(content)上图的element区域
– 内边距(padding)
– 边框(border)
– 外边距(margin)

内容区

内容区指的是盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框,则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小。
width和height属性只适用于块元素。

内边距

顾名思义,内边距指的就是元素内容区与边框以内的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
例如:
padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距。

padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
padding:10px;
– 同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

边框

可以在元素周围创建边框,边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框:
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
和padding一样,默认width和height并包括边框的宽度。

边框的样式

边框可以设置多种样式:
– none(没有边框)
– dotted(点线)
– dashed(虚线)
– solid(实线)
– double(双线)
– groove(槽线)
– ridge(脊线)
– inset(凹边)
– outset(凸边)

外边距

外边距是元素边框与周围元素相距的空间。
使用margin属性可以设置外边距。
用法和padding类似,同样也提供了四个方向的margin-top/right/bottom/left。
当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码margin:0 auto可以使元素居中。

 举个例子:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                border-width:10px 20px 30px 40px ;
                border-style: solid dotted dashed double;
                border-color: red yellow orange blue;
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
    </body>

</html>

效果:

 示例代码可以看:https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson12.html

具体可以看下运行效果

 

内边距demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                border-width: 10px;
                border-style: solid;
                border-color: red;
                padding: 10px 20px 30px 40px;
            }
            
            .box1 {
                width: 100%;
                height: 100%;
                background-color: yellow;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

</html>

看下效果:

代码见:https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson13.html

具体可以看下运行效果

 

外边距demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                margin-top: 100px;
                margin-left: 100px;
            }
            
            .box1 {
                width: 100%;
                height: 100%;
                background-color: yellow;
            }
            
            .box2 {
                width: 200px;
                height: 200px;
                background-color: green;
                margin-left: -100px;
            }
            
            .box3 {
                width: 200px;
                height: 200px;
                background-color: red;
                margin-left: auto;
                margin-right: auto;
            }
            
            .box4 {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 50px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>

</html>

看下效果:

代码见:https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson14.html

具体可以看下运行效果

垂直外边距的重叠

- 在网页中相邻的垂直方向的外边距会发生外边距的重叠;所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和,如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素。(经过测试,貌似第二条不对,也是取得父子元素中最大值)

例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /**
             * box1距离box2距离取最大值 150
             */
            .box1{
                width: 100px;
                height: 100px;
                background-color: red;
                margin-bottom: 150px;
                
            }
            
            .box2{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-top: 100px;
            }
            
            /**
             * 父子元素
             * box4子元素
             * box3父元素
             * box4元素的外边距设置给父元素box3
             */
            .box3{
                width: 200px;
                height: 100px;
                background-color: yellow;
                margin-top: 200px;
            }
            
            .box4{
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
                margin-top: 100px;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box3">
            <div class="box4"></div>
        </div>
        
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

效果:

相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
210 26
|
2月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
76 1
|
2月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
3月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
168 11
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
前端开发
css显示模式
块级元素 独占一行 宽度默认是父级的100% 添加宽高属性生效 行内元素 尺寸由内容决定 添加宽高属性不生效 行内块元素 尺寸由内容决定 添加宽高属性生效
|
4月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
88 4
|
4月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
94 4
|
5月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
105 0

热门文章

最新文章

  • 1
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
  • 3
    前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
  • 4
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 6
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 7
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 9
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
  • 10
    构建高效Java后端与前端交互的定时任务调度系统