前端CSS基础8(盒子模型(margin、border、padding、content))

2024-04-23 22:44

本文主要是介绍前端CSS基础8(盒子模型(margin、border、padding、content)),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端CSS基础8(盒子模型(margin、border、padding、content))

  • CSS盒子模型
    • CSS中常用的长度单位
    • 元素的分类,各个元素的显示模式
    • 修改元素的显示模式(类型)
    • 盒子模型的组成部分
    • 盒子内容区-content
    • CSS盒子的默认宽度
    • 盒子的内边距-padding
    • 盒子边框-border
    • 盒子外边距-margin
  • 处理内容溢出
  • CSS中隐藏元素的两种常见方式
  • CSS样式的继承

CSS盒子模型

CSS中常用的长度单位

在 CSS 中,常用的长度单位包括:

  • 像素(px):最常用的长度单位,通常指定固定大小。
.example {width: 200px;
}
  • 百分比(%):相对于父元素的百分比值。
.example {width: 50%;
}
  • EM(em):相对于元素自身字体大小的倍数。相当于当前元素font-size的倍数
.example {font-size: 50px;width:10em;height:10em;
}
  • REM(rem):相对于根元素(html)的字体大小的倍数。
.example {padding: 2rem;
}

元素的分类,各个元素的显示模式

  • 行内元素:不独占一行,不能通过CSS设置宽高。
  • 块级元素:独占一行,可以通过CSS设置宽高。
  • 行内块元素:不独占一行,但是可以通过CSS设置宽高。

在这里插入图片描述

修改元素的显示模式(类型)

想要修改元素的显示模式,需要用到display属性来修改。
display可以取以下值,分别代表的意义如下表:

描述
nono元素会被隐藏
block元素将作为块级元素显示
inline元素将作为内联元素显示
inline-block元素将作为行内块元素显示

盒子模型的组成部分

CSS会把所有的HTML元素都看成一个盒子,所有的样式也都是基于这个盒子。
margin(外边距):盒子与外界的距离
border(边框):盒子的边框
padding(内边距):紧贴内容的补白区域,留白
content(内容):元素中的文本或者后代元素都是它的内容
如图:
在这里插入图片描述
注意:自设置高度和宽度时margin不会影响盒子的大小,但会影响盒子的位置。

盒子内容区-content

CSS属性功能属性值
width设置内容区域宽度长度
height设置内容区域高度长度
max-width设置内容区域最大宽度长度
max-height设置内容区域最大高度长度
min-width设置内容区域最小宽度长度
min-height设置内容区域最小高度长度

CSS盒子的默认宽度

默认宽度就是不设置width属性时,元素所呈现出来的宽度(此时margin参与影响盒子的大小)
总宽度=父的content-自身的左右margin
内容的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding

盒子的内边距-padding

CSS属性名功能属性值
padding-top上内边距长度
padding-right右内边距长度
padding-bottom下内边距长度
padding-left左内边距长度
padding复合属性长度,可设置1~4个值
  padding: 10px ; /*四个方向都为10像素的内边距 */padding: 10px 20px ; /* 上下,左右分别为10、10、20、20像素的内边距 */padding: 10px 20px 15px; /* 上、左右、下分别为10、20、20、15像素的内边距 */padding: 10px 20px 15px 25px; /* 上右下左分别为10、20、15、25像素的内边距 */

注意:行内元素的左右内边距可以设置,上下不可以
块级元素和行内块元素上下左右都可以设置。

盒子边框-border

属性名功能属性值
border-style边框线风格
复合了四个方向的边框风格
none:默认值
solid:实线
dashed:虚线
dotted:点线
double:双实线
border-width边框线宽度
复合了四个方向的边框宽度
长度,默认3px
border-color边框颜色
复合了四个方向的边框颜色
颜色,默认黑色
border复合属性值没有顺序和数量要求
border-left
border-left-style
border-left-width
border-left-color

border-right
border-right-style
border-right-width
border-right-color

border-top
border-top-style
border-top-width
border-top-color

border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
分别设置各个方向的边框同上
border-radius用于设置元素的边框圆角长度值
(px,%,em等)
指定圆角的半径

盒子外边距-margin

CSS属性值功能属性值
margin-left左外边距CSS中的长度值
margin-right右外边距CSS中的长度值
margin-top上外边距CSS中的长度值
margin-bottom下外边距CSS中的长度值
margin复合属性,可以写1~4个值,规律同padding(顺时针)CSS中的长度值

margin注意事项

  • 子元素的margin,是参考父元素的content计算的。(因为是父亲的 content中承装着子元素)(也就是盒子套盒子,父亲也是一个盒子,父盒子套着子盒子)
    在这里插入图片描述
  • 上margin、左margin :影响自己的位置;(盒子左上角)
  • 下margin、 右margin :影响后面兄弟元素的位置。(盒子右下角)
  • 块级元素、行内块元素,均可以完美地设置四个方向的margin ;但行内元素,左右margin可以完美设置,上下 margin设置无效。
  • margin的值也可以是auto,如果给一个 块级元素设置左右margin 都为auto,该块级元素会在父元素中水平居中。
  • margin的值可以是负值。
    在这里插入图片描述
    CSS中什么是margin塌陷,如何解决
    Margin 塌陷第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上。

解决Margin 塌陷的方法包括:

  • 父元素添加内边距(padding)或边框(border):通过为父元素添加内边距或边框,可以防止子元素的外边距与父元素的外边距发生合并。给父元素设置宽度不为0的padding或者border。
  • 使用浮动或定位:浮动(float)或定位(positioning)可以阻止外边距合并。
  • 使用inline-block替代block:对于行内块元素(inline-block),外边距不会合并。
  • 清除浮动:清除浮动也可以避免外边距塌陷的问题。
  • 使用CSS属性overflow: hidden;:在父元素中添加此属性可以触发BFC(块级格式化上下文),从而避免外边距合并。

CSS中什么是margin合并,如何解决
margin合并:上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大值而不是相加
解决margin合并的方法
无需解决,在布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。

处理内容溢出

CSS属性值功能属性值
overflow溢出内容的处理方式visible:显示,默认值
hidden:隐藏
scroll:显示滚动条,不论内容是否溢出
auto:自动显示滚动条,内容不溢出不显示
overflow-x水平方向溢出内容的处理方式同上
overflow-y垂直方向溢出内容的处理方式同上

CSS中隐藏元素的两种常见方式

CSS中隐藏元素的两种常见方式是使用display属性和visibility属性。

使用display: none;: 这种方式会完全从文档流中移除元素,并且不会给它留下任何空间。元素将不可见且不可点击。

.hidden-element {display: none;
}

使用visibility: hidden;: 这种方式会使元素不可见,但仍然会保留其在文档流中的位置,即元素所占据的空间不会消失,只是内容不可见。

.element {visibility: hidden;
}

CSS样式的继承

在 CSS 中,样式的继承是指子元素会继承父元素的某些样式属性。不是所有样式都可以被继承,只有一部分特定的属性才会被子元素继承。通常文本相关的样式属性比如颜色、字体大小等会被子元素继承,而布局相关的属性一般不会被继承。

这篇关于前端CSS基础8(盒子模型(margin、border、padding、content))的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

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

零基础学习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)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}