CSS基础——盒子模型

目录

简介

盒子模型组成

内容区

内边距

边框

border-width

border-color

border-style

border

外边距

负值

auto

简写属性

垂直外边距的重叠

浏览器默认设置

内联元素的盒子


简介

在网页中,一切都是可以看作为“盒子”。

在css处理网页的时候,我们认为每一个元素都是包含在一个看不见的盒子里面

盒子模型组成

由里到外盒子模型依次包含:

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

如下图所示,可以很形象的让我们理解各个部分:

内容区

内容区具体指的是盒子中放置内容的那么一块区域,也就是元素中的文本内容,子元素都是存在于内容区之内的。

假如我们没有为元素去设置内边距还有边框,则内容区大小 默认和盒子大小是一致的。

通过width来设置我们盒子内容区的宽度,height来设置盒子内容区的高度。(记住这里的两个属性仅仅是用爱设置盒子内容区的大小,盒子的大小还要加上边框的宽度)

width和height属性只适用于块元素

内边距

内边距:指的是盒子的内容区与盒子的边框之间的距离

一共4个方向的内边距,可以通过以下4个属性来分别设置4个方向的属性:

padding-top:

padding-right:

padding-bottom:

padding-left:

内边距会影响到盒子可见框的大小,元素的背景会延伸到内边距

盒子的大小是有内容区、内边距以及边框共同决定的。

盒子可见框的宽度=border-left-width+padding-left+width+padding-right-width+boder-right-width

盒子可见框的高度公式同上

边框

为元素设置边框,则必须指定下面的这三个样式:

border-width

        边框的宽度

        他可以粉笔指定4个边框的宽度;如果我们指定了4个值,则4个值分别设置给了 上 右 下 左 ,这是按照顺时针方向设置的;如果指定3个值,则这三个值会分别设置给 上 左右  下;如果是指定2个值,则两个值会分别设置给上下  左右;如果制定1个值,则4个方向边框都是1个值

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

border-color

        边框的颜色

        和宽度一样,color也提供了4个方向的样式粉笔指定颜色的

border-style

        边框的样式

        可选值:

                none:默认值,没有边框

                solid:实线

                dotted:点状块

                dashed:虚线

                double:定义双线

        style也可以粉笔指定4个边框样式,规定和width一致,同时他也提供了border-xxx-style分别设置4个边框的样式。

border

        边框的简写样式;他可以同事设置4个边框的样式,宽度,颜色

        并且他没有任何的树勋要求;border指定则是同事指定4个边框,不能分别指定4个边

        同时,也提供了boder-top、boder-right、boder-bottom、boder-left

外边距

外边距:他指的是当前的盒子与其他的盒子之间的距离(盒子与盒子见得距离)

他不会影响我们可见框的大小,只会影响盒子的位置

盒子有4个方向的外边距:

margin-top:        上外边距,盒子上边框和其他盒子的距离

margin-right:        右外边距,盒子右边框和其他盒子的距离

margin-bottom:        下外边距,盒子下边框和其他盒子的距离

margin-left:                左外边距,盒子左边框和其他盒子的距离

由于页面中的元素全部都是靠左靠上去摆放的。因此设置外边距会影响到自身或者其他盒子的位置问题:

设置上或者左外边距的时候,会影响盒子自身的位置发生变化;

设置下或者右外边距的时候,会影响其他盒子的位置发生变化

负值

外边距他其实是可以设置一个负值的,如果外边距设置的是负值,那么他会向相反的方向移动      

auto

margin他还可以设置auto,其一般只会设置水平方向的margin。

如果仅仅指定左或者右外边距的margin为auto属性,则会将我们盒子的外边距设置为最大值

如果左右都设置了auto属性,则外边距会设置相同的值,则就相当于在父元素中居中显示。

垂直方向外边距设置为auto,则相当于设置了0。

简写属性

外边距同样可以使用简写属性:magrin,并且也可以同时设置4个方向的外边距,规则和padding一样,都是顺时针设置的——上 右 下 左

