干货很多，请耐心阅读😉

一、css

1.简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.基础性质

（1）层叠性

当对同一标签设置相同样式时，效果采取就近原则

<style>/* 样式冲突，采取的是就近原则 *//* 样式不冲突，不会层叠 */div {color: red;font-size: 12px;}div {color: pink;}</style>body部分：<div>长江后浪推前浪，前浪死在沙滩上</div>

根据就近原则，最后显示的为粉色，效果如下：

（2）继承性

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

子元素会继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）

<style>div {color: purple;font-size: 14px;}</style>body部分：<div><p>龙生龙，凤生凤，老鼠的儿子会打洞</p></div>

效果如下：

二、选择器

1.标签选择器

标签选择器，顾名思义，在css样式中写标签，后面加花括号，里面写要修改的样式

代码如下：

<style>p {color: green;}div {color: pink;}</style>body部分：<p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>

效果如下：

2.类选择器

你会发现，如果使用标签选择器，会使整个页面的这一标签全部改成某一样式，不能专一修改某一个标签，这时可以使用类选择器

使用方法：在css定义时使用点（英文状态）+样式名，调用时使用class=“样式名”

css部分：<style>.red {color: red;}.star-sing {color: green;}</style>body部分：<ul><li class="red">疯人院</li><li>斗牛</li><li>好想爱这个世界啊</li><li>与火星孩子的对话</li><li class="star-sing">七重人格</li></ul><div class="red">我也想变红色</div>

效果如下：

3.id选择器

与类选择不同的是定义时使用井号+样式名，调用时使用id=“样式名”，

注意：id选择器一个页面中只能调用一次！！！！

代码如下：

css部分;#pink {color: pink;}body部分：<div id="pink">迈克尔杰克逊</div>

效果如下：

4.通配符选择器（*）

可以将所有的标签都修改成设定的样式

代码如下

css部分：<style>* {color: red;}/* *这里把 span div body html li 等等的标签都改成了红色 */</style>body部分：<div>我的</div><span>我的</span><ul><li>还是我的</li></ul>

效果如下：

5.后代选择器

语法规范：

1.元素一 元素二 {样式说明} 表示：选择元素一里面的所有元素二

2.元素一和元素二中间用空格隔开

3.元素二可以是儿子，也可以是孙子

代码如下：

css部分：<style>/* 我想把ol里的小li选出来改为pink色 */ol li {color: deeppink;}ol li a {color: yellow;}.nav li a {color: skyblue;}</style>body部分：<ol>变态<li>我是ol 的孩子</li><li>我是ol 的孩子</li><li>我是ol 的孩子</li><li><a href="#">我是孙子</a></li></ol><ul><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不会变化的</a></li></ul><!-- 若想单独修改底下这个ul 的li 可在下面的ul加类名，再用后代选择器 --><ul class="nav"><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不会变化的</a></li><li><a href="#">不会变化的</a></li><li><a href="#">不会变化的</a></li></ul>

效果如下：

6.子元素选择器

语法规范：

1.元素一>元素二{样式说明}

2.最终选择的是元素二

下面片段修改的是我是儿子的样式（a为nav的子元素）

代码如下：

css部分：<style>.nav>a {color: red;}</style>body部分：<div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>

效果如下：

7.并集选择器

语法规范：

元素一元素二之间用逗号隔开，（多个标签并集一般一行一个，后面跟逗号）

任何形式的选择器都可作为并集选择器的一部分

代码如下：

css部分：<style>/*把熊大熊二改为粉色*/div,p {color: pink;}</style>body部分：<div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul>

效果如下：

8.链接伪类选择器

css部分：<style>/* 1.未访问的链接 a:link 把没有点击过的（访问过的）链接选出来 */a:link {color: #333333; //灰色text-decoration: none;}/* 2. a:visited 选择点击过的（访问过的）链接 */a:visited {color: orange; }/* 3. a:hover 选择鼠标经过的那个链接 */a:hover {color: skyblue; }/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green; }</style>bpdy部分：<a href="#">小猪佩奇</a>

效果如下：

点击之前（未访问的链接）：

点击之后：

鼠标经过：

按下未弹起（截图时无法显示鼠标的手，实际上是按下未松开状态）：

三、盒子模型

1.第一类盒子模型

（1）组成

a.外边距（margin）

b.边框（border）

c.内边距（padding）

d.内容（width+height)

（2）外边距(margin)设置方法，(padding和border设置方法与margin设置方法相同)

外边距会有四个值，分别为margin-top/right/bottom/left

①当只给margin设置一个值(20px)的时候：

上下左右各有20px的外边距

css代码如下：

div {width: 200px;height: 200px;background-color: skyblue;margin: 20px;}

效果如图：

②当给margin设置两个值(10px，20px)的时候：

上下有10px的外边距，左右有20px的外边距

css代码如下：

div {width: 200px;height: 200px;background-color: skyblue;margin: 10px 20px;}

效果如图：

③当给margin设置三个值(5px，10px，20px)的时候：

上有5px的外边距，左右有10px外边距，下有20px外边距

css代码如下：

div {width: 200px;height: 200px;background-color: skyblue;margin: 5px 10px 20px;}

