[19/06/06-星期四] CSS基础_盒子模型

2023-12-26 19:40

本文主要是介绍[19/06/06-星期四] CSS基础_盒子模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、盒子模型(框模型、盒模型)

  CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里。

  为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子。我们只需要把相应的盒子摆放到网页中对应的位置即可完成网页布局。

模型图片:

  

  

 

 

 

 

 

 

 

 

 

 

 

参数:

     1、width 和height:设置内容区、元素的高度和宽度,而不是盒子的整个大小,盒子的可见大小=内容区+内边距+边框

  2、border:为一个元素设置边框,必须指定3个元素,缺一不可。但是不写的话,有默认值,都不写是没有的,写至少一个都会显示出来。

    border-width:边框的宽度;默认值

        border-width:10px,表示设置4个边框都为10px;

        border-width:10px,20px,30px,40px  表示设置上、右、下、左边分别为10、20、30、40px。顺时针设置。

        border-width:10px,20px,30px,表示设置 上、左右、下分别为10、20、30px。注意左右一样。

        border-width:10px,20px 表示设置 上下、左右分别为10、20px。上下一样、左右一样。

        border-top / right / bottom /left -width:表示可以单独设置上、右、下、左指定边宽度值。

    border-color:边框的颜色;

        border-color:设置方式和border-width一样。取值的个数从1到4个不一。

        border-top / right / bottom /left -color:表示可以单独设置上、右、下、左指定颜色的值

    border-style:边框的样式;

        none:没有边框   solid:实线边框  dotted:点状边框      

        dasted:虚线边框   double:双线边框     

    如何简写? 

         border:同时设置3个样式,没有任何的顺序要求。如:border:10px red solid;同时指定4个边。

        border-top / right / bottom /left:单独设置上、右、下、左的样式。

        如:border:10px red solid; border-right:none;表示上下左设置好,不设置右边。简便。    

  3、padding:内边距,指盒子内容区域到盒子边框之间的距离,有4个方向。会影响盒子的大小,元素的背景颜色会延伸到内边距。

     padding-top / right / bottom /left -color:表示可以单独设置上、下、左、右指定的内边距的值。

    如何简写:规则和border-width一致。取值个数从1个到4个不等。

        padding:10px,表示上下左右的边距都是10px.

    所以盒子的宽度:左边框的宽度+左内边距的宽度+内容区的宽度+右内边距的宽度+右边框的宽度。

        高度:上边框的高度+上内边距的高度+内容区的高度+下内边距的高度+下边框的高度。

  4、margin:外边距,指的是盒子与其他盒子之间的距离,不会影响盒子的大小,会影响盒子的位置。

     margin-top / right / bottom /left:设置上(上边框与其他盒子的距离)、右、下、左的外边距

     等于设置top(顶部距离)时,盒子往下移动一段距离,自身位置改变,其他依次类推。

   注意:由于盒子默认值靠左靠上放置的、设置上和左外边距会导致自身位置的改变。设置下和右边距会导致其他盒子的改变。

      外边距也可以指定一个负值,则元素会向反方向移动。

      margin也可以设置为auto,但它一般只设置给水平方向设置。如margin-left(左):auto 表示设置左边距为最大,就是移动到最右边,反之类推。

    若将左边和右边都设置为auto,将相当于将元素在父元素中水平居中。

      垂直方向设置为auto,则外边距默认为0;

   如何简写?margin:10px。规则和上边的一样,可取值的个数从1到4不等。

  5、垂直外边距的重叠(折叠)

    指网页上下的盒子(兄弟元素) 之间相邻的垂直方向外边距会取最大值,而不是求和。例如上边盒子下外边距设置为50px,下边的盒子上外边距设

置为50px,则两个盒子的距离是50px,而不是相加后的100px。

    如果不想重叠,可以相邻盒子(如源码中2个div挨着)中加个内容或者给某个盒子设置个边框。注意div是个块元素。

    如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素,还是在父子之间加个内容。

    

浏览器默认边距:浏览器默认的  <body></body> 有一个 8px 的外边距。而浏览器的默认样式不需要使用,所以讲编写样式时,需要将margin和padding去掉。

可以使用 *{

     margin:0;padding:0;

}去除默认样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">.box1{/*类选择器*/width : 200px;/*内容区的宽和高*/height: 200px;background-color: #bfa;/*设置边框 border*/border-width: 10px;border-color:red ;border-style:solid ;padding: 20px;margin-bottom: 50px;}.box2{width: 100%;/*子元素把父元素的内容区占满*/height: 100%;background-color: yellow;}.box3{width: 200px;height: 200px;background-color: #bfa;border: solid 10px red ;padding: 20px;margin-top:50px ;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body>
</html>

 

二、内联元素的盒模型(如span元素)

  内容区:不能设置宽和高。设置完没用。

  内边距(padding):可以设置水平方向的内边距,影响页面的布局,也可以设置垂直方向的内边距,但是不会影响页面的布局,因为它可以覆盖下边的盒子,

不像块元素可以往下挤别的盒子

  边框(border):可以设置边框,但是垂直的不会影响页面的布局。水平的可以。

  外边距(margin):支持水平方向的外边距,不会重叠,而是求和。不支持垂直外边距,设置完没反应。