垂直外边距的重叠

在网页中垂直方向的相邻外边距会发生外边距重叠

从上面这段话,我们可以看出来,垂直外边距构成的条件有两个,分别是:

1、垂直的外边距;2相邻的

垂直外边距重叠:指的是兄弟元素之间的相邻外边距会取最大值而不是取和

如果父子元素的垂直边距相邻,给子外边距设置了的属性会传递到父元素身上,就相当于设置给了父元素

浏览器默认设置

浏览器为了在没有样式的时候,有个比较美观的显示,会有一个默认的样式。

都会设置默认的margin和padding,然而他的默认样式,我们一般不会使用,所以我们在编写样式之前,需要将浏览器中的默认样式全部去掉。

所以我们一般会使用通配选择器清除默认样式

*{

        margin:0;

        padding:0;

}

内联元素的盒子

内联元素不能设置width和height属性

内联元素可以设置水平方向的内边距(影响布局)、垂直方向内边距(但是不会影响页面的布局)

内联元素可以设边框属性,水平方向边框影响布局、垂直方向边框不会影响页面布局

内联元素可以设置水平方向的外边距

        (1、不会重叠,会求和。2、影响布局)

内联元素不支持设置垂直外边距

好了,关于盒子模型就先了解到这里!

欢迎大家点击下方卡片,关注《coder练习生》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/13528.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

常见的四种排名函数的用法(sql)

四个排名函数: 1.row_number 2.rank 3.dense_rank 4.ntile 1. ROW_NUMBER(排名场景推荐) 1.1 介绍 在 SQL 中,ROW_NUMBER() 是一个窗口函数,它为结果集中的每一行分配一个唯一的序号。该函数的语法如下: …

内网穿透实现在外远程连接RabbitMQ服务

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 转载自远控源码文章:无公网IP&#xff…

srm采购管理系统有那些功能

srm采购管理系统,是通过系统的手段对采购过程进行管理和控制,实现降低成本、提高效益、提高企业核心竞争力的目的。那么 srm采购管理系统有哪些功能呢? 计划管理 srm采购管理系统提供了各种物料需求计划的功能,以帮助企业制定并控…

设置环境变量

文章目录 window设置linux设置python设置 window设置 命令行设置 set 临时设置setx 永久设置 # 打开一个cmd命令行 set # 查看所有环境变量 set FLASK_APPsuperset # 临时设置,当前窗口有效 set FLASK_APP%FLASK_APP%;777 # # 查看 echo %FLASK_APP%# 永久设置…

k8s安装部署apollo配置中心

一、文章大纲 二、安装MySQL5.7 三、创建apollo-config 四、创建apollo-admin 五、创建apollo-portal 六、查看apollo各个组件服务状态 七、访问apollo 八、nginx代理配置转发#注意 一定要先启动apollo-config,再启动apollo-admin,最后启动apollo-porta…

matrix部署

一、环境描述 首先matrix是一个去中心化的聊天服务,matrix实现了端对端的加密,这意味着不仅其他人无法查看你的聊天内容,哪怕你更换了一个终端,你也需要私钥才能够查看你的聊天记录。 这是终极的隐私保护方案,因为一旦…

深入理解机器学习——过拟合(Overfitting)与欠拟合(Underfitting)

分类目录:《深入理解深度学习》总目录 机器学习的主要挑战是我们的算法必须能够在先前未观测的新输入上表现良好,而不只是在训练集上表现良好。在先前未观测到的输入上表现良好的能力被称为泛化(Generalization)。通常情况下&…

20、单元测试

文章目录 1、JUnit5 的变化2、JUnit5常用注解3、断言(assertions)1、简单断言2、数组断言3、组合断言4、异常断言5、超时断言6、快速失败 4、前置条件(assumptions)5、嵌套测试6、参数化测试7、迁移指南 【尚硅谷】SpringBoot2零基…

医院体检PEIS系统源码