效果如图：

④当给margin设置四个值(5px，10px，15px，20px)的时候：

上有5px的外边距，右有10px外边距，下有15px外边距，左有20px外边距

简单来记就是：顺时针设置

css代码如下：

div {width: 200px;height: 200px;background-color: skyblue;margin: 5px 10px 15px 20px;}

效果如下：

通过上述设置你会发现，无论设置margin,padding还是border,都会撑大盒子的大小

拿当只给margin设置一个值(20px)，width=200px,height=200px的时候为例子，你会发现盒子的实际大小被撑到了240*240，这时会影响布局时设置一行内多个盒子所占位置，不容易计算。

这时，可以利用第二类盒子模型

2.第二类盒子模型

其实就是在上方代码的基础上，添加一条css样式：

box-sizing:border-box;

使得盒子大小不会受border,margin,padding影响

添加之前：

代码如下

* {box-sizing: border-box;}div {width: 200px;height: 200px;background-color: skyblue;border: 20px solid red;}

添加后：

3.应用及拓展

（1）内边距（padding）应用—撑开盒子

可用于导航栏字数不一样时撑开盒子，下面的代码设置到了.nav a中的padding

css部分：<style>.nav {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;line-height: 41px;}.nav a {display: inline-block;height: 41px;padding: 0px 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>body部分：<div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>

效果如下：

（2）外边距（margin）应用

① 块级盒子水平居中对齐

当给块级盒子设置margin: 0 auto时，可实现水平居中对齐

css部分：<style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;}</style>body部分：<div class="header"></div>

效果如下：

② margin负值的巧妙运用

当布局网页页面的盒子设置border时会发现两个盒子中间的border会重叠加粗，影响效果

这时可以通过设置margin-left：一个负值实现不重叠

css部分：<style>ul li {position: relative; //相对定位float: left; //向左浮动list-style: none;width: 150px;height: 200px;border: 2px solid skyblue;margin-left: -2px;}</style>body部分：<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

添加后效果如下：

（3）边框（border）拓展

a.三角元素制作

①正方形中四个三角形

通过设置border的四个值，width: 0，height: 0来显示三角形，10px为想看到的三角元素的大小

<style>.box1 {width: 0;height: 0;border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}</style>body部分：<div class="box1"></div>

效果如下：

②一个三角形

通过设置整体的border。注意要将颜色改为transparent，然后根据想要的三角形朝向方向设置属性，如果想要朝下的三角，可以通过设置border-top颜色，如果想要朝上的三角，设置border-bottom颜色

css部分：<style>.box2 {width: 0;height: 0;border: 10px solid transparent;border-top-color: violet;margin: 100px auto;}</style>body部分：<div class="box2"></div>

效果如下：

③购物页面的价格栏的制作

通过定位和矩形红色部分相连，做出效果

代码如下：

css部分：.box1 {// 三角样例width: 0;height: 0;/* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2.样式都是solid */border-style: solid;/* 3.上边框宽度要大，右边框 宽度稍小， 其余的边框改为0 */border-width: 100px 50px 0 0 ;}.price {width: 160px;height: 24px;border: 1px solid red;margin: 0 auto;line-height: 24px;text-align: center;}.miaosha {// 左侧红色矩形部分position: relative;float: left;width: 90px;height: 100%;background-color: red;font-weight: 700;color: white;margin-right: 8px;}.miaosha i {//三角元素position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.orign {//右侧灰色部分font-size: 12px;color: gray;text-decoration: line-through;}</style>body部分：<div class="box1"></div><div class="price"><span class="miaosha">￥3620<i></i></span><span class="orign">￥5650</span></div>

效果如下（左侧为三角样例，右侧为购物价格栏）：

b.圆角边框

通过设置border-radius这一属性，可以将边框边缘圆角化

代码如下

css部分：<style>.yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50%就是高度和宽度的一半 */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}/* border-radius是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角 顺时针 *//* 跟两个值 对角线两个角相同 */.radius {width: 200px;height: 200px;/* border-radius: 10px 20px 30px 40px; */border-radius: 10px 40px;background-color: pink;}</style>body部分：1.圆形的做法：<div class="yuanxing"></div>2.圆角矩形的做法<div class="juxing"></div>3.可以设置不同的圆角<div class="radius"></div>

效果如下：

4.注意点

（1）外边距合并问题

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距（margin-bottom），下面的元素有上外边距（margin-top），则他们之间的垂直边距为取两个值中的较大者

代码如下：

css部分：<style>.damao,.ermao {width: 200px;height: 200px;background-color: pink;}.damao {margin-bottom: 100px;}.ermao {margin-top: 200px;}</style>body部分：<div class="damao">大毛</div><div class="ermao">二毛</div>

则取两者最大的那个距离，即200px

效果如下：

（2）清除内外边距

实际开发中，你会发现当你在一个空白页面中写上123时，你并没有给他加内外边距，但是他会和浏览器页面最左上角（前提你没给他加浮动定位）有距离（红点标注位置），这个为默认的浏览器边距，通常会使用通配符选择器进行清除内外边距

未清除时如图：

清除代码：

<style>* {margin: 0;padding: 0;}</style>

效果如下：