HTML笔记6

CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式，如文本颜色和字号

• 恰当的使用继承可以简化代码，降低CSS样式的复杂性
• 子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性）

行高的继承性

body {
	font:12px/1.5 Microsoft YaHei
}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有行高，则会继承父元素的行高为1.5
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body行高1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重如下表所示：

使用!important时，将其加入需要提升权重的样式之后即可

注意：

1. 权重是由4组数字组成，但是不会有进位
2. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
3. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

CSS权重的叠加

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

盒子模型

盒子模型组成

所谓盒子模型：就是把HTML页面中的布局看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

边框

border可以设置元素的边框，边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

border: border-width||border-style||border-colkor

简写语法：

border: 1px solid red;

没有顺序

合并相邻单元格边框

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法：

border-collapse: collapse;

• collapse是合并的意思
• border-collapse:collapse;表示相邻边框合并在一起
• 边框会影响盒子的实际大小

内边距

padding属性用于设置内边距，即边框与内容之间的距离

语法

• padding会影响盒子的实际大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

margin简写方式代表的意义与padding完全一致

外边距典型应用-块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

.header {
	width:960px;
	margin:0;
	auto;
}

常见的写法，以下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距

语法：

* {
	padding: 0;
	margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置

圆角边框

语法：

border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

语法：

text-shadow: h-shadow v-shadow blur color;

传统网页布局三种方式

CSS提供了三种传统布局方式：

• 普通流（标准流）
• 浮动
• 定位

标准流

所谓的标准流：就是标签按照规定好默认方式排列

1. 块级元素会独占一行，从上向下顺序排列

   • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

   • 常用元素：span、a、i、em等

浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式

浮动最典型的应用：可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘初级包含块或另一个浮动框的边缘

语法：

选择器 {float: 属性值;}

浮动特性

加了浮动之后的元素会有很多特性：

1. 浮动元素会脱离标准流（脱标）
   • 浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
   • 在一行显示的盒子，每个盒子都要设置浮动属性
   • 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3. 浮动的元素会具有行内块元素的特性
   • 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
   • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定
   • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
   • 行内元素同理

浮动元素和标准流父级搭配使用方法

为了约束元素浮动位置，网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则

注意点

1. 浮动和标准流的父盒子搭配

   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

   浮动的盒子指挥影响浮动盒子后面的标准流，不会影响前面的标准流

常见网页布局

清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版造成影响
• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器 {clear:属性值;}

实际工作中使用claer:both;

清除浮动的方法

1. 额外标签法，也成为隔墙法，是W3C推荐的做法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签，例如

，或者其他标签

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素

• 清除浮动的本质是清除浮动脱离标准流造成的影响
• 清除浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto、或scroll

:after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加

语法：

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {  /*IE6、7专有*/
	*zoom: 1;
}

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器

双伪元素清除浮动

也是给父元素添加属性

语法：

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

• 优点：代码更简洁
• 缺点：照顾低版本浏览器

CSS书写顺序

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

1. 必须确定页面的版心（可视区），我们测量可得知
2. 分析页面中的行模块，以及每个行模块中的列模块（页面布局第一准则）
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）
4. 制作HTML结构，遵循先有结构，后有样式的原则