选择权

通配符选择器 *

权重:0

符号：*

*{
background:red;
}

标签选择器

权重：1

例子：标签名+{}，这一类标签都能起作用

<style>
     p{
         background:darkcyan;
     }
</style>

类选择器

权重：10

起名字：在开始标签里面 class=“名字”

选取：.+”name”

.p2{
background:green;
}

属性选择器

权重：10;

用法：

• [属性]{},把具有这个属性的所有标签选中

• [属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中

  [index]{ background:darkorange; } [index="a1"]{ background:darkorchid; }

id选择器

权重：100

用法:

• 在开始标签里面 id=”name1”
• 使用的时候：#name1{}

id选择器和class选择器不同，例如在页面中写了一个id=“name1”，那么这个页面中不允许出现第二个相同的，这个是规定。id=“name1” 是唯一的

<style>
    #p1{
      background:green;  
    }   
</style>
<p id="p1" class="p1">段落1</p>

子选择器

权重：组合的选择器之和

连接符：> （权重0）

意思：结合生活中群代关系，“子”可以理解成“儿子”，例如下面的div>h1 代表选中div里面的儿子元素，并且是h1的这一类标签

<style>
      div>h1{
          background:green;
      }
</style>
<div class="main">
<p>p1</p>
<h1>h1</h1>
<div>
<span>span</span>
</div>
</div>

后代选择器

权重：组合的选择器权重之和

连接符： 空格

意思：结合生活中的裙带关系，这个后代就是不论是儿子还是孙子还是…只要是后代就符合

<style>
      div span{
          background:green;
      }
</style>
<div class="main">
<div>
<span>span</span>
</div>
<span>span</span>
</div>

分组选择器

权重：组合选择器之和

连接符：逗号，

意义：将相同的代码提取出来，减少冗余

下面列子，.box1>p1 和.box2 具备同样的样式

.box1>p1,.box2{
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
<div class="box1">
<p>p1</p>
</div>
<p class="box2">box2</p>

交集选择器

权重：组合的选择器之和

符号：没有

意思：有多个选择器组成

<style>
    .box1.current{
        background:green;
    }
</style>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>

相邻兄弟选择器

权重：组合选择器之和

连接符号：+

代表的意思：以下面为例，h1+p 代表的是选中与h1相邻的p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

通用兄弟选择器

权重：组合选择器之和

连接符号：~

代表的意思：以下面为例，h1~p 代表的是选中h1下面所有的兄弟p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

伪类选择器

a标签的四种状态，它这四种状态有一定的顺序，在网络上被称为“爱恨原则”。

重点记住：hover 即可，其它几个不兼容。

<style>
        a{
            font-weight: bold;
            font-size:100px;
        }
        /* 默认链接的文字颜色 */
       a:link{
           color:green;
       }
       /* 访问过后的文字颜色 */
       a:visited{
           color:gold;
       }
       /* 鼠标滑上 */
       a:hover{
           color:hotpink;
       }
       /* 点击链接时候的 */
       a:active{
           color:darkcyan;
       }
</style>

table 表格

完整形式的table

caption 代表的表格的标题 tr表示每一行，td表示每一个单元格，th表示的是表头（跟td一样，只是更加有语义化，文字加粗）

<table border="1">
<caption>成绩表</caption>
<thead>
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分：</td>
<td>总分：</td>
<td>总分：</td>
</tr>
</tfoot>
</table>

简单表格

<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>

完整和简单表格的区别？

完整版的表格更加有语义化，除此之外，我们在结构中可以随意的更改thead tbody tfoot 的顺序，但是在浏览器中，显示的顺序还是正常的（thead—tbody–tfoot）

table 的属性

• 边框 ： border

• 内容到边框的距离：cellpadding

• 边框到边框之间的距离：cellspacing

td 的属性

• 合并行：rowspan
• 合并列：colspan

table 样式

• 合并边框线：border-collapse:collapse

• 宽度平均分布：table-layout：fixed （前提：table 要写宽度）

绝对路径和相对路径

绝对路径：就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)例如：

• C:\xyz\test.txt 代表了test.txt文件的绝对路径。
• www.sun.com/index.htm也代表了一个URL绝对路径。

