编程部落

前端:CSS(_

作者：

风君子

在

文章目录
  • 我们可以给标签指定多个类名，从而达到更多的选择目的。
  • 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。 白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。 比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
  • 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 伪娘 类 .one 伪类 :link 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
  • 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
  • CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性） background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
  • 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
  • 为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距： 大多数浏览器body中都有自己默认的内外边距所以需要清空 * {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */ } div 默认没有内外边距 注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。 我们尽量不要给行内元素指定上下的内外边距就好了。
  • 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

        • CSS初识
          • 引入CSS样式表（书写位置）
            • 内部样式表
            • 行内式（内联样式）
            • 外部样式表（外链式）
            • 三种样式表总结（位置）
          • CSS样式规则
        • CSS基础选择器
          • 标签选择器（元素选择器）
          • 类选择器
      • 多类名选择器
          • 多类名选择器
          • id选择器
            • id选择器和类选择器区别
          • width属性100%和auto的区别
          • 通配符选择器
          • CSS字体样式属性
            • font-size:字号大小要带单位px才有效
            • font-family:字体
            • font-weight:字体粗细
            • font-style:字体风格
            • font:综合设置字体样式 (重点)
        • CSS外观属性
          • color:文本颜色
            • line-height:行间距
            • text-align:水平对齐方式
            • text-indent:首行缩进
            • text-decoration 文本的装饰
          • CSS复合选择器
            • 交集选择器
            • 并集选择器
            • 后代选择器
      • 子元素选择器
      • 伪类选择器
          • 链接伪类选择器
          • 标签的类型(显示模式)
            • 块级元素(block-level)
            • 行内元素(inline-level)
            • 块级元素和行内元素
          • 行内块元素（inline-block）
          • 标签显示模式转换 display
          • 行高的测量
        • CSS 三大特性
          • CSS层叠性
          • CSS继承性
          • CSS优先级
          • CSS特殊性（Specificity）
        • CSS 背景(background)
          • 背景图片(image)
          • 背景平铺（repeat）
          • 背景位置(position)
          • 背景附着
          • 背景简写
          • 背景透明(CSS3)
          • 导航栏案例
        • 盒子模型（CSS重点）
          • 盒子模型（Box Model）
          • 盒子边框（border）
            • 盒子边框写法总结表
            • 表格的细线边框
          • 内边距（padding）
            • 内边距的问题
          • 外边距（margin）
            • 外边距实现盒子居中
            • 文字盒子居中图片和背景区别
        • 清除元素的默认内外边距
      • 外边距合并
        • 相邻块元素垂直外边距的合并
        • 嵌套块元素垂直外边距的合并
          • 盒子模型布局稳定性
          • 圆角边框(CSS3)
          • 盒子阴影(CSS3)
        • 浮动(float)
          • 普通流(normal flow)
        • 浮动(float)
          • 什么是浮动？
          • 浮动目的
          • 浮动详细内幕特性
        • 版心和布局流程
          • 布局流程
          • 一列固定宽度且居中
          • 两列左窄右宽型
          • 通栏平均分布型
          • 清除浮动
            • 为什么要清除浮动
          • 清除浮动本质
          • 清除浮动的方法
          • 额外标签法
          • 父级添加overflow属性方法
          • 使用after伪元素清除浮动
          • 使用before和after双伪元素清除浮动

    CSS(Cascading Style Sheets) 美化样式

    CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

    CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

    内嵌式是将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中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

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

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

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

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

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

    注意： link 是个单标签哦!!!

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

    href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
    样式表 优点 缺点 使用情况 控制范围
    行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
    内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中）
    外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多）

    使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
    在这里插入图片描述
    在上面的样式规则中:

    1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
    2.属性和属性值以“键值对”的形式出现。
    3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
    4.属性和属性值之间用英文“:”连接。
    5.多个“键值对”之间用英文“;”进行区分。
    可以用段落 和 表格的对齐的演示。

    标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

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

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

    标签选择器 可以把某一类标签全部选择出来 div span

    类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

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

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

    我们可以给标签指定多个类名，从而达到更多的选择目的。

    我们可以给标签指定多个类名，从而达到更多的选择目的。
    注意：

    1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关样式在下显示。
2. 各个类名中间用空格隔开。
3.一个标签中只允许一个class属性 
<div class="font20 red fontw">多类名</div>

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

    <div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

    id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

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

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

    用法基本和类选择器相同。

    W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

    类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

    id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

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

    1.width：100%
    100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度
    2.width：auto
    auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度
    注意：上述父元素的宽度都是父元素真正的宽度，即父元素width属性值
    当父元素width值为500px的时候（不论父元素是否有内外边距以及边框），示例如下：

    id选择器使用“*”进行标识，后面紧跟id名，其基本语法格式如下：

    * {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } //不建议使用

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

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

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

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

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

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

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

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

    italic：浏览器会显示斜体的字体样式。

    oblique：浏览器会显示倾斜的字体样式。

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

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

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

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

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

    1.预定义的颜色值，如red，green，blue等。

    2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
    两两相同可以缩写 如:f00 == ff0000
    3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

    需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

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

    一般情况下，行距比字号大7.8像素左右就可以了。

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

    left：左对齐（默认值）

    right：右对齐

    center：居中对齐

    是让盒子里面的内容水平居中， 而不是让盒子居中对齐

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

    1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

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

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

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

    交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。(用的较少)
    在这里插入图片描述

    记忆技巧：

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

    比如：   p.one   选择的是： 类名为 .one  的 段落标签。

    用的相对来说比较少，不太建议使用。

    并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
    在这里插入图片描述
    记忆技巧：

    并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。

    比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

    他和他，在一起， 在一起 一起的意思

    后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
    在这里插入图片描述
    子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

    子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
    在这里插入图片描述

    白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
    比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

    伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

    伪娘

    类 .one

    伪类 :link

    为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

    • :link /* 未访问的链接 */

    • :visited /* 已访问的链接 */

    • :hover /* 鼠标移动到链接上 */

    • :active /* 选定的链接 */

      注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao

    a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}
