文章目录

  • 一、CSS介绍:
    • 1. CSS的发展历程:
    • 2. CSS初识:
    • 3. CSS样式规则:
    • 4. CSS注释:
  • 二、font字体：
    • 1. font-size: 字号大小:
    • 2. font-family: 字体:
      • 2.1 CSS Unicode 字体:
    • 3. font-weight: 字体粗细:
    • 4. font-style:字体风格
    • 5. font: 综合设置字体样式:
  • 三、CSS基本选择器：
    • 1. 标签选择器(元素选择器):
    • 2. 类选择器:
    • 3. 多类名选择器:
    • 4. ID选择器:
    • 5. 通配符选择器:
    • 6. 伪类选择器:
    • 6.1 链接伪类选择器:
      • 6.2 结构(位置)伪类选择器(CSS3):
      • 6.3 目标伪类选择器(CSS3):
  • 四、CSS外观样式:
    • 1. color: 文本颜色:
    • 2. line-height行间距:
    • 3.text-align 水平对齐方式:
    • 4. text-indent首行缩进:
    • 5. letter-spacing 字间距:
    • 6. word-spacing 单词间距:
    • 7. 颜色半透明
    • 8. 文字阴影(CSS3)
    • 9. 小案例:
  • 五、引入css样式表(书写位置)：
    • 1. 行内式(内联式):
    • 2. 内部样式表(内嵌式):
    • 3. 外部式(引用式)
    • 4. 三种样式表总结:
  • 六、 标签显示模式(display):
    • 1. 块级元素(block-level):
    • 2. 行内元素(inline-level):
    • 3. 块级元素和行内元素区别:
    • 4. 行内块元素(inline-block):
    • 5. 标签显示模式转换 display
  • 六、CSS复合选择器：
    • 1. 交集选择器:
    • 2. 并集选择器:
    • 3. 后代选择器:
    • 4. 子元素选择器:
    • 5. 属性选择器:
    • 6. 伪元素选择器(CSS3):
      • 6.2 E::before和E::after
  • 七、CSS背景及应用：
    • 1. 背景图片(image):
    • 2. 背景平铺(repeat):
    • 3. 背景图片位置:
    • 4. 背景附着:
    • 5. 背景简写:
    • 6. 背景透明(CSS3):
    • 7. 背景缩放(CSS3):
    • 8. 多背景(CSS3):
    • 9. 凹凸文字:
    • 10. 练习: 导航栏:
      • 10.1 文本装饰:text-decoration 通常我们用于给链接修改装饰效果
  • 八、CSS三大特性：
    • 1. css层叠性:
    • 2. CSS继承性:
    • 3. CS优先级:
    • 4. CSS特殊性（Specificity）
  • 九、CSS盒模型及应用：
    • 1. 盒子模型:
    • 2. 什么是盒模型:
    • 3. 盒子边框(border):
    • 3.1 盒子边框写法总结:
    • 4.表格的细线边框:
    • 5.圆角边框:
    • 6.内边距(padding):
    • 7.外边距(margin):
    • 8.外边距实现盒子居中;
    • 9.小误区:
      • 9.1.文字水平居中 和 盒子水平居中:
      • 9.2 插入图片与背景图片的区别:
    • 10. 清除元素的默认内外边距:
    • 11. 外边距合并:
      • 11.1 相邻块元素垂直外边距的合并:
      • 11.2 嵌套块元素垂直外边距的合并:
    • 12. content宽度和高度:
    • 13. 盒子模型布局稳定性:
    • 14. 小案例:
    • 15. css3盒模型:
    • 16. 盒子阴影:
  • 十、浮动及清除浮动：
    • 1. 普通流(normal flow):
    • 2. 浮动(float):
      • 2.1 什么是浮动
      • 2.2 浮动详细内幕特性
    • 3. 版心和布局流程:
      • 3.1 布局流程:
      • 3.2 一列固定宽度且居中:
      • 3.3 两列左窄右宽型:
      • 3.4 通栏平均分布型:
    • 4. 清除浮动:
      • 4.1 为什么要清楚浮动:
      • 4.2 清楚浮动的本质:
      • 4.3 清除浮动的方法:
  • 十一、photoshop基本操作：
  • 十二、CSS四种定位：
    • 1. 定位(position):
    • 2. 元素的定位属性:
      • 2.1 边偏移:
      • 2.2 定位模式(定位的分类):
    • 3. 静态定位(static):
    • 4. 相对定位(relative)
    • 4. 绝对定位(absolute):
      • 4.1 父级没有定位:
      • 4.2 父级有定位:
      • 4.3 子绝父相:
      • 4.4 绝对定位的盒子水平/垂直居中:
    • 5. 固定定位(fixed)
      • 5.1 叠放次序(z-index)
    • 6 四种定位总结
    • 7. 定位模式的转换:
  • 十三、元素的显示与隐藏:
    • 1. display显示:
    • 2. visibility可见性:
    • 3. overflow 溢出:

一、CSS介绍:

1. CSS的发展历程:

  • CSS专注样式;
  • HTML专注 结构

2. CSS初识:

CSS(Cascading Style heets)通常称为CSS样式或层叠样式表(级联样式表), 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式.
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式.

3. CSS样式规则:

使用HTML时, 需要遵从一定的规范.

在上面的样式规则中:

1. 选择器用于指定css样式作用的HTML对象, 花括号内是该对象的具体样式;
2. 属性和属性值以"键值对"的形式出现;
3. 属性是对指定的对象设置的样式属性, 例如: 字体大小, 文本颜色等;
4. 属性和属性值之间用英文":" 进行连接;
5. 多个"键值对"之间用把英文";"进行区分;

4. CSS注释:

/*这是css的注释格式*/

二、font字体：

1. font-size: 字号大小:

font-size属性用于设置字号, 该属性的值可以使用相对长度单位, 也可以使用绝对长度单位. 其中, 相对长度单位比较常用, 推荐使用像素单位px,:

相对长度单位 说明
em 相对于当前对象内文本的字体尺寸
px 像素, 最常用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt 点

2. font-family: 字体:

font-family属性用于设置字体. 网页中常用的字体有宋体、微软雅黑、黑体等, 例如将网页中所有段落文本的字体设置为微软雅黑, 可以使用如下CSS样式代码：

p{ font-family:"微软雅黑";}

可以同时指定多个字体, 中间以逗号隔开，表示如果浏览器不支持第一个字体, 则会尝试下一个, 直到找到合适的字体.

常用技巧:

