首页 > 其他分享 >CSS 入门 - Box Model 盒模型

CSS 入门 - Box Model 盒模型

时间:2023-09-26 22:33:23浏览次数:44  
标签:Box 边框 padding inline Model margin CSS

CSS 入门 - Box Model 盒模型

网页布局:先学习 Box Model,然后 Flexbox/Grid/Float 三选一即可搞定网页布局,推荐 Flexbox!

BOX Model

四大属性:Content、Padding、Border、Margin

  • Content:内容
  • Border:边框线
  • padding:内容与边框的距离
  • margin:边框与其他元素的距离

margin 与 padding 的区别

除了 padding 在边框内,margin 在边框外:

  • padding 部分有背景颜色,margin 无背景颜色
  • 如果元素可点击(如超链接),padding 部分可点击,而 margin 部分不可点击
  • 相邻 margin 会合并(margin collapse)

设置值格式

  • padding/margin: 10px; 上下左右
  • padding/margin: 10px 20px; 上下,左右
  • padding/margin: 10px 20px 30px; 上,左右,下
  • padding/margin: 10px 20px 30px 40px; 逆时针:上,右,下,左
  • padding/margin-top/left/right/bottom 单独指定某一边

inline

以上针对 block 元素。对于 inline 元素(如 strong),margin 只影响左右,对上下不起作用;padding 影响左右,上下虽然有效果(如背景颜色、边框),但不影响垂直方向布局。改成 display:inline-block; 即可符合预期(行为类似 block)。

总结:inline 不影响垂直方向的版面布局!

居中对齐

  • 对于 inline 元素:复用父元素的 text-align:center
  • 对于 block 元素:如果宽度小于 100%,margin-left 和 margin-right 设为 auto 即可

Box-sizing

默认值:content-box,width、height 设置的是 content;而设为 border-box 时,width、height 包含了 padding 及 border 的宽度

Reference

https://www.bilibili.com/video/BV1WA411h7Y1/

标签:Box,边框,padding,inline,Model,margin,CSS
From: https://www.cnblogs.com/tengzijian/p/17731343.html

相关文章

  • 网安工具 | Windows便携式渗透测试环境PentestBox入门到进阶使用指南
    [点击......
  • 前端显示数据库中的换行文本:HTML和CSS解决方案
    在项目中经常会出现要显示数据库中的大段文本内容,如说明或备注等信息,当其中存储有换行符的时候,前端通常会忽略这个换行,直接在一行显示,那么怎么解决呢?解决方案一:使用HTML<br>标签HTML的<br>标签是一种简单而直观的方法,它可以将文本中的换行符正确地呈现在浏览器中。示例代码......
  • [WPF] 随笔1:MVVM在ViewModel更新Image控件的BitmapImage值时报:必须在与 DependencyObj
    MVVM在ViewModel更新Image控件的BitmapImage值时报:必须在与DependencyObject相同的线程上创建DependencySource原因:必须在UI线程创建BitmapImage=>链接解决方案:使用MemoryStream加载图片,并在UI线程转换成BitmapImage=>链接接下来是我的写法Tip:我用的是MVVMLightViewM......
  • 实现不同屏幕自适应【postcss-px-to-viewport】
    效果图未转换前:转换后:背景平常开发的时候使用px作为样式单位,但是在不同的屏幕尺寸下不能自适应,我们希望项目中所有使用到的px单位都转换成vw单位使用步骤安装npmipostcss-px-to-viewport-D在项目根目录下创建postcss.config.jsmodule.exports={plugins:{......
  • VituaBox虚拟机安装Ubuntu
    下载虚拟机和Ubuntu1.分别在官网下载所需软件与镜像文件(注意要与自己的系统相匹配)在虚拟机安装Ubuntu1.打开VituaBox,选择新建2.自己设置虚拟电脑名称,选择存储位置3.虚拟机内存大小,CPU核心数以及硬盘大小自己看着设计4.选择打开建好的系统随着步骤开始安装,并设置密码用......
  • 设置ubuntu server 在 virtual box下的分别率
     首先进入virtualbox的ubuntuserver虚拟机,然后通过下面的命令重启系统shutdown-rnow在启动过程中按shift进入GRUB选择菜单,点击c进入命令行, 输入vbeinfo显示可用的分辨率,并记录下来 ......
  • 基于CSS实现回到页面顶部的几种写法(从实现到增强)
    前面整理了一个JS实现回到顶部的功能,但没有给出具体的界面样式,这次从网上找几个好看的参考,自己动手也实现一下,后续打算结合这两篇文章,根据JS和CSS使用油猴来实现一下。效果图如下: 代码如下:<!DOCTYPEhtml><htmllang="cn"><head><metacharset="UTF-8"><title>......
  • vscode vue 插件与 emmet、tailwind css 插件冲突的解决方案
    今天使用vscode开发nuxt3项目,发现在vue文件中,emmet提示功能不可用。emmet提示功能,如下图所示:百度、google一阵子,发现是个全球性存在的问题,是vue插件volar导致的vscode自带的emmet提示功能不可用。如果在vscode中不安装vue插件,那么想要在vue文件中启用emmet......
  • Black-Box Attack-Based Security Evaluation Framework forCredit Card Fraud Detect
    Black-BoxAttack-BasedSecurityEvaluationFrameworkforCreditCardFraudDetectionModels动机AI模型容易受到对抗性攻击(对样本添加精心设计的扰动生成对抗性示例)现有的对抗性攻击可以分为白盒攻击和黑盒攻击。白盒攻击:攻击者可以访问有关目标模型的所有信息,包括训练集......
  • Qt之QMessageBox的用法
    一、QMessageBox::informationQMessageBox::information 用于创建一个信息对话框,通常用于向用户显示一些重要的信息或通知。这个函数的用法很简单,它接受几个参数来配置对话框的内容和行为,并且通常以模态方式显示对话框,阻塞程序的执行,直到用户关闭对话框。QMessageBox::informa......