01-HTML+CSS

学习目标

1、背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	x和y坐标
background-attachment	背景附着	fixed(背景固定)
背景简写	书写更简单	背景颜色,背景图片地址,背景平铺,背景滚动,背景位置
背景色半透明	背景颜色半透明	background:rgba-(0,0,0,0.3);后面必须是4个值

2、CSS的三大特性

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

2.1层叠性

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

层叠性原则：

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

1.2继承性

CSS中的继承：子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是：子承父业

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性

• 子元素可以继承父元素的样式( text- ,font- , line- 这些元素的开头可以继承,以及color属性)

• 继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高的继承性

body {
    font:12px/1.5 Microsoft YaHei;
}

• 如果子元素没有设置行高，则会继承父元素的行高为1.5
• 此时子元素的行高是：当前元素文字大小 * 1.5
• body行高 1.5 这样最大的又是就是里面子元素可以根据自己文字大小自动调整行高

2.3优先级

选择器	选择器权重
继承 或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important 重要的	无穷大

如果盒子里的图片大于盒子宽高,那么设置图片的宽为100%

3、外边距合并

3.1、相邻元素追至外边距的合并

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

解决方案：尽量只给一个盒子添加margin值。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2、外边距合并

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

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

解决方案：

①、可以为父元素定义上边框
②、可以为外父元素定义上内边距
③、可以为父元素添加 overflow:hidden。

4、圆角边框

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角

语法：

border-radius:length;

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

5、盒子阴影&文字阴影

1、在CSS3中,新增了盒子阴影,这样我们的盒子就可以添加阴影。

语法：

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

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。阴影的尺寸,虚影
color	可选。阴影的颜色
inset	可选。将外部阴影改为内部阴影,不常用!

注意：

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

2、在CSS3中,我们可以使用text-shadow属性应用于文本。

语法：

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

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离。
color	可选。阴影的颜色

6、浮动的特性

设置浮动( float )的元素重要特性：

1、脱离标准普通的控制( 浮 ) 移动到指定位置 (动),（俗称脱标）
2、浮动的盒子不再保存原先的位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3、浮动的元素具有行内块元素特性

任何元素都可以浮动。不管元素是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

• 如果块级盒子没有设置宽度,默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定
• 浮动的盒子中间没有缝隙，是紧挨着一起的

4、浮动布局注意事项

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

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

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

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

7、清除浮动

1.为什么需要清除浮动？

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

2.清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

3.清除浮动方法

1、额外标签法也称为隔墙法，W3C推荐的做法
2、父级添加 overflow 属性
3、父级添加 alter 为元素
4、父级添加双为元素

4.为什么需要清除浮动？

① 父级没高度
② 子盒子浮动了
③ 影响下面副局了,我们就应该清除浮动

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签,结构化化较差
父级overflow:hidden;	书写简单	移除隐藏
父级afte伪元素	结构化语义正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构化语义正确	由于IE6-7不支持:after，兼容性问题

8、CSS属性书写顺序

建议遵循以下顺序：

1、布局定位属性：disply / position / float / visibility / overflow（建议 display 第一个写,毕竟关系到模式）

2、自身属性：width / height / margin / padding / border/background

3、自身属性：colorr / font/text-decoration / text-align / vertical-align / white-space / break-word

4、其他属性：content / cursor / border-radius / box-shadow / text- shadow / …

示例：

 .jdc{
            display: block;
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            padding: 20px 0;
            font-family: "Helvetica", "Arial", serif;
            color: #333333;
            background: rgba(0, 0, 0, .5);
            border-radius: 10px;
        }

9、常见的图片格式

1、jpg图象格式：JPEG ( JPG )对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的

2、gif图像格式 : GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景
和动画效果,实际经常用于-些图片小动画效果

3、png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保
持透明背景.如果想要切成背景透明的图片，请选择png格式.

4、PSD图像格式PSD格式是Photoshop的专用格式 ,里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字，获得图片，还可以测量大小和距离.

10、网页布局整体思路

1、必须确定页面的版心(可视区) , 我们测量可得知。

2、分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则

3、行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置，页面布局第二准则

4、制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要

5、所以先理清楚布局结构,再写代码尤为重要这需要我们多写多积累