特殊样式:

  display:将内联元素(不支持设置宽和高)变成块元素(支持设置宽和高)

    inline:将元素作为内联元素显示;(不独占一行,不能设置宽高)

    block:将元素设置为块元素显示;(独占一行,可以设置宽高)

    inline-block:将元素转成行内块元素。它可以使元素两种特点都要。即可以设置宽高,又不独占一行。 如设置图片为超链接。

    none:隐藏元素,不让用户看见。并且这个元素消失后不会占据位置,可以腾出位置。

  visibility:是否可见

    visible:元素可见

    hidden:元素不可见,但是会占据位置。人走茶不凉。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内联元素盒模型</title><style type="text/css">span{background-color:yellowgreen ;}.box1{width: 100px;height: 100px;background-color: red;}a{background-color: yellow;display: block;width: 200px;height: 200px;}</style></head><body><span id="s1"> 锄禾日当午,</span> <!--内联元素--><span> 汗滴禾下土。</span><span> 谁知盘中餐,</span><span> 粒粒皆辛苦。</span><div class="box1"> <!--块元素-->悯农</div><a href="01 html基础知识.html">一个超链接 </a></body>
</html>

   overflow:溢出,可以设置父元素如何处理溢出的内容。

    子元素是默认存在于父元素的的内容区的中间,最大可以等于父元素的大小,如果子元素的大小超过父元素的内容区,则超过的大小会在父元素以外的位置显示,

  超出父元素的内容,称为溢出的内容。

   属性:visible,默认值,元素不会对内容做任何处理,元素在父元素之外的区域显示。

      hidden,一剪梅,把多余的位置剪去,溢出的内容会被修剪。

      scroll,在父元素上加个滚动条。通过拖动滚动条,可以查看完整内容。该属性无论内容是否溢出,都会添加水平和垂直双方向的滚动条。

      auto,根据需求自动添加智能滚动条。需要水平就加水平,需要垂直就加垂直。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>overflow</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: #bfa;overflow: auto;}.box2{width: 100px;height: 500px;/*子元素比父元素高*/}</style></head><body><div class="box1"><div class="box2">迢迢牵牛星,皎皎河汉女。纤纤擢素手,札札弄机杼。终日不成章,泣涕零如雨;河汉清且浅,相去复几许!盈盈一水间,脉脉不得语。</div></div></body>
</html>

  三、文档流(表示一个页面的位置)

    文档就是一个网页,文档流就是网页最底层,表示的是地基,创建的元素(标签)都默认在文档流中。

    元素在文档流中的特点:

      块元素:在文档流中独占一行,自上向下排列。块元素在文档流中默认宽度是父元素的100%,宽度值是auto,自动设置。

        当元素的宽度的值是auto,此时指定内边距不会影响可见框的大小,而是自动修改宽度,以适应内边距。

        高度默认被子元素撑开。 如:div

      内联元素:在文档流中只占自身的大小,默认从左到右排列。如果一行不足以容纳所有的内联元素,会换到下一行,也是从左到右。

          内联元素的宽和高都是被默认被内容撑开。如:span

  四、浮动(float)    

      块元素默认在文档流中垂直排列。若希望水平排列,使块元素脱落文档流,使用float来使元素浮动,从而脱落文档流。

      none:默认值,元素默认在文档流中排列。

      left:元素会立即脱离文档流,向页面的左侧浮动。

      right:元素会立即脱离文档流,向页面的右侧浮动

    当为一个元素设置浮动后(float的属性是个非none的值),元素会立即脱离文档流,某个元素脱离之后,它下边的元素会立即向上移动,元素浮动之后会尽量向

  左上(属性为left)或右上(属性为right)浮动,直到遇到父元素的边框(如:浏览器的边框)或其他浮动元素的边框。

    如果浮动的元素上边是个没有浮动的块元素,则浮动元素不会上边超过块元素,即只在本行移动。

    浮动的元素不会超过它的上边的兄弟元素,最多齐平。

    浮动的元素不会覆盖文字,文字会自动环绕浮动元素的周围,所以可以通过浮动来设置文字环绕图片的效果。

    当元素设置浮动后,会脱离文档流,块元素脱离之后高和宽都被内容撑开,内联元素脱离之后会变成块元素,即宽和高都被撑开。

 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮动的学习</title><style type="text/css">.box1{/*块元素默认在文档流中垂直排列。若希望水平排列,可以使块元素脱落文档流使用float来使元素浮动,从而脱落文档流*/width: 200px;height: 200px;background-color: gray;float: left;}.box2{width: 200px;height: 200px;background-color: orange;float: left;}.box3{width: 200px;height: 200px;background-color: green;float: left;}</style></head><body><div class="box1"> </div><div class="box2"> </div><div class="box3"> </div></body>
</html>

 

 

     

 

转载于:https://www.cnblogs.com/ID-qingxin/p/10991615.html

这篇关于[19/06/06-星期四] CSS基础_盒子模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/540598

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

06 C++Lambda表达式

lambda表达式的定义 没有显式模版形参的lambda表达式 [捕获] 前属性 (形参列表) 说明符 异常 后属性 尾随类型 约束 {函数体} 有显式模版形参的lambda表达式 [捕获] <模版形参> 模版约束 前属性 (形参列表) 说明符 异常 后属性 尾随类型 约束 {函数体} 含义 捕获:包含零个或者多个捕获符的逗号分隔列表 模板形参:用于泛型lambda提供个模板形参的名

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验