web前端---------盒子模型2

简介: web前端---------盒子模型2

一------内边距

padding 属性用来设置元素的内边距长度,元素在默认情况下没有内边距,其值为none

(1)当 padding 属性中仅含一个值时,该长度应用在上、下、左、右四个区域。

(2)当 padding 属性中含两个值时,第一个值上、下区域的长度,第二个值左、右区域的长度。

(3)当 padding 属性中含三个值时:第一个值顶部的长度;第二个值左、右长度;第三个值底部的长度。

(4)通过 padding 属性,分别为内边距的上、右、下、左设置长度

(1)默认,box-sizing 的属性值为content-box。

此时,width、height属性的值决定盒子中内容区的大小。

元素在网页中显示的宽度为:内容区的宽度+内边距的左右宽度+边框的左右宽度。

(2)

box-sizing 的属性值为border-box时,width、height属性同时控制边框、内边距、内容区的长度。

在实际开发时,开发者通常会将整个网页的尺寸规则设置为border-box,因为该模式更容易控制元素的大小。

二-----------外边距

外边距的设置顺序也是上,右,下,左;多了一个可以使用auto来让浏览器自动设置;

相关文章
|
5天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
5天前
|
前端开发
|
5天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
5天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`<li>`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
|
5天前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分,包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距,并解释了尺寸计算方法和版心居中的技巧。内容丰富,示例清晰,有助于理解盒子模型在网页布局中的应用。
|
5天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
16天前
|
数据库 开发者 Python
web应用开发
【9月更文挑战第1天】web应用开发
33 1
|
4天前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
24 8
只需四步,轻松开发三维模型Web应用
|
13天前
|
数据采集 Java 数据挖掘
Java IO异常处理:在Web爬虫开发中的实践
Java IO异常处理:在Web爬虫开发中的实践