11、定位组成 position

1、概念

定位：将盒子定在某一个位置，所以定位也是在拜访盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

2、边偏移

边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right 4个属性

1、相对定位 relative

相对定位是元素在移动位置的时候，是相对于它的原来的位置来说的（自恋型）。

特点：

• 1、它是相对于自己原来的位置进行移动的( 移动位置的时候参考点是自己原来的位置 )
• 2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它(不脱标，继续保留原来位置)相对定位并没有脱标。它最典型的的应用是给定位当爹的

2、绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的( 拼爹型 )。

绝对定位的特点：

• 1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
• 2、如果祖先元素有定位( 相对、绝对、固定定位 )，则以最近一级的有祖先定位为参考点移动位置
• 3、绝对定位不在占有原先的位置 (脱标)

3、固定定位 fixed

固定定位是元素固定于浏览器的可视区域的位置，使用场景：可以在浏览器页面滚动时元素的位置不会改变。

固定定位特点：

• 1、以浏览器的可视窗口为参照移动元素
  • 跟父元素没有任何关系
  • 不跟随滚动条滚动
• 2、固定定位不占由原先的位置
  • 固定定位也是脱标的，其实固定定位也可以看做成一种特殊的绝对定位

固定定位版心右侧位置的小技巧

• 1、让固定定位的盒子 left 走到浏览器可视区（也可以看作版心）的一半位置
• 2、让固定定位的盒子 margin-left:版心宽度的一半距离。多走 版心的一般的位置
• 就可以让固定定位的盒子贴着版心右侧对齐了

4、粘性定位 sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的

语法：

选择器 { position: sticky; top: 10px;}

粘性定位的特点：

1、以浏览器的可视窗口为参照点移动元素（固定定位特点）

2、粘性定位占有原先的位置（相对定位特点）

3、必须添加 top、left、right、bottom 器中一个才有效

跟页面滚动搭配使用。兼容性较差、IE不支持。

5、定位的总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否（占有位置）	相对于自身位置移动	常用
absolute 绝对定位	是（不占有位置）	带有定位的父级	常用
fixed 固定定位	是（不占有位置）	浏览器可视区	常用
stickyc 黏性定位	否（占有位置）	浏览器可视区	当前阶段少

---

12、绝对定位的盒子居中&定位的扩展

1、绝对定位的盒子居中

加了绝对定位的就盒子不能通过 margin:0 auto水平居中，但是通过计算方法实现水平和垂直居中。

• ① left 50%：让盒子左侧移动到父级元素的水平中心位置
• ② margin-left: -100px：让盒子向左移动到自身宽度的一半

2、定位的扩展

绝对定位（固定定位）会完全压住盒子

浮动元素不同，他只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有内容

浮动之所以不会压住文字，因为浮动产生的目的的最初是为了做文字环绕效果的。文字会环绕浮动元素

13、定位叠放层级 z-index

在使用定位布局时，可能出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

选择器：{ z-index: 1;}

• 数值可以是正整数，负数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

14、网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子

通过CSS浮动、定位 可以让每个盒子排列成网页

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个的都有自己的专门用法

1、标准流

• 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2、浮动

• 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3、定位

• 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

---

15、元素的显示与隐藏

1、display 属性

display 属性用于设置一个元素应如何显示

属性值	作用
display：none;	隐藏对象
display：block;	除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不在占有原来的位置

2、visibility 可见性

visibility属性用用于指定一个元素可见还是隐藏

属性值	作用
visibility：visible;	元素可视/默认·
visibility：hidden;	元素隐藏

visibility 隐藏元素后，继续占有原来的位置

• 如果隐藏元素想要原来位置，就用visibility：hidden

• 如果隐藏元素不想要原来位置，就用display：none

3、overflow 溢出

overflow 属性指定了如果内容移除一个元素的框( 超出其指定的高度及宽度 )时，会发生什么

属性值	作用
visible	默认效果,不剪切内容不添加滚动条
hidden	不显示超出对象尺寸的内容，超出的部分隐藏掉
scroll	不管内容超出是否，总显示滚动条
auto	超出内容自动显示滚动条，不超出不显示滚动条

• 如果有定位的盒子，请慎用overflow：hidden ,因为它会隐藏多余的部分