相对路径：相对与某个基准目录的路径。

• 同级目录直接 写名字即可

• 下级目录："/" 表示

• 上级目录："../" 一个../ 代表回到上一级目录， 两个“../”代表回到上两级目录

css 的三大特性

• 继承性

• 层叠性

• 优先级

一 、继承性

什么是继承性？

官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。简单说就是给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。

哪些属性具有继承性

并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility 、以及普通文档流中的宽度是可继承的

有继承性的属性罗列

参考链接：blog.csdn.net/qq_41803637…

（1）字体系列属性

属性

说明

font各个系列

font的各个系列，包括前缀为font的各个属性

（2）文本系列属性

属性

说明

text-indent

文本缩进

text-align

文本水平对齐

line-height

行高

word-spacing

增加或减少单词间的空白（即字间隔）

letter-spacing

增加或减少字符间的空白（字符间距）

text-transform

控制文本大小写

direction

规定文本的书写方向

color

文本颜色

（3）元素可见性

属性

说明

visibility

规定元素是否可见。

（4）表格布局属性

属性

说明

caption-side

设置表格标题的位置

border-collapse

设置表格的边框是否被合并为一个单一的边框

border-spacing

属性设置相邻单元格的边框间的距离

empty-cells

设置是否显示表格中的空单元格

table-layout

用来显示表格单元格、行、列的算法规则

（5）列表布局属性

属性

说明

list-style的各个系列

简写属性在一个声明中设置所有的列表属性

（6）生成内容属性

属性

说明

quotes

设置嵌套引用（embedded quotation）的引号类型

（7）光标属性

属性

说明

cursor

规定要显示的光标的类型（形状）

（8）页面样式属性

属性

说明

page

检索或指定显示对象容器时使用的页面类型

page-break-inside

设置元素内部的 page-breaking 行为

orphans

设置或返回一个元素必须在页面底部的可见行的最小数量，只用于块级元素

windows

表示当页面内部要分页的时候必须在页面顶部保留的最少行数

（9）声音样式属性

属性

说明

speak各个系列

指定内容是否会提供听觉方式

volume

指定发言的音量

voice-family

设置或检索当前声音类型

pitch

指定讲话声音

pitch-range

指定讲话声音的变化。

stress

讲话声音在指定的地方"重音"

richness

设置或检索当前声音的音色

azimuth

设置声音应该来自哪里

elevation

设置或检索当前声音的音源仰角

二、层叠性：

层叠性就是CSS处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。

如何处理：

1、如果权重相同的话，就看css代码的顺序，后面的会把前面的属性覆盖

2、如果权重不相同的话，谁权重大就听谁的。

三、权重

权重顺序
！important>内联样式>id>类>标签>通配符>继承>浏览器默认

注意 尽量少用！important 和 内联样式

补充一个！important, 强制使用此样式

<style>
    .box1{
        color:lightblue !important;
    }
    #box1{
        color:red;
    }
    </style>
    
     <p id="box1" class="box1">box1</div>

常用的表单元素

• input

• type： text 文本输入框

• type：password 密码输入框

• type：reset 重置

• type：submit 提交

• type: button 按钮

• type：radio 单选

• type: checkbox 多选

• 属性：placeholder 提示文字

• 属性：autofocus 自动获取焦点

• 属性：required 校验（非空）

• 属性：checked （input的默认选中）

• button ：按钮(默认也有提交表单的功能，想要禁止，添加type=“button”这个属性便可以禁止)

• textarea 文本域（评论框）

• select :下拉框

• 属性： selected 默认选中某项

• 属性：disabled 禁止选中

控制input 或者textarea 点击时候出现一个蓝色的线，以及textarea 默认改变尺寸

<style>
input,textarea{
//  去除蓝色线
         outline: none;
// 禁止改变textarea的 尺寸
         resize: none;
}
</style>

<form action="">
<!-- 文本输入框 -->
<input type="text" placeholder="请输入用户名" autofocus required>
<!-- 密码输入框 -->
<input type="password" placeholder="请输入密码" required>
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
<!-- 按钮 -->
<input type="button" value="重置">
<!-- 单选 -->
<input type="radio">
<!-- 多选 -->
<input type="checkbox">
<!-- 按钮 -->
<button type="button">支付</button>
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id="">
<option value="">请选择你来自的城市</option>
<option value="">郑州</option>
<option value="" disabled>河北</option>
<option value="">湖北</option>
<option value="" selected>湖南</option>
</select>
</form>

