CSS盒子属性 边距 内边距：padding 外边距：margin 让盒子水平居中： margin: 0 auto; 父元素与子元素外边距合并 添加overflow:hidden属性 <title>嵌套块元素坍塌</title> <style> .father { margin: 30px; background-color: black;
盒子模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。 盒子模型分为： margin（外间距）：边界外的区域。外边距是透明的。 border（边框）：
1、给父元素设置外边框（border）或者内边距（padding）(不建议) 2、触发BFC（推荐） 子元素或者父元素的float不为none 子元素或者父元素的position不为relative或static 父元素的overflow为auto或scroll或hidden 父元素的display的值为table-cell或inline-block .father::before{
有时会出现子元素和父元素共享外边距的情况，如下图，父元素并没有设置上外边距，但是随着子元素一起移动了 解决方法有多种，例如： 开启绝对定位； 给父元素设置overflow：hidden； 给父元素设置内边距； 给父元素设置边框；
padding:内边距 margin：外边距用法
外边距盒子水平居中 在父元素中居中：上下0px；左右auto； 必须满足两个条件： 1 必须是块元素； 2 盒子制定了宽度； 因为块元素的宽度默认是父元素的100% auto 左右外边距平分父元素宽度空间 方法： 只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 auto;
CSS 盒子模型（一） 本人在校学生，主学后端，后来发现前端的基础都忘得差不多了才想着写文章回来复习！欢迎留言交流。 什么是盒子呢？ 拿下举例，我们可以把每个红框都比作一个盒子，他们可以是任意的 HTML 元素。 盒子模型 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
问题 子元素设置内边距或外边距时，子元素宽度+内边距+外边距要小于父元素的宽度或高度，否则就超出父元素的范围。 <div class="parent-box"> <div class="child-box"></div> </div> .parent-box { width: 200px; height: 200px; background-color: #C4A0CC; /* 粉色 */ } .chi
margin 相关技巧 margin:x auto;设置元素水平居中 margin负值让元素位移及边框合并 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css">
当块级元素垂直布局时，上下的外边距会被合并掉。 合并遵从的规则是取最大值。 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&quo
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>春雨-陈敏芳</title> <style type="text/css"> .box{ border: 3px #0099FF solid;/*设置边框粗细，颜色和类型*/ padding: 10px/*设置内边距*/ margin: 10px;/*设置外边距*
<template> <div id="energyEcharts" style="width: 100%; height: 100%;"></div> </template> <script> export default { data() { return { } }, mounted() { this.myecharts(); this.W
css第03天 一、css三大特性 1、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2、继承性 CSS中的继承:
垂直的外边距重叠（折叠） 相邻的垂直方向外边距会发生重叠现象 父子元素重叠 父子元素间相邻的外边距，子元素会传递给父元素(上外边距) 父子外边距的折叠会影响到页面的布局，必须要进行处理 如上图绿色的div被包在蓝色div里，但是用外边距给绿色的div设
外边距 跟内边距不一样，外边距是挪动位置 margin和padding使用方法是一样的 上右下左 一共有四个方向的外边距： margin-top 上外边距，设置一个正数，元素就会从上往下移动，如果设置为负数就会从下往上移动 margin-
1 盒子模型深入讲解 1.1 盒子模型的组成 ① 盒子模型的相关概念 1. 每个元素都可以比作成一个盒子，页面布局就是盒子的排列和堆砌 2. 盒子模研究的概念： 内容、内边距、边框、外边距 内容（content）： 内容区域是元素中最主要的区域，元素中的文本内容以及后代元素都显示在内容区域。 内边
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 对于两个嵌套关系
学习内容来源：CSS 框模型 CSS 框模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。 如图所示： 内容 - 框的内容，其中显示文本和图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
两个嵌套关系的块元素，子元素的margin-top作用在父元素上。 解决方法：给父元素设置overflow：hidden
问题一：外边距合并 <title>外边距合并-相邻块级元素垂直外边距合并</title> <style> .damao, .ermao { width: 200px; height: 200px; background-color: pink; } .damao { margin-bottom: 100px;
新年快乐！ 一、元素的水平方向的布局 元素在其父元素水平方向的位置由以下几个属性共同决定 margin-left border-left
1.盒子模型 页面布局要学习三大核心，盒子模型，浮动，定位。学好盒子模型能非常好的帮助我们布局页面。 1.1看透网页布局的本质 网页布局过程 1.先准备好相关的网页元素，网页元素基本都是盒子BOX 2.利用CSS设置好盒子样式，然后摆放到相应位置 3.往盒子里面装内容 网页布局的核心本质：就
