盒子模型（二）

最新推荐文章于 2024-07-26 08:00:00 发布

SY_0410

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量81

点赞数

分类专栏： WEB前端基础HTML+CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53912712/article/details/125490286

版权

WEB前端基础HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

盒子模型（二）

外边距的折叠

垂直外边距的重叠：相邻的垂直方向外边距会发生重叠现象。

兄弟元素：两者都是正值，兄弟元素间的相邻垂直外边距会取两者之间的较大者。如果一正一负，则取两者的和。如果两个都是负值，两者的值取绝对值较大的。

例如：

请添加图片描述

父子元素：父子元素间的相邻边距，子元素的会传递给父元素（上外边距）父子外边距的折叠会影响到页面的布局，必须要进行处理

处理方法：
将父元素的高度减少，保证减少后的父元素高度+padding-top=原父元素高度

例如：
请添加图片描述

解析：原父元素box1中height为200px，修改为100px之后，加上内边距的上部100px等于原来的父元素高度。

行内元素的盒模型

行内元素的盒模型

行内元素不支持设置宽度（width）和高度（height）
行内元素可以设置padding、border、margin，但是垂直方向的padding、border、margin不会影响页面的布局

display属性：用来设置元素显示的类型
可选值

inline：将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为行内块元素
table：将元素设置为一个表格
none：元素不在页面中显示

行内块元素特点：即可以设置宽度和高度，并且不会独占一行

visibility：设置元素的显示状态
可选值：

visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置

例如：
请添加图片描述

浏览器的默认样式

默认样式：通常情况，浏览器都会为元素设置一些默认样式。
默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式。（pc端的页面）

例如：

请添加图片描述

方法一：
最简单的做法就是通配
*{
margin:0;
padding:0;
}

方法二：在<head>中通过link方式引入reset.css

<link rel="stylesheet" href="./reset.css">

其中reset.css代码如下：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}