单选功能的实现

把要实现单选功能的一组表单，添加一个相同的name值

男 <input name="sex" type="radio">  女 <input type="radio"  name="sex">

文字关联功能

用label 标签把文字包括起来，让里面的for属性值和表单上面id名字值一致即可。

<label for="man">男</label> <input id="man" name="sex" type="radio">
<label for="woman">女</label> <input id="woman" type="radio"  name="sex">

盒模型

盒模型是一种写网页的思维模式，每一个元素都可以看成一个盒子。为了方便记忆，我们可以把它想象成手机盒子。 手机就是content 部分，白色填充物就是padding部分，手机盒子的边框就是border，多个手机盒子之间距离 就是margin。

盒模型包含哪几部分

• content：主要内容区域

• padding：元素盒子与内容直接的内填充

• border：元素盒子的边框

• margin：元素与元素之间的距离

计算盒子的总大小

总盒子的宽度=content的width+ 2*padding+2*border；

总盒子的高度=content的height+2*padding+2*border;

盒模型的分类

• 标准盒模型： box-sizing：content-box；
• ie盒模型： box-sizing： border-box;

标准盒模型中，代码里面所写的width 和height 指的是盒模型中content部分的宽和高。

ie盒模型中，代码里面缩写width和height指的是总盒子的宽和高 (在实战项目中经常用这个)

padding顺序规律

<style>
      span{
          background:green;
          /*  上、右、下、左 顺时针方向 */
          /* padding:10px 50px 100px 200px; */
          /* 上、左右、下 */
          /* padding:10px 50px 100px; */
          /* 上下、左右 */
          /* padding:10px 50px; */
          /* 四个方向 */
          padding:50px;
          display:inline-block;
          border:5px solid gold;
      }
</style>

面试题 margin值穿透：

有一个大盒子里面包含小盒子，如果大盒子没有设置padding-top 或者是border-top，直接给小盒子设置margin-top，大盒子会跟着小盒子一起向下移动，这个现象就是margin值穿透问题。

解决的办法

• 给大盒子加border-top:1px solid transparent ;

• 给大盒子增加overflow:hidden;

• 既然margin-top有这样的问题，我们可以给大盒子增加padding-top，来规避这个问题。

  .par{ width:300px; height:300px; background:green; /* 第一种解决办法 */ /* border-top:1px solid transparent; */ /* 第二种 */ /* padding-top:50px; */ /* padding-top:1px; */ /* 第三种 */ overflow:hidden; } .child{ width:100px; height:100px; background:gold; margin-top:50px; }

margin值合并的问题

有两个兄弟元素：box1，box2垂直排列，我给box1设置margin-bottom:30px; 再给box2设置margin-top:100px; 这两个元素之间的距离并不是两者之和，而是取最大的那个值。

<style>
        *{
            margin:0;padding:0;
        }
      div{
          width:200px;
          height:200px;
      }
      .box1{
          background:green;
          margin-bottom:30px;
      }
      .box2{
          background:gold;
          margin-top:100px;
      }
</style>
<div class="box1"></div>
<div class="box2"></div>

盒模型相关属性补充

1) width宽度

min-width 最小宽度

max-width 最大宽度

2) height高度

min-height 最小高度

max-height 最大高度

3)padding 内填充

• 左填充：padding-left

• 右填充：padding-right

• 上填充：padding-top

• 下填充：padding-bottom

4）border 详解

1、边框的宽度：border-width

可能的值

值

描述

thin

定义细的边框。

medium

默认。定义中等的边框。

thick

定义粗的边框。

length

允许您自定义边框的宽度。

inherit

规定应该从父元素继承边框宽度。

2、指定边框的样式：border-style

属性值

值

描述

none

定义无边框。

hidden

与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted

定义点状边框。在大多数浏览器中呈现为实线。

dashed

定义虚线。在大多数浏览器中呈现为实线。

solid

定义实线。

double

定义双线。双线的宽度等于 border-width 的值。