1. 现在网页中普遍使用14px+;
2. 尽量使用偶数的数字字号. ie6等老浏览器支持奇数会有bug;
3. 各种字体之间必须使用英文状态下的逗号隔开;
4. 中文字体需要加英文状态下的引号, 英文字体一般不需要加引号. 当需要设置英文文字时, 英文字体名必须位于中文字体名之前;
5. 如果字体名中包含空格、#、$等符号, 则改字体必须加英文状态下的单引号或双引号, 例如: font-family: "Times New Roman";;
6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确的显示;

2.1 CSS Unicode 字体:

在css中设置字体名称, 直接写中文是可以的. 但是在文件编码(GB2312、utf-8等)不匹配会产生乱码. XP系统不支持类似"微软雅黑"的中文.

  • 方案一: 可以使用英文代替, 比如: font-family: “Microsoft Yahei”;;
  • 方案二:在css直接使用Unicode编码来写字体名称可以避免这些错误. 使用Unicode写中文 字体名称, 浏览器是可以正确解析的. font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”.
    可以通过escape() 来测试属于什么字体。
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

3. font-weight: 字体粗细:

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的

font-weight属性用于定义字体的粗细, 其可用属性值: normal、bold、bolder、lighter、100~900(100的整数倍)

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍)
技巧:

数字400等价于 normal;
数字700等价于 bold;

4. font-style:字体风格

字体倾斜除了用 i 和 em 标签之外, 可以使用CSS 来实现, 但是CSS 是没有语义的

font-style属性用于定义字体风格, 如设置斜体、倾斜或正常字体, 其可用属性值如下：

  • normal：默认值，浏览器会显示标准的字体样式。
  • italic：浏览器会显示斜体的字体样式。
  • oblique：浏览器会显示倾斜的字体样式。

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

5. font: 综合设置字体样式:

font属性用于对字体样式进行综合设置, 其基本语法格式如下:

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

注意:

使用font属性时, 必须按上面语法格式中的顺序书写, 不能更换顺序, 各个属性以空格隔开;
其中不需要设置的属性可以省略(取默认值), 但必须保留font-size和font-family属性, 否则font属性将不起作用;

三、CSS基本选择器：

要想将css样式应用于特定的HTML元素, 首先需要找到该目标元素. 在css中 执行这一任务的样式规则部分被称为选择器(选择符).

1. 标签选择器(元素选择器):

标签选择器是指用HTML标签名称作为选择器, 按标签名称分类, 为页面中某一类标签指定指定统一的css. 其基本语法格式如下:

标签名 {属性1: 属性值; 属性2: 属性值2; 属性3: 属性值3}
元素名 {属性1: 属性值; 属性2: 属性值2; 属性3: 属性值3}

标签选择器最大的优点是能快速的为页面中同类型的标签统一样式, 同时这也是它的缺点,不能设计差异化样式.

2. 类选择器:

类选择器使用"."(英文点号)进标识, 后面紧跟类名, 其基本语法格式如下:

.类名 {属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}

标签调用的时候用 class=“类名” 即可:

<div class="test"> test </div>

类选择器最大的优势是可以为元素对象定义单独或相同的样式

注意:

1. 长名称或词组可以使用中横线来为选择器命名;
2. 不建议使用"_"下划线来命名CSS选择器,可以使用"-"连接;
3. 不要纯数字、中文等命名,  尽量使用英文字母来表示

3. 多类名选择器:

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.font20 {font-size: 20px;}.font14 {font-size: 14px;}.pink {color: pink;}.fontWeight {font-weight: bolder;}</style>
</head>
<body><div class="pink fontWeight font20">亚瑟</div><div class="font20">刘备</div><div class="font14 pink">安其拉</div><div class="font14">貂蝉</div>
</body>
</html>


注意:

1. 样式显示效果跟HTML元素中类名的先后顺序没有关系, 受css样式书写的上下顺序有关;
2. 各类名之间用空格隔开;

4. ID选择器:

id选择器使用"#"进行标识, 后面紧跟id名, 后面基本语法格式如下:

#id {属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}

该语法中, id名即为HTML元素的id属性值, 大多数HTML元素都可以定义id属性, 元素的id值是 唯一的, 只能对应于文档中的某一个具体的元素.

id选择器和类选择器区别:
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class.

id选择器和类选择器最大的不同在于使用次数上.

5. 通配符选择器:

通配符选择器用"*"号表示, 它是所有选择器中作用最广泛的, 能匹配到页面中所有的元素. 其基本语法格式如下:

* { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }

例如: 使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距

* {margin: 0;       /* 定义外边距*/padding: 0;     /* 定义内边距*/
}

6. 伪类选择器:

伪类选择器用于向某些选择器添加特殊效果.

6.1 链接伪类选择器:

  • :link /* 访问过的链接 */
  • :visited /*已访问过的链接 */
  • :hover /* 鼠标移动到链接上 */
  • :activate /* 选定的链接 */

注意:
写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

6.2 结构(位置)伪类选择器(CSS3):

  • :first-child /* 选取属于其父元素的首个子元素的指定选择器 */
  • :last-child /* 选取属于其父元素的最后一个子元素的指定选择器 */
  • :nth-child(n) /* 匹配其父元素的第N个子元素 , 不论元素的类型 . */
  • :nth-last-child(n) /* 选择器匹配属于其元素的倒数第N个元素 , 不论元素的类型. */

注:

n 可以是数字、关键词或公式;(公式n从0开始, 例: 2n、2n+1);
even: 偶数序列子元素; odd: 奇数序列子元素;

li:first-child { /*  选择第一个孩子 */color: pink;
}
li:last-child {   /* 最后一个孩子 */color: purple;
}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ color: skyblue;
}

6.3 目标伪类选择器(CSS3):

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {color: red;font-size: 30px;
}

四、CSS外观样式:

1. color: 文本颜色:

color属性用于定义文本的颜色, 其取值方式有如下3种:

  1. 预定义的颜色值, 如: red、green、blue等
  2. 十六进制, 如#FF0000，#FF6600，#29D794等, 可简写. 实际工作中, 十六进制是最常用的定义颜色的方式
  3. RGB代码, 如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%); 需要注意的是, 如果使用RGB代码的百分比颜色值, 取值为0时也不能省略百分号，必须写为0%

2. line-height行间距:

line-height属性用于设置行间距, 就是行与行之间的距离, 即字符的垂直间距, 一般称为行高. line-height常用的属性值单位有三种, 分别为: px(像素)、相对值(em)、百分比(%), 实际工作中用的最多的是px(像素).

3.text-align 水平对齐方式:

text-align属性用于设置文本内容的水平对齐, 相当于html中的align对齐属性., 其可用属性值如下:

  • left: 左对齐
  • right: 右对齐
  • center: 居中对齐

4. text-indent首行缩进:

text-indent属性用于设置文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%, 允许使用负值, 建议使用em作为设置单位.

5. letter-spacing 字间距:

letter-spacing属性定义字间距, 所谓字间距就是字符与字符之间的空白. 其属性值可为不同单位的数值, 允许使用负值, 默认为normal.

6. word-spacing 单词间距:

word-spacing属性用于定义英文单词之间的间距, 对中文字符无效. 和letter-spacing一样, 其属性值可为不同单位的数值, 允许使用负值, 默认为normal.

word-spacing和letter-spacing均可对英文进行设置. 不同的是letter-spacing定义的为字母之间的间距, 而word-spacing定义的为英文单词之间的间距.

7. 颜色半透明

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

 color: rgba(r,g,b,a)

a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)

8. 文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
值 描述
h-shadow 必须. 水平阴影的位置, 允许负值
v-shadow 必须. 垂直阴影的位置, 允许负值
blur 可选, 模糊的距离
color 可选, 阴影的颜色, 参阅css颜色值 
<head><meta charset="UTF-8"><title>Document</title><style>h1 {text-shadow: 9px 5px 3px rgba(255, 0, 0, 0.5);}</style>
</head>
<body><h1> 这是文字阴影的练习</h1>
</body>

9. 小案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小练习</title><style>body {color: #3c3c3c;font-size: 16px;}h1 {text-align: center;  /*  文字水平居中 */font-size: 25px;font-weight: normal;  /* 让粗体不加粗 */}div {text-align: center;font-size: 14px;}.sports {color: #f40;}.packtake {color: #f00;}.co {font-weight: 700;color: #ccc;}.co:hover {font-weight: 700;color: #f00;}p {font-size: 14px;line-height: 22px;text-indent: 2em;      /* 首行缩进2个字符 */letter-spacing: 1px;}em {font-style: normal;    /* 让斜体不倾斜 */color: skyblue;}</style>
</head>
<body><h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1><div>2017年07月16日20:11 <span class="sports">新浪体育 评论中大奖</span>（<a href="#" class="packtake">11</a>人参与） <a href="#" class="co">收藏本文</a></div><hr /><p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p><p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p><p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p><p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>
</html>

五、引入css样式表(书写位置)：

1. 行内式(内联式):

内联样式, 又有人称行内样式、行间样式、内嵌样式. 是通过标签的style属性来设置元素的样式，其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作

2. 内部样式表(内嵌式):

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style>
</head>

语法中, style标签一般位于head标签中title标签之后, 也可以把他放在HTML文档的任何地方

type=“text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略

3. 外部式(引用式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head><link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是个单标签

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

  • href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  • type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
  • rel：必须参数, 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

4. 三种样式表总结:

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中）
外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多）

六、 标签显示模式(display):

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型, 它们也称块元素和行内元素. 具体如下：

1. 块级元素(block-level):

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

div元素非常符合布局, 即:CSS+DIV布局
块级元素的特点：

  1. 总是从新行开始;
  2. 高度，行高、外边距以及内边距都可以控制;
  3. 宽度默认是容器的100%;
  4. 可以容纳内联元素和其他块元素;

2. 行内元素(inline-level):

行内元素(内联元素)不占有独立的区域, 仅仅靠自身的字体大小和图像尺寸来支撑结构, 一般不可以设置 高度、宽度、对齐方式等属性, 常用于控制页面中文本的样式

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点:

  1. 和相邻行内元素在一行上;
  2. 高、宽无效, 但水平方向的padding和margin可以设置, 垂直方向无效;
  3. 默认宽度就是它本身内容的宽度;
  4. 行内元素只能容纳文本或其他行内元素(a特殊);

注意:

  1. 只有文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素;
  2. 链接里面不能再放链接;

3. 块级元素和行内元素区别:

块级元素的特点:
1. 总是从新行开始;
2. 高度、宽度、外边距和内边距都可以控制;
3. 宽度默认是容器的100%;
4. 可以容纳内联元素和其它块元素;

行内元素的特点:
1. 和相邻行内元素在一行上;
2.  高、宽无效, 但水平方向的padding和margin可以设置, 垂直方向无效;
3. 默认宽度就是它本身内容的宽度;
4. 行内元素只能容纳文本或其他行内元素;

4. 行内块元素(inline-block):

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性, 有些资料可能会称它们为行内块元素;

行内块元素的特点：

  1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙;
  2. 默认宽度就是它本身内容的宽度;
  3. 高度，行高、外边距以及内边距都可以控制;

5. 标签显示模式转换 display

  • 块转行内：display:inline;
  • 行内转块：display:block;
  • 块、行内元素转换为行内块： display: inline-block;

六、CSS复合选择器：

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签.

1. 交集选择器:

交集选择器有两个选择器构成, 其中第一个选择器为标签选择器, 第二个为class选择器, 两个选择器中间不能有空格

**记忆技巧: **

交集选择器 是 并且的意思. 即…又…的意思

2. 并集选择器:

并集选择器(选择器分组)是各个选择器通过逗号连接的, 任何形式的选择器(包括标签选择器, class选择器和id选择器等), 都可以作为冰机选择器的一部分. 如果某些选择器定义的样式完全相同或部分相同, 就可以利用并集选择器为它们定义相同的css样式;

记忆技巧:
并集选择器 和 的意思, 就是说, 只要逗号隔开的, 所有选择器都会执行后面样式;

3. 后代选择器:

后代选择器又称为包含选择器, 用来选择元素或元素元素后代, 其写法就是把外层标签写在前边, 内层标签一次写在后面, 中间用空格隔开. 当标签发生嵌套时,内层选择器就成为外层标签的后代.

4. 子元素选择器:

子元素选择器只能选择作为某元素子元素的元素. 其写法就是把父级标签写在前面, 子级标签写在后面,中间跟一个">"进行连接, 注意:符号左右两侧保留一个空格

5. 属性选择器:

选取标签带有某些特殊属性的选择器称为属性选择器

选择器 示例 含义
E[attr] div[class] 存在attr属性即可
E[attr=val] .test[class=font] 属性attr值为val
E[attr*=val] .haha[class*=font]
E[attr^=val] .test[class^=font] 属性attr中包含val字符且在开始位置
E[attr$=val] .test[class$=font] 属性attr中包含val字符且在结束位置 
</head><style>/* 获取到 拥有 该属性的元素 */div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */color: pink;}div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */color: skyblue;}div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */color: green;}</style>
</head>
<body><div class="font12">属性选择器</div><div class="font12">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="24font">属性选择器123</div><div class="sub-footer">属性选择器footer</div><div class="jd-footer">属性选择器footer</div><div class="news-tao-nav">属性选择器</div><div class="news-tao-header">属性选择器</div><div class="tao-header">属性选择器</div>
</body>

