一、清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。

<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。

<a> 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text-decoration。

清除默认加粗效果：设置font-weight。

1.示例：我们没有添加默认样式清除的运行结果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>
</head>
<body><div class="box">这是一个div元素</div><h1>这是一个一级标题</h1><p>这是一个段落标签</p><ul><li>这是列表一</li><li>这是列表二</li><li>这是列表三</li></ul>
</body>
</html>

2.示例：我们添加默认样式清除的运行结果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>ul li {list-style: none;/* list-style-type: none;这两种写法都可以去除列表标记*/}body,div,h1,p,ul,li {margin: 0;padding: 0;}</style>
</head>
<body><div class="box">这是一个div元素</div><h1>这是一个一级标题</h1><p>这是一个段落标签</p><ul><li>这是列表一</li><li>这是列表二</li><li>这是列表三</li></ul>
</body>
</html>

3.默认情况下超级链接<a>标签没有下划线，我们可以清除默认下划线样式，以及颜色。

<style>a {text-decoration: none;color: #666;}</style>

4.默认情况下标题标签，b标签，strong标签的默认字体样式是正常不加粗。

<style>h1,h2,h3,h4,h5,h6,b,strong {font-style: normal;}
</style>

5.还可以给 <body> 标签设置整体文字样式，让大部分后代标签的选择器，比如class选择器，id选择器，都可以全部去继承叠代。

<style>body {color: #666;font-size: 14px;font-family:"Arial","consolas","Microsoft Yahei","SimSun";}
</style>

二、高度 height 应用

根据不同的需求，高度属性可以设置也可以不设置。不设置是自适应高度auto

如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。

如果不设置高度：会根据标签内部内容高度自动撑开。

以 <div> 标签为例，根据情况不同选择是否设置高度：

1.必须设置高度

UI设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域。

2.overflow 属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

3.必须不设置高度

要求盒子高度必须自适应内部内容的高度。或者设置height的属性值是自动的。

三、居中

在网页中经常见到元素或者文字居中的效果。

1.文本水平居中

水平居中：text-align属性。不论单行或多行都可以设置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>div {width: 200px;height: 200px;border: 1px solid #f00;text-align: center;}</style>
</head>
<body><div>这是一个div元素</div>
</body>
</html>

2.文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>div {width: 200px;height: 200px;line-height: 200px;border: 1px solid #f00;text-align: center;  }</style>
</head>
<body><div>这是一个div元素</div>
</body>
</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=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>div {width: 200px;padding: 30px 0;border: 1px solid #f00;text-align: center;  }</style>
</head>
<body><div>这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素</div>
</body>
</html>

3.元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>div {width: 200px;height: auto;padding: 10px 0;border: 1px solid #f00;}</style>
</head>
<body><div><p>我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素</p></div>
</body>
</html>

4.元素水平居中

针对类似 <div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css盒子模型扩展</title>   <style>div {width: 200px;height: 200px;background-color: #f00;}div>p {width: 50px;height: 200px;background-color: #0f0;margin: 0 auto;}</style>
</head>
<body><div><p></p></div>
</body>
</html>

5.margin塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

1.同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。

2.父子元素塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

3.解决 margin 塌陷问题的方法

①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。

另外注意：水平方向的 margin 没有塌陷现象。

（10）CSS 常用样式--盒模型扩展应用相关推荐

（9）css常用样式--盒子模型
一.CSS盒子模型介绍盒子模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin. ...
1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box).CSS 决定 ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
Day-1 HTML基本标签和CSS常用样式
实训打卡第一天,学的不错,淦-----哈哈哈 HTML基本标签基本标签:前端页面超链接的使用:字体的颜色和字体的大小.形式:还有就是页面图片.音频和视频的导入. <!DOCTYPE html& ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...

（10）CSS 常用样式--盒模型扩展应用