groove

定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge

定义 3D 垄状边框。其效果取决于 border-color 的值。

inset

定义 3D inset 边框。其效果取决于 border-color 的值。

outset

定义 3D outset 边框。其效果取决于 border-color 的值。

inherit

规定应该从父元素继承边框样式。

3、边框的颜色：border-color

border 复合属性

div{
   border:1px solid green;
}

5）margin

• 离左边的距离：margin-left

• 离左右边的距离：margin-right

• 离上边的距离：margin-top

• 离下边的距离：margin-bottom

想让两个块级元素在一行显示，转换为行内块产生的问题

一、两个块级元素之间会有缝隙（原因回车造成的）

解决的办法：

• 在结构中消除换行符
• 给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。

二、如果一个里面设置文字，另一个没有设置，默认是基线对齐，会产生下掉的情况。具体的办法，改变对齐的方式。

/* 顶线对齐 */
vertical-align: top;
/* 中线对齐 */
vertical-align: middle;
/* 底线对齐 */
vertical-align: bottom;
/* 默认基线对齐 */
vertical-align: baseline;

作业：百度登录实战

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration: none;
    }
    .main{
        width:600px;
        margin:0 auto;
    }
    .main input{
        width:350px;
        height:40px;
        border:1px solid #666;
    }
    .item{
        margin-bottom:20px;
    }
    .item>span{
        width:100px;
        display:inline-block;
        text-align: right;
        margin-right:20px;     
    }
    .main .code{
        width:178px;
    }
    .getCode{
        width:170px;
        height:42px;
    }
    .main .choose{
        width:13px;
        height:13px;
        margin-left:120px;
        vertical-align: middle;
    }
    .read{
        font-size:12px;
    }
    .read a{
        color:#1b66c7;
    }
    .register{
        width:350px;
        height:50px;
        background:lightblue;
        margin-left:120px;
        margin-top:20px;
        color:#fff;
    }
</style>
</head>
<body>
<div class="main">
<div class="item">
<span>用户名</span>
<input type="text" placeholder="请输入用户名">
</div>
<div class="item">
<span>手机号</span>
<input type="text" placeholder="可用于登录和找回密码">
</div>
<div class="item">
<span>密码</span>
<input type="password" placeholder="请设置密码">
</div>
<div class="item">
<span>验证码</span>
<input class="code" type="text" placeholder="请输入验证码">
<button class="getCode">获取验证码</button>
</div>
<div class="read">
<input type="checkbox" class="choose"><span>阅读并接受</span> <a href="">《百度用户协议》</a>及<a href="">《百度隐私权保护声明》</a>
</div>
<button class="register">注册</button>
</div>
</body>
</html>

input的placeholder 的默认样式

::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #9B9B9B;
        }

        ::-moz-placeholder {
            /* Firefox 19+ */
            color: #9B9B9B;
        }

        :-ms-input-placeholder {
            /* IE 10+ */
            color: #9B9B9B;
        }

        :-moz-placeholder {
            /* Firefox 18- */
            color: #9B9B9B;

        }