6. 伪元素选择器(CSS3):

  • E::first-letter /* 文本的第一个单词或字(中文、日文、英文等) */
  • E::first-line /* 文本第一行 */
  • E::selection /* 可改变选中文本的样式 */
p::first-letter {font-size: 20px;color: hotpink;
}/* 首行特殊样式 */
p::first-line {color: skyblue;
}p::selection {/* font-size: 50px; */color: orange;
}

6.2 E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {content:"开始";
}
div::after {content:"结束";
}

E:after、E:before 在旧版本里是伪元素, CSS3的规范里":"用来表示伪类, "::"用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before, 这样做的目的是用来做兼容处理.

七、CSS背景及应用：

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

属性 描述
background-color 背景颜色
background-image: url(images/l.jpg) 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动背景的合写（复合属性 
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

1. 背景图片(image):

语法:

background-image: none | url(url);

参数:

  • none: 无背景图(默认的)
  • url: 使用绝对路径或相对路径北京图片

background-image属性允许指定一个图片展示在背景中(只有css3才可以多背景)可以和background-color连用. 如果图片不重复,图片覆盖不到的地方会被背景色填充; 如果有背景图片平铺, 则会覆盖背景颜色.

2. 背景平铺(repeat):

语法:

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数:

  • repeat: 背景图像在纵、横方向上平铺(默认);
  • no-repeat: 背景图片不平铺;
  • repeat-x: 背景图片在横向上平铺;
  • repeat-y: 北京图片在纵向上平铺;

3. 背景图片位置:

语法:

background-position: length || length
background-position: position || position

参数：

  • length: 百分数 | 由浮点数字和单位标识符组成的长度值. 请参阅长度单位
  • position: top(上) | center(垂直居中) | bottom(下) || left(左)| center(水平居中) | right(右)

说明：

  • 设置或检索对象的背景图像位置. 必须先指定background-image属性. 默认值为：(0% 0%).
  • 如果只指定了一个值, 该值将用于横坐标. 纵坐标将默认为50%. 第二个值将用于纵坐标.

注意：

  1. position 后面是x坐标和y坐标, 可以使用方位名词或者 精确单位.
  2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前, y坐标后面. 比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标.

实际工作用的最多的, 就是背景图片居中对齐了

4. 背景附着:

语法:

background-attachment: scroll | fixed

参数：

  • scroll : 　背景图像是随对象内容滚动
  • fixed : 　背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

5. 背景简写:

background属性的值的书写顺序官方并没有强制标准的. 为了可读性，建议如下写：

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

6. 背景透明(CSS3):

CSS3支持半透明的语法格式:

background: rgba(0,0,0,0.3)

div {height: 300px;background: rgba(0, 0, 0, 0.7);
}

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响

7. 背景缩放(CSS3):

通过background-size设置背景图片的尺寸,
其参数设置如下：

  1. 可以设置长度单位(px)或百分比(设置百分比时，参照盒子的宽高);
  2. cover: 会自动调整缩放比例，保证图片始终填充满背景区域, 如有溢出部分则会被隐藏. 用的cover 最多;
  3. contain: 会自动调整缩放比例，保证图片始终完整显示在背景区域;
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

8. 多背景(CSS3):

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了

  • 一个元素可以设置多重背景图像;
  • 每组属性间使用逗号分隔;
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系), 前面的背景图会覆盖在后面的背景图之上;
  • 为了避免背景色将图像盖住，背景色通常都定义在最后一组上;
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

 <head><meta charset="UTF-8"><title>多背景图</title><style>div{width: 600px;height: 600px;background: url(images/l.jpg) no-repeat top left,url(images/3.jpg) no-repeat deeppink 270px;}</style>
</head>
<body><div></div>
</body>

9. 凹凸文字:

<head><meta charset="UTF-8"><title>Document</title><style>body {background-color: #ccc;}div {color: #ccc;font: 700 80px "微软雅黑";}div:first-child{/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child{/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style></head>
<body><div>我是凸起的文字</div><div>我是凹下的文字</div>
</body>

10. 练习: 导航栏:

10.1 文本装饰:text-decoration 通常我们用于给链接修改装饰效果

值 描述
none 默认. 定义标准的文本
underline 定义文本下的一条线下划线 也是我们链接自带的
overline 定义文本上的一条线(删除线)
line-through 定义穿过文本下的一条线

技巧:

在一行内的盒子里, 设定行高(line-height)等于盒子的高度(height), 就可以使文字垂直居中.

<head><meta charset="UTF-8"><title>Document</title><style>body {background-color: #000;}a {display: inline-block;width: 200px;height: 50px;text-align: center; /*水平居中*/line-height: 50px;  /*垂直居中*/color: #fff;font-size: 22px;text-decoration: none; /*取消文本装饰(取消下划线)*/}a:hover{    /* 鼠标经过 */background: url(images/h.png) no-repeat;}</style>
</head>
<body><div><a href="#">专区说明</a><a href="#">申请资格</a><a href="#">兑换奖励</a><a href="#">下载游戏</a></div>
</body>

八、CSS三大特性：

css的三大特性: 层叠、继承、优先级

1. css层叠性:

所谓层叠性是指多种CSS样式的叠加, 是浏览器处理冲突的能力, 如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将了另一个属性层叠掉.

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准.

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

2. CSS继承性:

所谓继承性是指书写CSS样式表时, 子标签会继承父标签的某些样式, 如: 文本颜色和字号. 想要设置一个可继承的属性，只需将它应用于父元素即可.

注意:
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-，font-，line-这些元素开头的都可以继承，以及color属性)

3. CS优先级:

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下:

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

4. CSS特殊性（Specificity）

关于CSS权重，需要一套计算公式来去计算，这个就是 CSS Specificity，称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越.

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

权重是可以叠加的
例子:


div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   <p data-line="1325" class="sync-line" style="margin:0;"></p># nav p       ----->       0,1,0,1
<p class="mume-header " id="nav-p-0101"></p>

注意:

  1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况;
  2. 继承的 权重是 0;

总结优先级：

  1. 使用了 !important声明的规则;
  2. 内嵌在 HTML 元素的 style属性里面的声明;
  3. 使用了 ID 选择器的规则;
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则;
  5. 使用了元素选择器的规则;
  6. 只包含一个通用选择器的规则;
  7. 同 一类选择器则遵循就近原则;

总结：权重是优先级的算法，层叠是优先级的表现

九、CSS盒模型及应用：

CSS三大模块: 盒子模型、浮动、定位

1. 盒子模型:

所谓盒子模型就是把HTML页面的元素看作是一个矩形盒子, 也就是一个盛装内容的容器. 每个矩形都由元素的内容、内边距(padding)、边框(border)、外边框(margin)组成

2. 什么是盒模型:

所有的文档元素(标签)都会生成一个矩形框, 被称为元素框(element box), 它描述了一个文档元素在网页布局汇总所占的位置大小. 因此, 每个盒子除了自己大小和位置,还影响着其他盒子的大小和位置.

3. 盒子边框(border):

语法:

border: border-width || border-style || border-color

边框样式(border-style)

样式 说明
none 没有边框即忽略所有边框的宽度(默认值)
solid 边框为单实线(最为常用的)
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线

3.1 盒子边框写法总结:

设置内容 样式属性 常用属性值
上边框 border-top-style:样式;
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度 样式 颜色;
下边框 border-bottom-style:样式;
border- bottom-width:宽度;
border- bottom-color:颜色;
border-bottom:宽度 样式 颜色;
左边框 border-left-style:样式;
border-left-width:宽度;
border-left-color:颜色;
border-left:宽度 样式 颜色;
右边框 border-right-style:样式;
border-right-width:宽度;
border-right-color:颜色;
border-right:宽度 样式 颜色;
样式综合设置 border-style:上边 [右边 下边 左边]; none无（默认）、
solid单实线、
dashed虚线、
dotted点线、
double双实线
宽度综合设置 border-width:上边 [右边 下边 左边]; 像素值
颜色综合设置 border-color:上边 [右边 下边 左边]; 颜色值、
#十六进制、
rgb(r,g,b)、
rgb(r%,g%,b%)
边框综合设置 border:四边宽度 四边样式 四边颜色;

4.表格的细线边框:

table{ border-collapse:collapse; }  /*collapse 单词是合并的意思*/border-collapse:collapse; 表示边框合并在一起。

<head><meta charset="UTF-8"><title>Document</title><style>table {width: 700px;height: 300px;border: 1px solid red;border-collapse:collapse;}td {border: 1px solid green;}</style>
</hea>
<body><table cell ><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>456</td><td>456</td><td>456</td><td>456</td><td>456</td></tr><tr><td>789</td><td>789</td><td>789</td><td>789</td><td>789</td></tr></table>
</body>

5.圆角边框:

语法格式：

border-radius: 左上角  右上角  右下角  左下角;

<head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid red;display: inline-block;}div:first-child {border-radius: 20px;}div:nth-child(2) {/* 取宽度的一半会变成圆形 *//* border-radius: 100px;   */border-radius: 50%;}div:nth-child(3) {border-radius: 10px 40px; /* 左上、右下是10px 右上、左下是40 */}div:nth-child(4) {border-radius: 10px 40px 80px; /* 左上10 右上、左下40 右下80 */}div:nth-child(5) {border-radius: 10px 40px 80px 100px; /* 左上角10 右上角40 右下角 80  左下角100*/}div:nth-child(6) {border-radius: 100px;height: 100px;width: 300px;}</style>
</head>
<body><div> 20px</div><div>100px 或 50%  </div><div>10px 40px</div><div>10px 40px 80px</div><div>10px 40px 80px 100px</div><div>border-radius: 100px;<br/>height: 100px;<br/>width: 300px;</div>
</body>

6.内边距(padding):

参数 描述
padding 属性用于设置内边距。 是指 边框与内容之间的距离
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

注意:
后面跟几个数值表示的意思是不一样的。

值的个数 表达意思
1个值 padding：上下左右边距
比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距
比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding：上边距 左右边距 下边距
比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距
比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

7.外边距(margin):

margin属性用于设置外边距. 设置外边距会在元素之间创建"空白", 这段空白通常不能放置其他内容。

参数 描述
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 上外边距
margin 上外边距 右外边距 下外边距 左外边

例子:

<head><meta charset="UTF-8"><title>Document</title><style>nav {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}nav a{height: 41px;padding: 0px 15px;margin: 0px 10px;color: gray;font-size: 14px;text-decoration: none; /* 取消下划线 */display: inline-block;text-align: center;line-height: 41px;}nav a:hover {background-color: orange;}</style>
</head>
<body><nav><a href="#">首页</a><a href="#">手机新浪网</a><a href="#">网站导航</a><a href="#">三个字</a></nav>
</body>

8.外边距实现盒子居中;

可以让一个盒子实现水平居中,需要满足以下条件:

  1. 必须是块级元素;
  2. 盒子必须指定宽度;

然后就给左右的外边距设置auto, 就可以使块级元素水平居中

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

9.小误区:

9.1.文字水平居中 和 盒子水平居中:

  1. 文字水平居中是 text-align: center
  2. 盒子水平居中 左右margin 改为 auto
text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

9.2 插入图片与背景图片的区别:

  1. 插入图片: 用的最多 比如产品展示类;
  2. 背景图片: 一般用于小图标背景 或者 超大背景图片;
section img {  width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}aside {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */background-position: 30px 50px; /* 背景图片更该位置 用 background-position */}

10. 清除元素的默认内外边距:

为了更方便地控制网页中的元素, 制作网页时, 可使用以下代码清楚元素的默认内外边距:

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

注意:
行内元素是只有左右外边距的,没有上下外边距. 内边距在IE6等低版本浏览器也会有问题. 因此,尽量不要给行内元素指定上下的内外边距就好了.

11. 外边距合并:

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

11.1 相邻块元素垂直外边距的合并:

当上下相邻的两个块级元素相遇时, 如果上面的元素有下外边距margin-bottom, 下面的元素有上外边距margin-top, 则它们之间的垂直间距不是之和,而是两者中的较大者. 这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)


解决方案: 避免就好了

11.2 嵌套块元素垂直外边距的合并:

对于两个嵌套关系的块元素, 如果父元素没有上内边距及边框, 则福元素的上外边框与子元素的上外边框发生合并,合并后的外边框为两者中的较大者,即使父元素的上外边距为0, 也会发生合并.

解决方案:

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

12. content宽度和高度:

使用宽度属性width和高度属性height可以对合资的大小进行控制.
width和height的属性值可以为不同单位的数值或者相对于父元素的百分比%, 实际工作中最常用的是像素值.
大多数浏览器, 如Firfox、IE6及以上版本都采用W3C规范, 符合css规范的盒子模型的总宽度和总高度的计算原则是:

/* 外盒尺寸计算(元素空间尺寸) */
element空间高度 = content height + padding height + margin
element空间宽度 = content width + padding width + margin/* 内盒尺寸计算(元素实际大小) */
element height = content height + padding + borde
element width = content width + padding + border

