1. CSS基础HTML太丑了，怎么办？ CSS层叠样式表——表现，凡是页面中所有能看见的东西的设置
1.1 什么是CSS?CSS指的是层叠样式表(Cascading Style Sheets) ，用于为网页创建样式表，对网页进行装饰，如设置HTML页面中的文本内容（字体、大小、对齐方式），图片的外形（宽高、边框样式、边距等）； 1.2 层叠样式表1、层叠： 网页是一层一层的，层次高的将会覆盖层次低的，我们看到的只是最上面的一层； 2、样式： CSS可以为网页各个层次分别设置样式； 3、注释：css的注释/* */，必须编写在 4、 .box + tab== <div class="box"></div> 创建一个class为box的div ；
2. CSS基本结构
2.1 书写位置 CSS有专有的
2.11、行内样式1、特点： 直接将css样式写到 2、语法： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名><p style="color:red; font-size:12px;"> </p>; 3、优点：编写简单，定位准确,不需填写选择器，直接编写声明即可； 4、缺点：直接将css代码写到html内部，使结构与表现耦合，导致样式不能复用；不方便后期维护，不推荐；
2.12、内部样式1、特点： 将css样式编写到 2、语法： <head> <style type="text/css"> // type="text/css" 在html5中可以省略 p { color: red; font-size: 30px; } </style></head>
3、优点：使css独立于html代码，同时为多个元素设置样式，可以使样式进一步复用，也可以使结构与表现进一步分离，常用； 4、缺点：内部样式样式只能在一个页面使用，结构与表现没有彻底分离，一个好的程序是需要每个部分都是独立的个体，模块化的概念；
2.13、外部样式1、特点： 希望写一个css的样式在不同的页面都可以使用，可以将所有样式表统一编写到外部样式文件 style.css 中,再通过 2、语法： <head>
<!-- head标签内引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
/* css文件内直接定义样式，不用写style标签 */
li {
list-style: none;
}</head>
3、优点： （1）使结构 表现完全分离，可以使样式表同时控制多个页面，最大限度的使样式可以复用； （2）浏览器第一次加载图片之后已经将图片下载了，以后访问则不需下载，可以利用浏览器的缓存，加速用户访问的速度，提高了用户体验； 所以在开发中，最推荐使用外部css；文件级别：三者中 行内样式表 级别最高； 4、属性：
2.14、三种样式对比
2.2、语法规范1、结构：选择器 { 声明块 } （1）选择器用于指定CSS样式的HTML标签，花括号内是设置的具体样式； （2）声明块紧跟选择器后，用一组{ }括起来，里面是一组组的名值对结构； 一组一组的名值称为声明，一个声明块中可以有多个声明，用 ；隔开使用，声明的样式名和样式值之间使用 ：来连接； 格式：属性值前，冒号后面，保留一个空格；选择器和花括号之间保留空格； 2、语法 <style>/* 给谁改样式 { 改什么样式 } */
p {
color: red;
font-size: 25px;
}</style>
3、CSS选择器1、作用：告诉浏览器：网页上的哪些元素需要设置设么样的样式，即选择器是选择标签用的； 2、分类：选择器分为—基础选择器和复合选择器； 3.1、基础选择器基础选择器是由单个选择器组成的； 包括：标签选择器、类选择器、id选择器和通配符选择器；
3.11、标签选择器：标签名 { }以HTML标签名作为选择器，把页面中某一类标签都选择，能快速统一标签样式； 语法： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例：p会选取页面中所有的p标签； <style>
p {
color: red;
font-size: 25px;
}</style>
3.12、类选择器：.class属性值{ }作用：通过元素的class属性值选中一组元素，可选中一个或多个元素； 口诀：样式点定义，结构类（class）调用，一个或多个，开发最常见； 语法： .类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}<p class='类名'></p>（1）可以同时为 一个元素设置多个class属性值，多个值之间用空格隔开； （2）可以允许多个标签调用一个共用的class类； <style>/* .class选择器会选取页面中所有 class属性值为red的元素； */
.red {
color: red;
}
.font20 {
font-size: 20px;
}
</style></head><body>
<!-- 可以允许多个标签调用一个共用的class-->
<p class="red">选择器</p>
<p class="red">选择器</p>
<!-- 同时为一个元素设置多个class属性值 多类名样式：把一个标签相同的样式放在一个类里-->
<p class="red font20">选择器</p></body>
多类名开发： 可以把一些标签相同的样式放到一个类里；这些标签都可以调用这个共用的类，然后再调用自己的类；从而节省css代码，统一修改。 <div class="pink fontWeight font20">亚瑟</div><div class="font20">刘备</div><div class="font14 pink">安其拉</div><div class="font14">貂蝉</div>
常用类：
3.13、id选择器：#id属性值{ }作用：可以在页面中单独选取某一个标签； 口诀：样式 #定义，结构id调用，只能调用一次，别人切勿使用 语法： #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }<p id="id名"></p> // 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例： <head><style>
/* #p1会选取页面中唯一 id属性值为p1的元素； */
#p1 {
color: red;
font-size: 25px;
}</style></head><body>
<p id="p1">选择器</p></body>
3.14、通配选择器 *{ }作用：选择页面中的 所有元素，特殊情况使用； 会匹配页面所有的元素，降低页面响应速度，不建议随便使用 语法： * {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
3.2、复合选择器复合选择器是由两个或多个基础选择器组合成的； 复合选择器分为 后代选择器，子选择器，交并集选择器，伪类选择器；
3.21、后代元素选择器：父元素 后代元素{ }父级 子级{属性:属性值;属性:属性值;}
作用：选中指定父元素里的 后代元素，可以是子孙后代； /*例；为页面中所有div中的span设置一个颜色为绿色*/
3.22、子元素选择器：父元素 > 子元素（直接后代，亲儿子）作用：选中指定父元素的 直接后代，子元素； /*例：为div标签的直接子元素 span设置一个背景颜色为黄色；*/*IE6及以下的浏览器不支持子元素选择器
3.23、并集选择器：元素1，元素2，元素n { 样式声明 }作用：同时选中多组标签，为它们定义相同的样式，用于集体声明； 任何形式的选择器都可以作为并集选择器的一部分，用，连接，和的意思； /*例：为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色（并集选择器竖着写，最后一个不加逗号）*/
#交集选择器：既有标签一的特点，也有标签二的特点。并且，又的意思。 比如： p.one 选择的是： 类名为 .one 的 段落标签。
3.24、伪类选择器伪类：专门用来表示元素的 某种特殊的状态，用 ： 表示； 比如：访问过得超链接，普通的超链接，获取焦点的文本框； 当我们需要为处在这种特殊状态的元素设置样式时，就可以使用伪类；
（1）超链接伪类 lvha： 例：超链接按颜色分：访问过的——紫色 ；没访问过的——蓝色；正在点击时是红色； 以根据访问者与该链接的交互方式，通过四个伪类 将链接设置 成4种不同的状态:顺序不能乱；
（2）注意：
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
（3）：focus伪类选择器 用于选取获取焦点（光标）的表单元素，主要针对表单元素； /* 将获得光标的input元素选取出来 */
3.25、选择器按元素之间的关系分类：
4、CSS三大特性CSS有三个非常重要的特性：继承性、优先级、层叠性；
4.1、继承性（样式的继承）1、作用：现实中：像儿子只可以继承父亲遗产一样，子承父业；
2、特点： 恰当地使用继承可以简化代码，降低CSS样式的复杂性； 子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性） 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞； 3、语法： <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { color: red; }
p { color: green; }
/*因为demo 没有选p标签，所以 继承的权重为 0*/
.demo { color: blue; }
#test { color: pink; }
</style></head><body>
<div class="demo" id="test">
<!-- p是绿色 -->
<p>继承的权重为 0</p>
</div></body>
4、行高的继承 语法： body{
font:12px/1.5 Microsoft YaHei;
}
特点： 行高可以接单位也可以不接； 若子元素没设置行高，则汇集成父元素的行高/1.5； 此时的行高是当前子元素的文字大小*1.5； body行高1.5的优势：里面的子元素可以根据自己文字大小自动调整行高；
4.2、层叠性1、作用：是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，此时一个样式会覆盖（层叠）另外一个冲突的样式，层叠性主要解决样式冲突的问题； 2、原则： 样式冲突，遵守就近原则，那个样式离结构近，就执行哪个； 样式不冲突，不会层叠；
4.3、优先级（权重）当使用不同选择器选择同一个元素，并且设置相同的样式时，样式之间产生了冲突，最终采用哪个选择器的样式，由选择器的优先级（即权重）决定：
1、权重计算公式 选择器的权重：计算权重需要将一个样式的全部选择器相加； 优先级规则：
通配符和继承权重为0；标签为1，类（伪类）为10，id为100，行内1000； 注意：
例：如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，因为继承没有权重； <style>
/*父亲的权重是100*/
#father {
color: red;!important; }
/*虽然权重有高低，但继承的权重为0*/
/*所以以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来*/
p {
color: pink;
}</style><body>
<div id="father">
<p>内容</p>
</div> </body>
2、权重的叠加：复合选择器需计算权重； 就是一个简单的加法计算
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
5、字体样式Fonts属性定义字体系列、大小、粗细、和文本样式（如斜体）；
1、font-size：文本大小/字号 （1）结构： /* 标题标签比较特殊，需要单独指定文字大小 */
p {
font-size: 25px;
}
（2）特点：其实设置的并不是文字本身真正大小，而是是文字在页面中所属的看不见的框空间的大小（盒子模型），类似于方格纸，所以字体大小实际值是小于font-size值；
2、font-famliy：字体系列 （1）结构： body {
font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';
}（2）特点：可以同时指定多个字体，优先使用前面的字体;超过两个单词加引号； （3）分类：5大类
（4）应用场景：
（5）常用字体：
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体 3、font：字体复合属性 （1）特点：将字体的样式的值统一写到font中，不同值间用空格隔开； （2）结构： body {
font: font-style font-weight font-size/line height font-family;
}
前面可省略，但最后两项，font-size和font-family必须有且遵循顺序； 优点：使用简写属性也会有一个比较好的性能；
6、CSS文本属性Text属性可定义文本的外观，比如文本的颜色、对齐、装饰、文本缩进、行间距；
1、color：文本颜色 CSS颜色的表达形式有三种：（1）使用颜色的单词；（2）RGB代码；（3）十六进制； （1）颜色的英文单词： p {
color: red;
}
（2）RGB值： RGB是指通过Red,Green,Blue三元色的不同浓度，来表示出不同的颜色； p {
color: RGB(255,0,0); /* 以表示颜色浓度的数值表示 0-255 */
color: RGB(100%,0%,0%); /* 以百分数表示浓度 0-100%，最后转为数字 */
}（3）十六进制 使用十六进制RGB的值表示颜色：三组两位的十六进制表示颜色，每组表示一个颜色；每组范围：00-ff 即0-255； p {
color: #ff0000;/* 可简写为#f00 */
}RGBA：表示透明度；可选值：0—1的值，完全透明—完全不透明；
2、text-align：水平文本对齐方式 可选值：center/left/right/justify（两端对齐) 通过调整文本之间的空格的大小，来达到一个两端对齐的目的 .pic {
/*想要图片居中对齐，则让他的父亲p标签添加水平居中的代码*/
text-align: center;
}
3、text-decoration：修饰文本 可选值：Underline（下划线) / overline（上划线）/ line-through（删除线）/ none
4、text-indent：文本首行缩进（缩进em字节） 一般都会使用em作为单位正值向右移，负值左移，可以将不想显示的字隐藏起来； p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
5、行间距 （1）特点：
（2）行间距的设置： /* 1、直接指定大小（ px或者% ）*/
p {
/* line-height: 10%; */
line-height: 10px;
}/* 2、通过行高指定：指定行高,字体大小后添加 / 指定行高，行高越大间距越大，行间距=行高-字体=50-30=20 */
.p2 {
font-size: 30px/50px "微软雅黑"；
}
/* 3、设置字体相应的倍数:line-height:1; */
6、行高和高度的三种关系
7、CSS背景背景属性可以设背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定； 应用场景：网页扒图片，超大的图片或者小图标及logo等都使用背景图片，然后通过定位调节背景图片位置；
1、background-color：颜色值 为元素设置背景颜色；若不设置，默认透明transparent，实际会显示父元素的背景颜色； 2、background-image：背景图片 background-image : none | url (images/demo.png)
为元素指定背景图片；
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
3、background-repeat：背景平铺方式 background-repeat : repeat | no-repeat | repeat-x | repeat-y
可选值：
background-size：cover；布满全局最小；
4、background-position：背景图片位置 精确调整背景图片在元素中的位置；背景图片默认贴着元素左上角显示； position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。
（1）指定的两个值都是方位名词，则两个值前后顺序无关；如果只给出一个值，则第二个值默认center； （2）如果position 后面是精确坐标， 第一个肯定是 x ,第二个一定是y； 如果只指定一个，则第一个是x坐标，第二个默认是center；
5、background-attachment：背景附着 用来设置背景图片是否固定或随页面一起滚动，后期做视差滚动效果； background-attachment : scroll | fixed
可选值：
6、background：简写属性 没有顺序要求和数量要求；不设置的为默认值； 通常：background:背景颜色 背景图片 背景平铺 背景图片滚动 背景位置 body {
background: black url(images/bg.jpg) no-repeat fixed center top;
} <style>
.bg {
width: 800px;
height: 500px;
background-color: pink;
/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
background-image: url(images/l.jpg);
/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景位置*/
/*background-position: x坐标 y坐标;*/
/*background-position: right top; 右上角*/
/*那么第一个，肯定是 x 是 50 第二的一定是y 是 10*/
/*background-position: 50px 10px ;*/
/*以下说明 x 10像素 y 垂直居中的*/
/*background-position: 10px center;*/
background-position: center 10px;
}
</style>
7、背景图片透明（CSS3） 语法： background: rgba(0, 0, 0, 0.3);
alpha是透明度，范围0-1；0.3可简写为.3; 因为是CSS3 ，所以 低于 ie9 的版本是不支持的 IE6:半透明背景 案例： <style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 58px;
color: #ffffff;
text-decoration: none;
}
/* .nav .bg1 {
background: url() no-repeat;
} */</style></head><body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div></body>
8、盒子模型css学习三大重点： css 盒子模型 、 浮动 、 定位 网页布局的本质：
盒子是网页布局的关键点 8.1、格式一、作用： 盒子模型（BOX）也叫 框 模型：在网页中，一切皆是盒子，是一个盛装内容的容器； css处理页面时，每个html元素都看作包含在一个不可见的盒子里； 盒子默认矩形，对网页进行布局就等同于摆放盒子； 二、结构： 盒子分四部分：内容区（content）、边框（border）、内边距（padding）、和外边距（margin）组成。
1、内容区（content）：
2、边框（border）： border : border-width || border-style || border-color border: 1px solid red; 没有顺序
（1）作用：元素可见框的最外部；边框会影响盒子大小，测量时需减去； （2）样式：要为一个元素设置边框必须指定三个样式：width/style/color; border-style：solid（实线）dotted（点）dashed（虚线）double（双线）
注意：
border：red solid 10px； border-right：none；
（3）表格相邻边框合并，细线边框； border-collapse：collapse；
3、内边距（padding）： （1）作用：盒子内容区与边框间的距离；内边距会影响盒子的可见框大小，测量需减去（双倍两侧）；盒子的大小由内容区、内边距和边框共同决定； （2）格式：padding：10px； （3）属性：padding-top/right/bottom/left 逆时针方向； （4）盒子的实际的大小 = 内容的宽度和高度 + 两侧内边距 + 两侧边框 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width （5）应用场景：padding可以撑开盒子，巧妙运用，常用于制作导航栏； 因为每个导航栏里的字数不一样，所以不给盒子设置宽度，直接给padding撑开； （6）注意：如果盒子本身没给宽高，则padding则不会撑开； （7）内边距导致的问题：会撑大原来的盒子 解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小；
4、外边距（margin）： （1）作用：元素边框与周围元素相距的空间；即当前盒子与其他盒子之间的距离；不会影响可见框的大小，只是影响盒子的位置； （2）盒子有四个方向的外边距，页面中的元素都是靠左上摆放的，当设置 上 和左外边距时，会导致盒子自身发生变化；当设置右和下边距会挤其他盒子，改变其他盒子的位置； （3）外边距可以指定正负值，负值反方向移动； （4）垂直方向框如果设置为auto，则外边框默认是0； （5）当左右外边距（水平方向）设置为auto时，浏览器会将左右外边距设置为相等，将外边框设置为最大值；前提是盒子设置了高度；
5、文字居中和盒子居中区别 （1）盒子内的文字 水平居中是 text-align: center；而且还可以让 行内元素和行内块居中对齐 （2）盒子内的文字 垂直居中是 line-height= 高度； （3）块级盒子水平居中 左右margin 改为 auto text-align: center; /* 文字 行内元素 行内块元素水平居中 */
line-height: height;
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
.box {
margin：0 auto;
}
8.2、外边距合并导致的问题我们根据稳定性来分，建议如下： 按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。 ``` width > padding > margin ``` 原因： - margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。 - padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。 - width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
使用margin定义块元素的垂直外边距时，会出现外边距的合并； 主要会出现两种情况：
1、相邻块元素垂直外边距的合并 - 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom， - 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是 **取两个值中的较大者** 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。如100 100取100； 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素； 解决：尽量只给一个盒子设置margin值；
2、嵌套块元素垂直外边距的合并（塌陷） - 对于两个嵌套关系(父子)的块元素，如果父元素没有上内边距及边框 - 父元素的上外边距会与子元素的上外边距发生合并 - 合并后的外边距为两者中的较大者 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，而子元素也有上外边距时，此时父元素会塌陷较大的外边距值； 解决： 1、为父元素设置上边框border隔开；设置属性会增加像素，可以在宽高上减去； 2、为父元素设置上内边距padding-top；但是最后要在高度减去100px； 3、若想不使他重叠：在两个块元素div间添加其他，则不相邻，不重叠； 4、为父元素添加overflow：hidden； <style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*1. 可以为父元素定义上边框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以给父级指定一个 上 padding值*/
/*padding-top: 1px; */
/*3. 可以为父元素添加overflow:hidden。*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style></head><body>
<div class="father">
<div class="son"></div>
</div></body>
有了浮动，定位就不会有外边距塌陷的问题了；
8.3、清除内外边距浏览器为了在页面中不设置样式时，也可以有很好的显示效果，所以浏览器为很多的元素都设置了一些默认的margin和padding。而这些默认样式，正常情况下不需要；所以使用前需要去掉； 清除浏览器默认样式； * {
margin：0；/* 清除内边距 */
padding：0； /* 清除外边距 */
}
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
8.4、内联元素的盒模型：特点： 1、内联元素只占本身大小，水平排列，一行可放多个； 2、内联元素不能设置width和height； 3、水平内边距padding可以设置；垂直内边距虽然可以设置，但不会影响布局； 4、可以设置边框，但垂直方向不会影响布局； 5、内联元素不支持垂直外边距margin-top、margin-bottom；
9、CSS元素的显示与隐藏9.1、元素的显示模式
9.2、display标签显示模式转换display属性：设置一个元素如何显示 （1）作用：
（2）可选值：
9.3、元素的隐藏
注意：对于有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。 overflow属性值：
导航栏案例 注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
案例：简洁版小米侧边栏
 <style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