百度登录改版

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #2e58ff;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: url("1.jpg") center center no-repeat;
            background-size: cover;

        }

        ::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #9B9B9B;
        }

        ::-moz-placeholder {
            /* Firefox 19+ */
            color: #9B9B9B;
        }

        :-ms-input-placeholder {
            /* IE 10+ */
            color: #9B9B9B;
        }

        :-moz-placeholder {
            /* Firefox 18- */
            color: #9B9B9B;

        }

        .main {
            width: 491px;
            height: 518px;
            border: 1px solid green;
            
            padding:30px 39px;
            margin:0 auto;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            position:absolute;
            right:100px;
            top:50px;
        }

        h3 {
            height: 52px;
            line-height: 52px;
            font-size: 36px;
            margin-bottom: 4px;
        }

        .item {
            margin-bottom: 20px;
            font-size:14px;
        }

        .tips {
            font-size: 14px;
        }

        .main input {
            width: 343px;
            height: 40px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #E0E0E0;
        }

        .item span {
            width: 68px;
            display: inline-block;
        }

        .first {
            margin-top: 30px;
        }

        .main .getCode {
            width: 206px;
            margin-right: 10px;
        }

        .item button {
            width: 126px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #E0E0E0;
            background: #fff;
        }
        .register{
            width:100%;
            height:50px;
            line-height: 50px;
            text-align: center;
            color:#fff;
            background-color: #BDCEFC;
            border:none;
        }
        .read{
            font-size: 12px;
            margin-top:30px;
        }
        .read input{
            width:13px;
            height: 13px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="main">
        <h3>欢迎注册</h3>
        <p class="tips">已有帐号？<a href="">登录</a></p>
        <div class="item first">
            <span>用户名</span><input type="text" placeholder="请设置用户名">
        </div>
        <div class="item">
            <span>手机号</span><input type="text" placeholder="可用于登录和找回密码">
        </div>
        <div class="item">
            <span>密码</span><input type="text" placeholder="请设置登录密码">
        </div>
        <div class="item">
            <span>验证码</span><input class="getCode" type="text" placeholder="请输入验证码"><button>获取验证码</button>
        </div>
        <button class="register">注册</button>
        <div class="read">
            <input type="checkbox">阅读并接受<a>《百度用户协议》</a>及 <a>《百度隐私权声明》</a>
        </div>
    </div>
</body>

</html>

百度登录框讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        .main{
            font-size:14px;
            width:500px;
            margin:0 auto;
            background:lavender;
            padding:50px;
        }
        .main .item input{
            width:350px;
            height:40px;
            padding-left:10px;
            box-sizing: border-box;
        }
        .item{
            margin-bottom:30px;
        }
        .item span{
            width:65px;
            text-align:right;
            margin-right:10px;
            display:inline-block;
        }
        .read{
            text-align: center;
            font-size:12px;
            vertical-align: middle;
        }
        .read input{
            vertical-align: middle;
        }
        button{
            width:350px;
            height:50px;
            background:lightblue;
            text-align: center;
            display:block;
            margin:50px auto;
            border:none;
            color:#fff;
        }
        .main .item .code{
            width:178px;
        }
        .getCode{
            width:160px;
            display:inline-block;
            height:40px;
            line-height: 40px;
            text-align: center;
            background:lightblue;
            margin-left: 8px;
            color: #fff;

        }
    </style>
    
</head>
<body>
    <div class="main">
        <div class="item">
            <span>用户名</span> 
            <input type="text" placeholder="请设置用户名">
        </div>
        <div class="item">
                <span>手机号</span> 
                <input type="text" placeholder="请输入手机号">
        </div>
        <div class="item">
                <span>密码</span> 
                <input type="text" placeholder="请输入密码">
        </div>
        <div class="item">
                <span>验证码</span> 
                <input  class="code" type="text" placeholder="请输入验证码">
                <a href="" class="getCode">获取短信验证码</a>
        </div>
        <div class="read">
            <input type="checkbox" >
                阅读并接受<a href="">《百度用户协议》</a>
                及<a href="">《百度隐私权保护声明》</a>
        </div>
        <button>注册</button>
    </div>
</body>
</html>

浮动

浮动值

• float:left; 左浮动

• float:right;右浮动

• float:none; (默认的，没有浮动)

浮动的特点

• 脱离正常文档流（不占位置）

• 左浮动，右浮动的方向针对的是父级

• 正常文档流中，宽度是可继承的，但是一旦浮动，宽度不能再继承父级的，而是由自身内容大小决定。

• 行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用。

• 浮动的本质：最初的时候是为了实现图文混排，场景：有一张图片，一些文字，如果给图片设置浮动，文字就会环绕图片进行排列。

面试题 浮动造成的父级”盒子塌陷”问题如何解决

• 直接给浮动元素的父级增加height

• 给浮动元素的父级增加overflow:hidden;(超出隐藏)

• 给浮动元素父级的末尾增加一个元素，给这个元素设置clear：both;样式

  .last{ clear: both; }

• 在项目中，直接把下面的clearfix样式粘贴到你的css中，哪个元素浮动，就给赶紧给父级增加clearfix这个类名。（它的本质和第三种方法是一样的）

  .clearfix:after{ content:""; font-size:0; display:block; height:0; visibility: hidden; clear: both; } .clearfix{ *zoom:1; }