注意:

  1. 宽度属性width和高度属性heoght仅适用于块级元素, 对行内元素无效(img元素和input元素除外)
  2. 计算盒子模型的总高度时, 还应考虑上下两个盒子垂直外边距合并的情况;
  3. 如果一个盒子灭有给定宽度/高度或者继承父元素的 宽度/高度. 则padding不会影响本盒子大小

13. 盒子模型布局稳定性:

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

width > padding > margin

原因：

  1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用;
  2. padding 会影响盒子大小， 需要进行加减计算()麻烦) 其次使用;
  3. width 没有问题, 经常使用"宽度剩余法/高度剩余法"来做;

14. 小案例:

<head><meta charset="UTF-8"><title>Document</title><style>* { /* 清空边距 */margin: 0;padding: 0;}ul {list-style: none;   /* 取消列表默认的点样式 */}.searchPic {width: 238px;height: 294px;border: 1px solid #d9e0ee;border-top: 3px solid #ff8900;margin: 200px;}.searchPic>h3 {height: 35px;line-height: 35px;font-weight: 400;font-size: 16px;border-bottom: 1px solid #d9e0ee;padding: 0 10px; /* 因为h3没有给width值,继承了父元素的宽度,所以padding不会撑大width */    }.searchPic>img {margin: 7px 0 0 8px;} .searchPic ul li a {font-size: 12px;color: #666;text-decoration: none;}.searchPic ul li a:hover{text-decoration: underline;color: orange;}.searchPic ul {margin-left: 8px;}.searchPic li {height: 26px;padding-left: 10px;line-height: 26px;background: url(images/square.png) no-repeat left center;}</style></head>
<body><div class="searchPic"><h3>搜索趣图</h3><img src="data:images/happy.gif" height="160px" width="218px"><ul><li><a href="#">GIF: 小胖游泳被卡,被救后一脸无辜 </a></li><li><a href="#">GIF: 小胖游泳被卡,被救后一脸无辜 </a></li><li><a href="#">GIF: 小胖游泳被卡,被救后一脸无辜 </a></li></ul></div>
</body>

15. css3盒模型:

css3中可以通过box-sizing来指定盒模型, 即可指定为content-box、 border-box, 这样计算盒子大小的方式就发生了改变:

  1. box-sizeing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode;
  2. box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的;

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div:first-child {width: 200px;height: 200px;background-color: pink; box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */padding: 10px;border: 15px solid red;/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {width: 200px;height: 200px;background-color: purple;padding: 10px;box-sizing: border-box;   /* padding border  不撑开盒子 */border: 15px solid red;/* margin: 10px; *//* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}

16. 盒子阴影:

语法格式:

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
值 描述
h-shadow 必须.水平阴影的位置. 允许负值
v-shadow 必须. 垂直阴影的位置, 允许为负值
blur 可选. 模糊距离
spread 可选,阴影尺寸
color 可选, 阴影颜色
inset 可选,将外部阴影(outset)外围内部阴影
  1. 前两个属性是必须写的。其余的可以省略。
  2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset;
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 300px;border: 20px solid red;box-shadow: 15px 15px 3px 4px rgba(66, 66, 66, 0.5) inset;}</style>
</head>
<body><div></div>
</body>

十、浮动及清除浮动：

css的三种定位机制: 普通流(标准流)、浮动和定位

1. 普通流(normal flow):

html语言当中一个重要的概念—标准流, 或称 普通流.
普通流实际上就是一个网页标签元素正常从上到下, 从左到右排列顺序的意思.
比如: 块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局

2. 浮动(float):

2.1 什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)

2.2 浮动详细内幕特性

浮动脱离标准流, 不占位置, 会影响标准流. 浮动只有左右浮动.

浮动首先创建包含块的概念(包裹). 就是说， 浮动的元素总是找理它最近的父级元素对齐. 但是不会超出内边距的范围.

浮动的元素排列位置, 跟上一个元素(块级)有关系. 如果上一个元素有浮动, 则A元素顶部会和上一个元素的顶部对齐; 如果上一个元素是标准流, 则A元素的顶部会和上一个元素的底部对齐.
由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的, 则其他子级都需要浮动. 这样才能一行对齐显示.
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动.

总结:
浮动的目的就是为了让多个块级元素同一行上显示.
float:

  • 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
  • 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
  • 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

3. 版心和布局流程:

“版心”(可视区)是指网页中主体内容所在的区域. 一般在浏览区窗口中水平居中显示, 常见的宽度值为: 960px、 980px、1000px、1200px.

3.1 布局流程:

为了提高网页制作效率, 布局时通常要遵循一定的布局流程:

  1. 确定页面的版心(可视区);
  2. 分析页面中的航模块, 以及每个行模块中的列模块;
  3. 制作html结构;
  4. css初始化, 然后运用盒模型的原理, 通过DIV+CSS布局来控制网页的各个模块;

3.2 一列固定宽度且居中:


最普通的，最为常用的结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一列固定宽度且居中</title><style>* {margin: 0;padding: 0;}.top,.banner,.main,.footer {width: 960px;text-align: center;margin: 0 auto;margin-bottom: 10px;}.top {height: 80px;background-color: pink;}.banner {height: 120px;background-color: hotpink;}.main {height: 500px;background-color: purple;}.footer {height: 150px;background-color: gray;}</style></head>
<body><div class="top">top</div><div class="banner">banner</div><div class="main">main</div><div class="footer">footer</div>
</body>
</html>

3.3 两列左窄右宽型:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两列左窄右宽型</title><style>* {margin: 0;padding:0;}.top,.banner,.main,.footer {width: 960px;margin: 0 auto;text-align: center;margin-bottom: 10px;}.top{height: 80px;background-color: #eee;}.banner {height: 150px;background-color: #eee;}.main {height: 500px;}.main>.left {width: 360px;height: 500px;background-color: pink;float: left;margin-right: 8px;}.main>.right {width: 592px;   /* 通过差值,实现左右间的空白 */height: 500px;background-color: purple;float: right;}.footer {height: 120px;background-color: #eee;}</style>
</head>
<body><div class="top">top</div><div class="banner">banner</div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>
</body>
</html>

3.4 通栏平均分布型:

<!DOCTYPE html>
<html lang="zn">
<head><meta charset="UTF-8"><title>通栏平均分布型</title><style>* {margin: 0;padding: 0;}ul {list-style: none; /* 取消列表样式 · */}.top,.banner,.main,.footer{text-align: center;}.top {/* 通栏不用写宽度 */height: 80px;background-color: #eee;}.banner {width: 960px;height: 150px;background-color: pink;  margin: 10px auto; /* 上下空白 */}.small {width: 960px;height: 150px;margin: 0 auto;}.small ul li {width: 230px;background-color: #eee;height: 150px;float: left;margin-left: 10px;}.small .first {margin-left: 0px;}.big {width: 960px;height: 300px;margin: 10px auto;}.big ul li {width: 230px;background-color: #eee;height: 300px;float: left;margin-left: 10px;}.big .first {margin-left: 0px;}.footer {/* 通栏不用写宽度 */height: 80px;background-color: #eee;}</style>
</head>
<body><div class="top">top</div><div class="banner">banner</div><div class="small"><ul><li class="first">1</li><li>2</li><li>3</li>  <li>4</li></ul></div><div class="big"><ul><li class="first">5</li><li>6</li><li>7</li>  <li>8</li></ul></div><div class="footer">footer</div></body>
</html>

4. 清除浮动:

4.1 为什么要清楚浮动:

由于浮动元素不占用源文档流的位置, 所以它会影响后面元素排版产生影响, 为了解决这些问题, 所以就需要在该元素中清楚浮动.
准确地说，并不是清除浮动，而是清除浮动后造成的影响

4.2 清楚浮动的本质:

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题.

4.3 清除浮动的方法:

在css中, clear属性用于清除浮动, 其基本语法格式:

选择器 { clear: 属性值; }
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

额外标签法:

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签, 结构化较差.

父级添加overflow属性方法:

可以通过触发BFC的方式，可以实现清除浮动效果

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

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

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

使用before和after双伪元素清除浮动:

使用方法：

.clearfix:before,.clearfix:after { content:"";display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

十一、photoshop基本操作：

十二、CSS四种定位：

1. 定位(position):

2. 元素的定位属性:

元素的定位属性主要包括定位模式和边偏移两部分.

2.1 边偏移:

边偏移属性 描述
top 顶端偏移量, 定义元素相对于其父元素上边线的距离
bottom 底部偏移, 定义元素相对于其父元素下边线的距离
feft 左侧偏移量, 定义元素相对于其父元素左边线的距离
right 右侧偏移量, 定义元素相对于其父元素右边线的距离

2.2 定位模式(定位的分类):

在css中, position属性用于定义元素的定位模式, 其基本语法格式如下:

选择器 {position: 属性值;}

position属性的常用值:

值 描述
static 自动定位(默认定位方式)
relative 相对定位, 相对于其原文档流的位置进行定位
absolute 绝对定位, 相对于其上一个已经定位的父元素进行定位
fixed 固定定位, 相对于浏览器窗口进行定位

3. 静态定位(static):

静态定位是所有元素的默认定位方式. 当position属性的取指为static时, 可以将元素定位于静态位置. 所谓静态位置就是各个元素在HTML文档流中默认的位置, 所以无法通过边偏移属性(top、bottom、left或right)来改变元素位置. 一般用来清除定位.
静态定位就是网页中所有元素都默认的静态定位,其实就是标准流的特性.

4. 相对定位(relative)

相对定位是将元素相对于它的标准流中的位置进行定位, 当position属性的取指为relative时, 可以将元素定位于相对位置.
对元素设置相对定位后, 可以通过边偏移属性改变元素的位置, 但是它的文档流中的位置仍然保留.

<head><meta charset="UTF-8"><title>相对定位</title><style>div{width: 200px;height: 100px;background-color: pink;}div:nth-child(2) {background-color: purple;position: relative; /* 定位改为相对定位 */top: 10px;left: 20px;}</style>
</head>
<body><div></div><div></div><div></div>
</body>


注意:

  1. 相对定位最重要的一点, 它可以通过便宜移动位置, 但是原来所占的位置,继续占有.
  2. 每次移动位置, 是以自己的左上角为基点移动(相对于自己来移动位置)

就是说, 相对定位的盒子仍在标准流中, 塔后面的盒子仍以标准流方式对待它.(相对定位不脱标)

如果说浮动的主要目的是 让多个块级元素在一行上显示, name定位的主要价值在于 移动位置, 让盒子到想要的位置上去.

4. 绝对定位(absolute):

当position属性的取值为absolute时, 可以将元素的定位模式设置为绝对定位.

<head><meta charset="UTF-8"><title>决定定位</title><style>div:first-child{width: 150px;height: 100px;background-color: purple;position: absolute; /* 决定定位 */top:20px;left: 50px;}div:last-child{width: 200px;height: 150px;background-color: pink;}</style>
</head>
<body><div></div><div></div>
</body>

注意:

  1. 如果文档可以滚动, 绝对定位元素会随着它滚动, 因为元素最终会相对于正常流的某一部分定位.
  2. 决定定位可以通过边偏移量移动位置, 但是它完全脱标, 完全不占位置.

4.1 父级没有定位:

若父元素没有定位, 以浏览器为准对齐(document文档)

<head><meta charset="UTF-8"><title>绝对定位-父元素没有定位</title><style>.father {width: 200px;height: 150px;background-color: pink;margin: 100px;}.son1{width: 100px;height: 50px;background-color: purple;position: absolute;top:30px;left: 50px;}.son2{width: 100px;height: 50px;background-color: green;}</style></head>
<body><div class="father"><div class="son1">son1</div><div class="son2">son2</div></div></body>

4.2 父级有定位:

绝对定位是将元素依据最近已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位.

<head><meta charset="UTF-8"><title>绝对定位-父元素有定位</title><style>.father {width: 200px;height: 150px;background-color: pink;margin: 100px;position: relative; /* 父级有定位 */}.son1{width: 100px;height: 50px;background-color: purple;position: absolute;top:30px;left: 50px;}.son2{width: 100px;height: 50px;background-color: green;}</style></head>
<body><div class="father"><div class="son1">son1</div><div class="son2">son2</div></div></body>

4.3 子绝父相:

子绝父相: 子级是绝对定位, 父级要用相对定位;

绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位.
子级是绝对定位, 父级只要是定位即可(不管父级是绝对定位还是相对定位, 甚至是固定定位都可以), 就是说, “子绝父绝”, “子绝父相"都是可以的. 但是最常用的还是"子绝父相”.

<head><meta charset="UTF-8"><title>绝对定位-子绝父相</title><style>div{width: 600px;height: 200px;background-color: pink;line-height: 200px;margin: 0 auto;text-align: center;}img {margin-top: 10px;width: 180px;padding-left: 10px;}.slide{background-color: skyblue;position: relative;}.prev,.next{width: 50px;/* height: 50px; */background-color: rgba(0, 0, 0, 0.4);color: #fff;font-size: 4em;font-weight: 700;position: absolute;top: 0px; }.slide .next{right: 0px;}</style>
</head>
<body><div>上层块级元素</div><div class="slide"><div class="prev">></div><img src="data:images/3.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/3.jpg" alt=""><div class="next"><</div></div><div>下层块级元素</div>
</body>


因为子级是绝对定位, 不会占有位置, 可以放到父盒子里面的任何一个地方.
父盒子布局时, 需要占有位置, 因此父级只能是相对位置.

4.4 绝对定位的盒子水平/垂直居中:

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法:

  1. 首先left 50% 父盒子的一半大小;
  2. 然后走自己外边距负的一半值就可以了 margin-left;
<head><meta charset="UTF-8"><title>绝对定位-水平/垂直居中</title><style>.father {width: 400px;height: 200px;background-color: pink;margin: 40px auto;position: relative; /* 子绝父相 */}.son {width: 50px;height: 20px;background-color: purple;position: absolute;/* 水平居中 */left: 50%;margin-left: -25px;/* 垂直居中 */top: 50%;margin-top: -10px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

5. 固定定位(fixed)

固定定位是绝对定位的一种特殊形式, 它以浏览器窗口作为参照物来定义网页元素. 当position属性的取值为fixed时, 即可将元素的定位模式设置为固定定位.

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置. 不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置;

固定定位有两点：

  1. 固定定位的元素跟父亲没有任何关系，只认浏览器;
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动;

ie6等低版本浏览器不支持固定定位

5.1 叠放次序(z-index)

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠
在css中,要想调整重叠定位元素的堆叠顺序, 可以对定位元素用用z-index层叠等级属性, 其取值可为正整数、负整数和0. 例:z-index:2;

注意:

  1. z-index的默认值属性是0, 取值越大, 定位元素的层叠元素居上;
  2. 如果取值相同,根据书写顺序, 后来居上;
  3. 后面数字一定不能加单位;
  4. 只有相对定位,绝对顶诶,固定定位由此属性, 其余标准流, 浮动,静态定位都无此属性, 亦不可指定此属性.

6 四种定位总结

定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 不脱标，占有位置 可以 相对自身位置移动
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置

7. 定位模式的转换:

跟浮动一样, 元素添加了绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为行内块模式.
因此, 比如 行内元素如果添加了绝对定位或者固定定位, 浮动后, 可以不用转换模式, 直接给宽/高即可.

在css中有三个显示和隐藏的单词比较常见, 分别是: ** display、visibility 和 overflow**
它们的主要目的是让一个元素在页面中消失, 但是不在文档源码中删除.
最常见得失网站广告, 点击关闭不见了,但是刷新页面又重新显示.

十三、元素的显示与隐藏:

在css中有三个显示隐藏的单词比较常见, 分别是display、visibility和overflow.

1. display显示:

display设置或检索对象是否及如何显示.

display : none 隐藏对象
display:block 除了转换为块级元素之外，同时还有显示元素的意思

特点: 隐藏之后, 不再保留位置;

2. visibility可见性:

visibility设置或检索是否显示对象

visibility: visible  对象可视
visibility: hidden  对象隐藏

特点： 隐藏之后，继续保留原有位置

3. overflow 溢出:

overflow: 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

overflow: visible  　不剪切内容也不添加滚动条
overflow: auto 　 超出自动显示滚动条，不超出不显示滚动条
overflow: hidden  　不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow: scroll 　不管超出内容否，总是显示滚动条

02前端学习之CSS3(1)相关推荐

  1. 02前端入门HTML5 +CSS3+电商网页制作：CSS

    02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...

  2. 前端学习2——CSS3

    前端学习2--CSS3 0.css注释 /* 这是一条注释 */ 1.样式优先级 行内样式>内部样式>外部样式 1.1.行内样式 <p style="font-size:1 ...

  3. Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果

    css3过渡属性: 属性 描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...

  4. 03前端学习之CSS3(2)

    文章目录 十四.用户界面样式: 1. 鼠标样式(cursor): 2. 轮廓(outline) 3. 防止拖拽文本域(resize): 4. 垂直对齐(vertical-align): 4.1 取出图 ...

  5. 前端学习笔记—CSS3

    视频地址:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程 CSS基础认识 基础认识 中文名称: CSS:层叠样式表(Cascading style sheets) 作用 ...

  6. 从零开始前端学习[32]:css3中新增加的一些文本属性

    css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向 多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...

  7. 好程序员web前端学习路线分享css3中的渐进增强和降级

    好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...

  8. 前端学习笔记之CSS3基础语法与盒模型（二）

    前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...

  9. 前端学习六——html5+CSS3

    前端学习六--html5+CSS3 HTML5 H5新增语义标签 多媒体标签 audio音频标签 audio音频标签常见属性 音频标签语法 视频标签video 视频标签语法 H5新增input表单.表 ...

最新文章

  1. GCD BZOJ2818 [省队互测] 数学
  2. linux删除旧网卡,如何删除旧网卡驱动
  3. C语言实现UDP网络通信(附服务端和客服端完整源码)
  4. java嵌入groovy脚本_Java封装groovy脚本引擎并支持脚本包含(include)功能
  5. JS引用类型 -- Array类型
  6. 查看linux IO地址范围
  7. 我的新书终于写完了。
  8. linux连接oracle数据库中文显示乱码
  9. SSLOJ 1336.膜拜神牛
  10. linux 下安装adobe flash的关键。
  11. 在Eclipse下出现dobbo索引错误，解决方案
  12. 电脑连android手机上网,电脑通过手机3G上网（android安卓手机）的几种方法
  13. python计算sinx的程序_Python Tensorflow sin()用法及代码示例
  14. python开发录屏软件_Python移动端录屏库
  15. 苹果造车简史：库克能靠造车封神吗？
  16. 新瑞鹏“狂飙”，宠物医疗是门好生意吗？
  17. android 关闭jack_编译Android时禁用Jack Server
  18. 漫说Android 中SurfaceView蕴含的美
  19. 大白话5分钟带你走进人工智能-第30节集成学习之Boosting方式和Adaboost
  20. Strlen和Sizeof的区别

热门文章

  1. Archlinux和Windows双系统安装
  2. java框架 - web服务器
  3. JAVA输出希腊union,希腊十大旅游胜地（上）
  4. vue兼容IE11浏览器空白页等一系列问题之踩坑全过程
  5. vm虚拟服务器添加网卡,win7系统下vmware虚拟机添加加载无线网卡的方法
  6. python : 新概念英语 课文转为html
  7. SSD测试专题（一）
  8. 根据身份证号码（15位或者18位）自动获取出生日期及性别
  9. 从词嵌入到文档距离论文笔记（From Word Embeddings To Document Distances）
  10. 使用DiskMan(DiskGen）恢复被删除的分区