a:hover .mask { /*：hover  鼠标经过a 然后 a 里面的 mask 就显示出来 所以这里用 后代选择器*/ display: block; /*显示出来*/}

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

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

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

    块级元素的特点：

    （1）总是从新行开始

    （2）高度，行高、外边距以及内边距都可以控制。

    （3）宽度默认是容器的100%(浏览器中不指定宽度默认是通栏的)

    （4）可以容纳内联元素和其他块元素。

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

    常见的行内元素有<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. 链接里面不能再放链接。
    块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

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


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

    行内块元素的特点：
    （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
    （2）默认宽度就是它本身内容的宽度。 可以设置width : 100%
    （3）高度，行高、外边距以及内边距都可以控制。

    块转行内：display:inline;

    行内转块：display:block;

    块、行内元素转换为行内块： display: inline-block;
    行内元素 和 行内块元素 可以当成文本来操作
    此阶段，我们只需关心这三个，其他的是我们后面的工作。

    记住 :

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

    在这里插入图片描述
    在这里插入图片描述
    行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。
    如:

    div {height: 50px;width: 200px;background: pink;line-height: 50px;text-align: center;} 

    a {width: 200px;height: 50px;/* background-color: orange; */display: inline-block;  /* 把a 行内元素转换为行内块元素 */text-align: center;  /* 文字水平居中 */line-height: 50px;  /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */color: #000;font-size: 22px;text-decoration: none;  /* 取消下划线 文本装饰 */   }

    做法就是： 文字的行高等于盒子的高度。
    上距离和下距离总是相等的，因此文字看上去是垂直居中的。在这里插入图片描述

    行高由上距离文字下距离三个共同组成的:
    不给行高的情况下默认行高是文字的高度,上距离和下距离为零

    如果 行高 等 height 高度 文字会 垂直居中

    如果行高 大于 高度 文字会 偏下

    如果行高小于高度 文字会 偏上

    层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

    所谓层叠性是指多种CSS样式的叠加。

    是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

    比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

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

    1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
    2. 样式不冲突，不会层叠
    CSS最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

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

    简单的理解就是： 子承父业。

    CSS最后的执行口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。

    注意：

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

    定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

    在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

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

    关于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   #nav p       ----->       0,1,0,1

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

    1. 继承的 权重是 0

    总结优先级：

    1. 使用了 !important声明的规则。
    2. 内嵌在 HTML 元素的 style属性里面的声明。
    3. 使用了 ID 选择器的规则。
    4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
    5. 使用了元素选择器的规则。
    6. 只包含一个通用选择器的规则。
    7. 同一类选择器则遵循就近原则。
    总结：权重是优先级的算法，层叠是优先级的表现

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

    background-color 背景颜色
    background-image 背景图片地址
    background-repeat 是否平铺
    background-position 背景位置
    background-attachment 背景固定还是滚动
    背景的合写（复合属性）
    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    语法：

    background-image : none | url (url)

    参数：

    none : 　无背景图（默认的）
    url : 　使用绝对或相对地址指定背景图像

    background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

    小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

    注意： 背景图片不占大小与插入图片不同
    语法：

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

    参数：

    repeat : 　背景图像在纵向和横向上平铺（默认的）

    no-repeat : 　背景图像不平铺

    repeat-x : 　背景图像在横向上平铺

    repeat-y : 　背景图像在纵向平铺

    设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

    语法：

    background-position : length || lengthbackground-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坐标。
    3. positon后面可以跟方位名词 他们之间可以没有上下顺序
    4. position 如果只写一个方位名词，另外一个默认是居中的
    5. position 后面也可以跟 值px 但是 必须有顺序 x 在前面 y 后面 不能颠倒
      实际工作用的最多的，就是背景图片居中对齐了。

    语法：

    background-attachment : scroll | fixed

    参数：

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

    说明：

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

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

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

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

    CSS3支持背景半透明的写法语法格式是:

    background: rgba(0,0,0,0.3);//纯黑色的0.3

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

    注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

    使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

    <head><meta charset="utf-8"><style>body {background-color: #000;}a {width: 200px;height: 50px;/* background-color: orange; */display: inline-block;  /* 把a 行内元素转换为行内块元素 */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><a href="#">专区说明</a><a href="#">申请资格</a><a href="#">兑换奖励</a><a href="#">下载游戏</a></body>

    其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

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

    所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

    边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。
    语法：

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

    边框属性—设置边框样式（border-style）

    边框样式用于定义页面中边框的风格，常用属性值如下：

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

    设置内容 样式属性 常用属性值
    上边框 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:四边宽度 四边样式 四边颜色; 
    	border-top: 1px solid red; /*上边框*/border-bottom: 2px solid green; /*下边框*/border-left: 1px solid blue;border-right: 5px solid pink;border: 1px solid red;

    以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。

    table{ border-collapse:collapse; } collapse 单词是合并的意思

    border-collapse:collapse; 表示相邻边框合并在一起。

    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 顺时针 

    非常严重的问题， padding 会撑开 带有 widht 和height盒子 border也是
1. 我们要求这个 div 就是标准的 200 * 200   
2. 但是我们给了padding就撑开盒子了  240 
3. 问我们怎样能保证盒子 不超过 200 * 200

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

    margin-top:上外边距

    margin-right:右外边距

    margin-bottom:下外边距

    margin-left:上外边距

    margin:上外边距 右外边距 下外边距 左外边

    取值顺序跟内边距相同。

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

    1. 必须是块级元素。 行内块不起作用
    2. 盒子必须指定了宽度（width）

    然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

    实际工作中常用这种方式进行网页布局，示例代码如下：

    .header{ width:960px; margin:0 auto;}
    1. 文字水平居中是 text-align: center/可以让盒子里面的内容(文字 行内元素 行内)居中对齐
    2. 盒子水平居中 左右margin 改为 auto
    3. 只要满足盒子的margin左右auto 就能让盒子水平居中对齐
    4. 盒子必须设置宽度
    text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */
    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 */}

    为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
    大多数浏览器body中都有自己默认的内外边距所以需要清空

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

    div 默认没有内外边距
    注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。

    我们尽量不要给行内元素指定上下的内外边距就好了。

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

    当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
    在这里插入图片描述
    解决方案： 避免就好了。

    对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
    在这里插入图片描述

    解决方案：

    1. 可以为父元素定义1像素的上边框或上内边距。
    2. 可以为父元素添加overflow:hidden。
      /*外盒尺寸计算（元素空间尺寸）*/Element空间高度 = content height + padding + border + marginElement 空间宽度 = content width + padding + border + margin/*内盒尺寸计算（元素实际大小）*/Element Height = content height + padding + border （Height为内容高度）Element Width = content width + padding + border （Width为内容宽度）

    注意：

    1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

    2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

    3、如果一个盒子没有指定宽度则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。

    开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

    答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
    但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
    按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

      width >  padding  >   margin

    原因：

    1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

    2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

    3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

    从此以后，我们的世界不只有矩形。radius 半径（距离）

    语法格式：

    border-radius: 50%;   让一个正方形  变成圆圈

    语法格式：

    box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YaJH5Iu9-1583130960244)(media/1498467567011.png)]

    1. 前两个属性是必须写的。其余的可以省略。
    2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
    div {width: 200px;height: 200px;border: 10px solid red;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);  *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);}

    这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。

    前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

    CSS的定位机制有3种：普通流（标准流）、浮动和定位。

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

    浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

    后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释）
    在这里插入图片描述

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

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

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

    浮动其实就是为了让块级元素能在一行内显示方便布局 与 display: inline-block区别在于 两个块级之间无缝隙

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

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

    在这里插入图片描述

    2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

    3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

    总结： 浮动 —>

    浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置

    float 浮 漏 特

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

    阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

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

    为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

    1、确定页面的版心（可视区）。

    2、分析页面中的行模块，以及每个行模块中的列模块。

    3、制作HTML结构 。

    4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

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

    比如小米 小米官网

    在这里插入图片描述

    比如锤子 锤子官网

    我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好

    由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

    准确地说，并不是清除浮动，而是清除浮动后造成的影响

    如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

    在CSS中，clear属性用于清除浮动，其基本语法格式如下：

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

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

    如果一个盒子清楚了浮动那么父盒子会自动检测浮动的自盒子的高度 以最高的为准
    优点： 通俗易懂，书写方便

    缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

    可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

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

    优点： 代码简洁

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

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

    使用方法：

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

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

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

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

    注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

    使用方法：

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

    优点： 代码更简洁

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

    代表网站： 小米、腾讯等

    更多文章

    评论

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注

    站内搜索

    标签云

    iphone 三星 信用卡 信贷 华为 小米 微软 快科技 手机 投资理财 支付宝 特斯拉 理财知识 电脑 科技 程序 股票 芯片 苹果 贷款 路由器 银行 银行卡 额度

    热门文章

    友情链接