一、医院体检系统概述 1. 医院体检系统概述 目前,大多数的体检还停留在手工操作上,如单位体检时手工书写体检人员信息、医生手工书写体检结果、检验报告打印后进行手工粘贴等,这样造成极大的工作量,效率低下,而且极易…

OpenCV 安卓编程示例:1~6 全

原文:OpenCV Android Programming By Example 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 计算机视觉 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 当别人说你没有底线的时候,…

npm和yarn的相同点和不同点

官网 npmhttps://www.npmjs.com Home | Yarn - Package ManagerFast, reliable, and secure dependency management.https://yarnpkg.com Fast, disk space efficient package manager | pnpmFast, disk space efficient package managerhttps://pnpm.io 使用场景 npm&#x…

发布会前准备新闻通稿的重要性,为什么媒体不会原稿发布报道?

传媒如春雨,润物细无声,大家好,我是51媒体 胡老师。 最近有宣传的小伙伴问胡老师,为什么我们精心准备的新闻通稿,媒体没有按照稿子发布呢?今天就与大家交流下这方面的经验。 一,发布会前准备新…

4月20日第壹简报,星期四,农历三月初一,谷雨

4月20日第壹简报,星期四,农历三月初一,谷雨坚持阅读,静待花开1. 已致29人死亡,26人为患者!北京长峰医院火灾事故因院内施工作业火花引发,院长王某玲等12人被刑拘。2. 海南发布旅游产品参考价格&…

教你轻松申请Azure OpenAI

Azure OpenAI 和 OpenAI 官方提供的服务基本是一致的,但是目前前者还是处于预览版的状态,一些功能还没有完全开放。 优点: 不受地域限制,国内可以直接调用。可以自己上传训练数据进行训练(据说很贵)。Azu…

低代码开发重要工具:jvs-logic(逻辑引擎)可视化设计要素

逻辑引擎可视化的交互 可视化的服务编排是逻辑引擎的核心功能,逻辑引擎的界面可视化设计是为了方便用户使用和操作逻辑引擎而设计的。一个好的界面设计能够提高用户的工作效率和使用体验,同时也能增加软件的可靠性和可维护性。 以下是逻辑引擎界面可视化…

【Linux初阶】进程的相关概念 | 进程管理 查看进程 获取进程标识符 fork进程创建

🌟hello,各位读者大大们你们好呀🌟 🍭🍭系列专栏:【Linux初阶】 ✒️✒️本篇内容:进程的概念,进程管理初识(描述、管理进程),查看进程的基础方法…

K_A33_001 基于STM32等单片机驱动RC522射频卡 读写IC卡 串口显示

K_A33_001 基于STM32等单片机驱动RC522射频卡 读写IC卡 串口显示 所有资源导航一、资源说明二、基本参数参数引脚说明 三、驱动说明时序:对应程序: 四、部分代码说明1、接线引脚定义1.1、STC89C52RCRC522射频模块1.2、STM32F103C8T6RC522射频模块 五、基础知识学习与相关资料下…

使用chatgpt实现微信聊天小程序(秒回复),github开源(附带链接)

文章目录 前言效果展示原理说明服务器端代码说明微信小程序代码说明代码链接总结 前言 我在前一段时间突发奇想,就使用java来调用chatgpt的接口,然后写了一个简单小程序,也上了热榜第一,java调用chatgpt接口,实现专属…

nodejs+vue 智能餐厅菜品厨位分配管理系统

系统功能主要介绍以下几点: 本智能餐厅管理系统主要包括三大功能模块,即用户功能模块和管理员功能模块、厨房功能模块。 (1)管理员模块:系统中的核心用户是管理员,管理员登录后,通过管理员功能来…

基于matlab使用 CSI-RS 的 NR 下行链路发射端波束细化

一、前言 此示例演示了使用 5G 工具箱中的信道状态信息参考信号 (CSI-RS) 的下行链路发射端波束细化过程。该示例展示了如何在散射环境中向不同方向传输多个CSI-RS资源,以及如何根据参考信号接收功率(RSRP)测量结果选择…