background-color: #55585a;
width: 230px;
}
ul li {
width: 230px;
height: 40px;
line-height: 40px;
}
ul li a {
/* display: block; */
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-indent: 2em;
}
ul li:hover {
background-color: #ff6700;
}
</style></head><body>
<ul>
<li><a href="#">手机 电话卡</a></li>
<li><a href="#">电视 盒子</a></li>
<li><a href="#">笔记本 平板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">健康 儿童</a></li>
</ul></body></html>
案例：新浪导航栏 <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>新浪导航栏案例</title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
/*background-color: pink;*/
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
}
</style></head><body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div></body></html>
案例：蓝牙耳机 错误~！ <style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
}
.box img {
width: 100%;
background-color: pink;
}
.review {
height: 70px;
padding: 0 28px;
margin-top: 30px;
font-size: 14px;
}
.appraise {
margin-top: 20px;
font-size: 14px;
color: #b0b0b0;
padding: 0 28px;
}
.info {
margin-top: 15px;
padding: 0 28px;
font-size: 14px;
}
.info h4 {
display: inline-block;
font-weight: normal;
}
.info span {
color: #ff6700;
}
</style></head><body>
<div class="box">
<img src="../1.png" alt="">
<p class="review">快递牛，整体不错蓝牙可以说秒连，红米给力</p>
<div class="appraise">来自于***的评价</div>
<div class="info">
<h4>Redml AirDots真无线蓝...|</h4>
<span>99.9元</span>
</div>
</div></body>
还有一个竖线：方法：加
10、CSS3——圆角边框原理： border-边框；radius-半径； 假如给一个矩形盒子设置圆角边框，给border-radius：length指定一个数值，绘制一个以length为半径的圆，让这个圆分别与矩形的四个边框相切，得出一个圆弧 1、语法： border-radius：length; // 数值或百分比的形式 border-radius: 50%; // 让一个正方形 变成圆圈 border-radius: 左上角 右上角 右下角 左下角 逆时针顺序;
2、特点：数值越大，圆角的幅度越大，越明显；
3、设置方法： （1）参数值可以是数值或百分数； （2）若是正方形想设置一个圆，就把数值改为高度或是宽度的一半即可，或50%； （3）若是矩形，改为高度一半即可； （4）可简写也可分开写：四个值分别代表：左上角 右上角 右下角 左下角； 若只设置两个值，则是对角线形式；
案例：设置圆形、椭圆形 <style>
* {
margin: 0;
padding: 0;
}
.radius {
width: 200px;
height: 200px;
background-color: blue;
border-radius: 10px 20px 30px 40px;
}
.yuan {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: red;
border-radius: 50px;
}</style></head><body>
<div class="yuan"></div>
<div class="juxing"></div>
<div class="radius"></div></body>
11、阴影11.1、盒子阴影1、语法： box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow：h-shadow v-shadow blur spread color inset;
2、特点：
3、属性：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset;
}</style>
11.2、文字阴影1、语法： text-shadow: h-shadow v-shadow blur color;
2、属性： h-shadow、 v-shadow、 blur、 color
12、传统网页布局的三种方式网页布局的本质是用css摆放盒子； 网页布局的三种传统方式有：文档流（标准流）/ 浮动 / 定位； 12.1、文档流文档流处在网页的最底层，表示一个页面中的位置，像地基一样的东西； 我们所创建的元素都默认在文档流里； 1、块元素会独占一行，从上到下顺序排列（按列排列）； 常用块元素： 2、行内元素会按照顺序，从左到右顺序排列（按行排列），碰到父元素边缘自动换行； 常用行内元素： 以上都是标准流的布局；
12.2、浮动float1、为什么需要浮动？ 很多布局标准流无法完成，需要借助浮动完成布局，因为浮动可改变元素的默认排列方式； 典型应用：可以让多个块元素（盒子）在一行内排列； （块元素转为行内块也可实现一行显示，但是中间有空白缝隙） 2、什么是浮动？ 利用float属性创建浮动框，将其移动到一边，直到左右边缘或遇另一个浮动框边缘； 概念：元素的浮动是指设置了浮动属性的元素会
格式：选择器 { float：none/left/right } 3、浮动特性： （1）浮动元素脱离原来的文本流（脱标），不再占位； （2）浮动的元素会在一行内显示且元素顶部对齐； （3）浮动的元素具有行内块元素的性质，若给span浮动，则不需转换为行内块； （4）浮动的元素是紧贴在一起的，无缝隙，若一行装不下，另起一行； （5）浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围；可以通过浮动设置文字环绕图片效果； （6）文档流中，子元素宽度默认占父元素全部； 4、块元素和行内元素都可以设置浮动， 当行内元素设置浮动以后，脱离文档流，将会自动变成一个块元素； 但当一个块元素浮动之后，宽度会默认被内容撑开，所以当漂浮一个跨级元素时会为他指定一个宽度； 浮动元素默认会变成块元素，即使设置display：inline以后依旧是块元素； 案例： 若第一个粉色的盒子加了浮动，他就飘起来了，不会占位，下面的元素立即上移； 如果第一、三个盒子不浮动，第二个盒子浮动，则第一个div独占一行，2不浮上去；得出浮动的盒子只对它下面的元素有影响； 如果第一、三盒子浮动，第二个不浮动，则第二个上升第一个，第三个浮到挨着第二个； <style>
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgba(0,153,255);
}</style>
浮动小结：
清除浮动1、浮动引发的高度塌陷 文档流中，父元素的高度默认被子元素撑开，子元素多高，父元素多高； 但是当为子元素设置浮动之后，子元素会完全脱离文档流，导致子元素无法撑起父元素高度，导致父元素高度塌陷； 由于父元素高度塌陷，则父元素下的所有元素都会向上移动，导致页面布局混乱； 所以开发中一定要避免塌陷问题的出现； 可以将父元素的高度写死，解决塌陷，但是一但将高度写死，父元素的高度将不能自动适应子元素的高度；不建议使用；
2、清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
3、 清除浮动clear 1、原理： （1）清除其他元素的浮动对当前元素的影响，也就是说元素不会因为上方出现了浮动元素而改变位置； （2）如果父盒子本有高度，则不需要清除浮动； （3）清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了； 2、为什么要清除浮动？父级没高度；子盒子浮动了；影响下面布局了； 3、方法：清除浮动的策略就是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外边的盒子； 4、可选值：None/left/right/both：清除两侧，清除对他影响最大的一侧； 语法：选择器{clear:属性值;} clear 清除
4、高度塌陷问题的解决——清除浮动方法：
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
1).额外标签法(隔墙法)--W3C推荐在最后一个浮动的子元素后面添加一个额外的空标签（必须是块级元素），清除浮动样式； 例如 <div style=”clear:both”></div>，或则其他标签br等亦可。 原理：由于这个div没有浮动，所以他是撑开父元素高度的，然后对其进行清除浮动，通过这个空白的div撑开父元素的高度，基本没有副作用；
<head><style>
/*清除浮动*/
.clear {
clear: both;
}
</style></head><body>
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
<div class="clear"></div> // 额外标签法，div无意义 </div>
<div class="two"></div></body>
2).父级添加overflow属性方法可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。 之前清除 外边距合并 也用了 overflow； 原理：w3c标准，页面中的元素都有一个隐含的属性，叫做block formatting context，简称***\*BFC\****;该属性可以设置打开或者关闭，默认关闭；
当开启元素的BFC后，元素将具有如下特性：
优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
如何开启BFC
overflow：auto/hidden；
在IE6以下浏览器不支持BFC；IE6虽然按不兼容BFC，但是有另一个隐藏的属性——haslayout，作用和BFC相似，IE6可以通过haslayout解决该问题； 开启父元素的haslayout： zoom：1；
3).父级添加after伪元素 :after:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了 若不想添加div，又想解决塌陷，可通过css添加after伪类，选中box1的两边，after向元素的最后边添加一个空白的块元素，然后对其清除浮动（闭合浮动）；这样和添加一个div的原理一样，得到相同的效果；而且没有在页面里添加多余的div； 使用方法： .clearfix :after {
/*添加一个内容*/
content: "";
/*转换为一个块元素 默认是行内元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
height: 0;
visibility: hidden;
}
/*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理 */
.clearfix{
zoom：1;
} /* IE6、7 专有 */
4).父级添加双伪元素解决父子元素的外边距重叠：使用空的table标签可以隔离父元素和子元素的外边距，阻止外边距的重叠； display：table可以将元素作为一个表格显示； 修改后的clearfix是一个多功能，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠 .clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}
清除浮动总结
图片质量问题 一、PNG24图片格式问题 1、问题：IE6中对图片格式PNG24支持度不高，如果使用，会导致效果无法正常显示； 2、解决：
（1）引入js方法： 在 <script type="text/javascript" src="script.js"> </script>
（2）然后要再创建一个新的 <script type="text/javascript>
DO-belatedPNG.fix("div");修复
</script>
二、hack浏览器版本问题 css hack 实际是一个特殊的代码，只有部分浏览器能识别；所以用来为一些浏览器设置特殊代码； 方式一：
以下内容只会出现在IE6，后面跟的是版本； <!-- [if IE 6]--> <p></p><!-- [endif]-->
以下内容只会出现在IE9以下 浏览器； <!-- [if lte IE 6]-->
方式二：
三、IE6的双边距问题 在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍——IE6的双边距问题： 解决： 通过添加display：inline样式来解决IE6的双边距问题，虽然对于一个浮动元素来说设置行内块元素没有任何意义，但可以解决双边距问题； .box1 {
width: 100px;
height: 100px;
float: left;
display: inline;
background-color: red;
margin-left: 100px;
}
12.3、position定位Positon使用场景：标准流和浮动都无法实现的效果，采用定位； （1）浮动可以让多个块盒子一行没有缝隙排列，用于横向排列盒子； （2）定位则是让盒子 自由的在某个盒子内移动位置 或 滚动窗口时固定在屏幕中心 某个位置，并且可以压住其他盒子； 当开启了元素的定位（position属性是一个 非static值）时， 可以通过left right top bottom四个属性来设置元素的偏移量； 如：left：元素相对于其定位位置的左侧偏移量； 脑海应该有三种布局机制的上下顺序： 标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空） 通常偏移量只用两个方向属性就可以对元素定位，相当于x y;坐标的概念： 例： p {
position：relative；
left：100px；
top：200px；
}
注意：
1、定位模式：
1、相对定位：relative （1）当开启了相对定位以后，而不设置偏移量时，元素位置不会发生任何变化： （2）相对定位是相对于元素在文档流中 原来的位置进行定位； （3）相对定位的元素不会脱离文档流，元素在文本流的位置不会改变，还会占位； （4）相对定位会使元素提升层级，定位元素盖住元素； （5）相对元素不会改变元素的性质，块还是块，内联还是内联；
2、绝对定位：absolute （1）特点：
（2）绝对定位的盒子居中 加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
（3）子绝父相 子级是绝对定位的话，父级要用相对定位； 子盒子不需要占有位置，则是绝对定位，父级需要占位置，所以是相对定位；
3、固定定位：fixed
① 固定定位小技巧：固定在版心右侧 小算法：
淘宝轮播图： ① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。 ② margin-left: -100px;：让盒子向左移动自身宽度的一半transition：50% 自身宽度一半
② 固定定位特点： （1）IE6不支持固定定位； （2）绝对定位（固定定位）会完全压住盒子 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片） ； 但是绝对定位（固定定位） 会压住下面标准流所有的内容。 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素。 注意：脱标的盒子不会触发外边距塌陷 ，浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4、粘性定位：sticky（了解） （1）特点：
（2）语法： p {
Position：sticky；
top：10px;
}
5、静态定位：static .promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255,255,255,.3);
border-radius: 7px;
}
固定定位案例：
步骤 1 —— 顶部图片和底部内容 .top {
/* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */
width: 100%;
height: 44px;
background: url(images/top.png) no-repeat top center;
position: fixed;
left: 0px;
top: 0px;
}
.box {
width: 1002px;
/* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
margin: 44px auto;
}注意：
步骤 2 —— 左右两侧广告 .ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}注意：不要同时使用
定位：<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>绝对定位以带有定位的父级元素来移动位置</title>
<style>
.yeye {
width: 500px;
height: 500px;
background-color: skyblue;
position: absolute;
}
.father {
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
/*标准流的子盒子总是以父级为准移动位置*/
/*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/
/*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/
/*position: relative;*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
/*margin-left: 100px;*/
position: absolute;
top: 50px;
left: 50px;
}
</style></head><body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div></body></html>
定位的扩展2.1 绝对定位的盒子居中 注意：绝对定位/固定定位的盒子不能通过设置 在使用绝对定位时要想实现水平居中，
2.2 盒子居中定位示意图2.3 堆叠顺序（z-index）在使用 定位 布局时，可能会 出现盒子重叠的情况，z-index只能用于定位。 加了定位的盒子，默认**后来者居上**， 后面的盒子会压住前面的盒子。 应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**。
注意：
2.4 定位改变display属性前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的） 也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。 |
|
|
