层叠样式基础
1. 概念
css和html都是标记语言。
style放在head中。
css写在style中。
css组成
选择器{
属性: 值;
属性: 值;
}
2. css基础选择器
选择器分为基础选择器和复合选择器。
基础选择器由单个选择器组成。
2.1 基础选择器
基础选择器包括：
标签选择器
类选择器
id选择器
通配选择器
标签选择器
用html标签名称作为选择器。会把所有该标签名的标签选中
p {
color: green;
}
类选择器： 一个标签上可以添加多个类名
.类名 {
color: green;
}
id选择器： id值唯一
#id名 {
color: green;
}
通配符选择器：
*定义，它表示选取页面中所有元素
* {
//所有的标签都会加上这个样式
color: green;
}
2.2 复合选择器
后代选择器
子选择器
并集选择器
伪类选择器
2.2.1后代选择器
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
<ul class='nav'>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
2.2.2后代选择器
用空格表示,所有的后代都会选中（儿子|孙子关系）
//选中ol下的li
ol li{
color: aqua;
}
//选中ul下的li
ul li{
color: blue;
}
.nav li {
color: blue;
}
2.2.3子选择器
> 只选中最亲的儿子
<div class="nav">
<a href="#">我是儿子</a>
<p><a href="#">我是孙子</a></p>
</div>
//儿子aqua
div>a{
color: aqua;
}
2.2.4并集选择器
选择多组标签，同时为他们定义相同的样式 用逗号隔开
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
// 熊大熊二小猪一家粉色
div,p, .pig li {
color: pink;
}
2.2.5 伪类选择器
像某些选择器添加特殊的效果
: 表示
-
a链接的伪类选择器
LVHA
L link
V visited
H hover
A active
love hate
四个伪类选择器的顺序不能改变 （使用设计上述) -
focus伪类选择器
一般focus是在input上用
input:focus{
background: yellow;
}
3. 字体属性
- font-family 字体格式
- font-size 字体大小 单位px
- font-weight 字体粗细 bold 粗体 bolder 更粗 light 细体
- font-style 字体样式 italic 斜体
- font可以组合上述4个
font：font-style font-weight font-size/line-height font-family;
4. 文本属性
- color 文本颜色
- text-align 文本内容水平对齐 left center right
- text-decoration 文本装饰
none
underline 下划线
overline 上划线
line-through 删除线 - text-indent 文本缩进 2em em相对单元，当前元素font-size1个文字的大小
- line-height 行间距 上间距+字体+下间距
文字居中的方式：文字的行高===盒子的高度
行高的上空袭和下空袭把文字寄到中间了，如果行高小于盒子高度，文字偏上 （（行高-文字size）/2 小于box/2 文字偏上）；如果行高大于盒子的宽度，文字偏下（（行高-文字size）/2 大于box/2 文字偏下）。
5. 引入方式
行内样式表
直接卸载标签中
<p style = 'color: red;font-size: 32px;'>
内部样式表
style标签
外部样式表
写一个.css文件夹
然后再文件中引入
<link rel = 'stylesheet' href = 'css文件路径'>
层叠样式进阶
1.emmet语法
emmet生成html
1. div*3 ---3个div
2. 父子关系---ul>li
3. 兄弟关系---div+p
4. div.box 生成带有class=box的div
5. div#box 生成带有id=box的div
6. div类名有序号 .demo$*6 生成class=demo1-demo6的div
7. 默认显示文字的标签 div{ xxx}*5
emmet生成css
w100 -- width: 100
h200
2. 元素显示模式
2.1 块元素、行内元素、行内块元素
html元素分为块元素和行内元素
块元素
<h1>-<h6>
<p>
<div>
<ul>
<ol>
<li>
独占一行
高度height、宽度width、外边距margin、内边距padding、可以控制
宽度默认是父级容器的100%
可以存放行内元素或者块级元素
文字类的元素怒内不能使用块级元素 如p标签内不能存放div
行内元素
<a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>
一行内可以存放多个行内元素
行内元素不能设置宽度和高度
行内块元素
<img>
<input>
<td>
和相邻行内元素在一行上，但是他们之间有空白空袭，一行可以显示多个
默认宽度就是它本身内容的宽度
高度行高、外边距和内边距可以控制
2.2 元素转换
/*将行内元素转换为块元素 之后就可以设置高度、宽度*/
display: block;
/*将块元素转换为行内元素 之后就可以同行显示*/
display: inline;
/*将行元素转换为行内块元素 之后就可以同行显示*/
display: inline-block;
3. 背景 background
background = {
background-color, transparent透明|color
background-image, none|url(url)
background-repeat, repeat|no-repeat|repeat-x|repeat-y
background-attachment, fix|scroll
background-position x y ; center top;第二个值默认居中对齐
}
background: rgba(x,x,x,x) a是透明度 0是透明 1是不透明
4. CSS三大特性
层叠性：样式相同的就会被覆盖
继承性：子标签会继承父标签的某些样式，如文本颜色和字号 text- font- line- color
行高也会继承 字号/行高（尺寸，字号的倍数）
优先级：行内>id>类>元素>通配
复合选择器会有权重叠加的问题
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ol>
ol ：0,0,0,1+ li: 0,0,0,1 = 0,0,1,0 >0,0,0,1
ol li{
color: aqua;
}
li{
color: blue;
}
<ul class="nav1">
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
.nav1 li {
color: red;
}
/* 把第一个li粉色加粗 */
.nav1 .first {
color: pink;
font-weight: bold;
}
页面布局（重要）
页面布局的三大核心：盒子模型、浮动、定位。
传统网页布局的三种方式
- 标准流|文件流，就是标签按照规定好的默认方式排列，氛围块级元素和行内元素
- 浮动：浮动可以改变元素的默认排列方式，最典型的应用就是让多个块级元素一行内排列显示。
布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 - 定位
1. 盒子模型
border padding margin
1.1 组成
- border 边框
1. border = {
边框粗细， border-width
边框样式， border-style solid实线 dotted点线 dashed虚线
边框颜色 border-color
}
2. border也可以分为
border-top
border-bottom
border-left
border-right
而且border和上述四个可以同时出现，并且要先写border.
3. 合并两个相邻的单元格：border-collapse： collapse；
4. border会影响盒子的实际大小
- padding 内边距
1. 内边距：内容和边框有了距离
2. padding可以分上下左右
一个值：全
二个值： 上下 左右
三个值：上 左右 下
四个值：上 右 下 左
3. padding 也会影响盒子的实际大小
4. 若是标签没有设置宽度值，并且加上了padding，这样是不会影响盒子的宽度
- margin 外边距
盒子与盒子之间的距离
用法同padding
应用：
外边距可以让
i 块级盒子水平居中。 条件： 1. 盒子必须指定width； 2. 盒子左右的外边距都设置为aoto
ii 行内元素居中 条件：只要给父元素添加text-align ： center即可
块级盒子水平居中。
<div class="box1"></div>
.box1{
width: 200px;
height: 150px;
background-color: aqua;
/* 盒子居中 宽度+左右为auto*/
/* margin: 0 auto; */
/* margin-left: auto;
margin-right: auto; */
margin: auto;
}
行内元素|居中
<div class="box2">
<p class="p1">111</p>
</div>
.box2{
width: 200px;
height: 150px;
background-color: aqua;
/* 块级元素居中 宽度+左右为auto*/
margin: 0 auto;
/* 行内元素或者行内块元素内容居中父元素添加text-align ： center即可*/
text-align: center;
}
外边距合并
1. 相邻元素垂直外边距合并
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box1{
background-color: aqua;
width: 50px;
height: 50px;
margin-bottom: 20px;
}
.box2{
background-color: red;
width: 50px;
height: 50px;
margin-top: 30px;
}
box1和box2 之间的外边距为30px
box的高度为50+50+30=130
解决方案，就给一个框定义外边距
2. 嵌套块元素塌陷
<div class="father">
<div class="son"></div>
</div>
.father{
width: 500px;
height: 500px;
background-color: blue;
margin-top: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 150px;
}
效果图
整体box与上的外边距为150，选择两个嵌套的box的最大的外边距作为最后的外边距
为了实现嵌套的两个box分开的外边距的方法：
- 给父块元素增加上边框
.father{
width: 500px;
height: 500px;
background-color: blue;
margin-top: 100px;
border-top: solid;
}
.son{
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 150px;
}
- 给父块元素增加上内边距
.father{
width: 500px;
height: 500px;
background-color: blue;
margin-top: 100px;
padding-top: 1px;
}
.son{
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 150px;
}
- 给父元素设定overflow：hidden
.father{
width: 500px;
height: 500px;
background-color: blue;
margin-top: 100px;
overflow: hidden;
}
.son{
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 150px;
}
清除内外边距
*{
padding: 0;
margin: 0;
}
行内元素和行内块元素尽量只涉及左右内外边距
- content 内容
1.2 圆角 css3
border-radius ： 锁定尺寸|百分比；
原理
根据锁定尺寸为半径的原和框的四个角对齐，将两个连接点构造的圆弧就是我们的圆角。
圆形：将radius设置为高度|或者宽度的一半（前提给定的是一个正方形）或者是50% 就是宽度的50%
圆角： 设置为高度的50%
对某一个角设置的石墨烯 左 上 右 下
1.3 盒子阴影 css3
box-shadow
box-shadow={
h-shadow 水平阴影，x轴 正右 负左
v-shadow 竖直阴影 y轴 正下 负上
blur 模糊距离 0 实在的阴影 值越大 影子越虚
spread 影子尺寸
color
inset内阴影 ourset 外阴影
1.4 文字阴影 css3
text-shadow
text-shadow={
h-shadow 水平阴影，x轴 正右 负左
v-shadow 竖直阴影 y轴 正下 负上
blur 模糊距离 0 实在的阴影 值越大 影子越虚
color
2. 浮动
float
标签上加上了float，就创建了浮动框。浮动框会找到左边缘，右边缘或者是另外一个浮动框的边缘。
2.1 浮动特性
1. 浮动元素会脱离标准流---浮动元素不占位置
2. 浮动元素会一行内显示并且元素顶部对齐，下端不管，浮动元素是互相贴近不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3. 浮动的元素具有行内元素的特性。就是给行内元素或者块元素加上float属性就变成了行内块元素。可以加weigh属性，行内块元素的宽度没有指定的时候，宽度=内容元素。
浮动注意点
1 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
2 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
.浮动元素的标准流父元素一定都有高度？
不是必要的。
因为有些里面包含我们决定不了个数的，所以高度最好是让子盒子撑开父元素。
（子盒子为浮动元素的时候，父元素的高度就是0.因为浮动元素不占位置。）这时候就需要清除浮动。
浮动元素的父元素高度问题
<div class="box">
<div class="l1"></div>
<div class="l2"></div>
</div>
<div class="box1"></div>
.box{
width: 800px;
margin: 100px auto;
}
.box div{
float: left;
height: 200px;
width: 200px;
margin-right: 10px;
background-color: aqua;
}
.box1{
height: 300px;
background-color: purple;
}
解决方法：清除浮动
清除浮动的本质：清除浮动就是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度，就不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了
清除浮动的策略：
闭合浮动，只让浮动在父盒子内部影响，不影响盒子外面的其他盒子
选择器{clear:属性值[left不允许左侧有浮动元素,right不允许右侧有浮动元素,both同时都不允许];}
1. 额外标签法：隔墙法。就是在最后一个浮动元素后面添加一个额外的块级标签，在设置clear
<div class="box">
<div class="l1"></div>
<div class="l2"></div>
<p class="clear"></p>
</div>
<div class="box1"></div>
.box{
width: 800px;
margin: 0 auto;
}
.box div{
float: left;
height: 200px;
width: 200px;
margin-right: 10px;
background-color: aqua;
}
.box1{
height: 300px;
background-color: purple;
}
.clear{
clear: both;
}
缺点，文档结构被破坏 冗余元素
2. 父级添加overflow
<div class="box">
<div class="l1"></div>
<div class="l2"></div>
</div>
<div class="box1"></div>
.box{
width: 800px;
margin: 0 auto;
/*hidden | sroll |auto*/
overflow: sroll
}
.box div{
float: left;
height: 200px;
width: 200px;
margin-right: 10px;
background-color: aqua;
}
.box1{
height: 300px;
background-color: purple;
}
缺点无法显示溢出部分的元素
3. 父级添加after伪元素
after指的是在盒子的后面进行操作，是额外标签法的升级版。
<div class="box clearfix">
<div class="l1"></div>
<div class="l2"></div>
</div>
<div class="box1"></div>
.box{
width: 800px;
margin: 0 auto;
}
.box div{
float: left;
height: 200px;
width: 200px;
margin-right: 10px;
background-color: aqua;
}
.box1{
height: 300px;
background-color: purple;
}
.clearfix:after{
content: "";/*伪元素一定要增加的属性 */
height: 0; /*不看到该元素*/
display: block; /*代表添加了一个块级元素*/
clear: both; /*清除浮动*/
visibility: hidden; /*不看到该元素*/
}
4. 父级添加双伪元素
<div class="box clearfix">
<div class="l1"></div>
<div class="l2"></div>
</div>
<div class="box1"></div>
.clearfix:before,.clearfix:after{
content: "";
display: block;
}
.clearfix:after{
clear: both;
}
3. 定位
效果
1某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2当我们移动窗口的时候，盒子是固定在屏幕某个位置。
3定位的叠放顺序z-index：num num越大，盒子越靠上 z-index是position才有的属性
浮动可以让多个块级盒子一行没有空隙排列显示，经常用于横向排列块级盒子。
定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕某个位置，并且可以压住其他盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素再文档中的定位方式 ： position= {static, relative, absolute, fixed}
边偏移决定该元素的最终位置: top bottom left right
3.1 静态定位（x）
默认定位方式，无定位的意思
position ： static；
按照标准流进行排列，没有偏移
3.2 相对定位 （√）
相对定位是相对他自身原来的位置
position ： relative；
top： 100px；
left： 100px;
而它原本下面的元素还是再原来位置，不会发生改变。
3.3 绝对定位
相对于它的祖先元素。
特点
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准
2. 如果祖先元素有定位（相对，绝对，固定定位），则以最接近一级的有定位的祖先元素为参考点移动位置。
3. 绝对元素不占有空间
-
绝对定位和相对定位的使用
子绝父相
子级绝对定位，不会占有位置，可以放到父盒子里面任何地方，不会影响其他的兄弟盒子。 -
绝对定位和浮动的区别：
浮动元素不占空间，之前的元素占有空间不会变，浮动之后的元素会使用浮动元素的位置。
绝对定位元素也不占有空间，但是绝对定位的元素可以在父级元素上的任何位置，浮动元素只能在之后的元素上控制位置。
行内元素加上了浮动后变成行内块元素，可以设置宽度和高度。
行内元素加上了绝对定位或者固定定位之后，也可以设置宽度和高度。
浮动和定位元素都不会发送外边距合并的问题。
浮动元素只会压住他下面标准流的盒子，不会压住他下面标准流盒子里面的文字 浮动用于文字环绕效果
绝对定位或者固定定位会压住标准流下面的盒子以及文字
- 绝对定位的盒子水平居中
标准流盒子水平居中，只用使用margin ：auto
浮动只有左右
定位的盒子水平居中：
仅限在绝对定位中
1.先绝对定位，再left：宽度的一半50%
2.然后再margin - left：-盒子宽度的一半
3.4 固定定位
固定以浏览器为参照移动元素
跟父元素没有任何关系
不随滚动条滚动
不占有原先位置
固定定位也可以在版心右侧位置对齐
- 让固定定位的盒子left：50% 就到了版心的一半位置
- 让固定定位的盒子margin-left 版心宽度的一半，就能实现固定定位的盒子贴着版心右侧对齐
.fixposition{
position: fixed;
left: 50%;
top: 50%;
margin-left: 610px;
}
3.5 粘性定位
相对定位和粘性定位的混合
position： sticky；
top：10px
以浏览器为参考定位（固定定位的特点）
占有原先的位置（相对定位的特点）
必须添加top bottom left right 其中一个才生效
4. 元素的显示和隐藏
display 显示隐藏 none 隐藏 （不在占有原来的位置）block 块级显示 inline行内显示
visibility 显示隐藏 inherit继承父级的特性 hidden 隐藏（原来的位置保留） visible 可见
overflow 溢出部分显示隐藏 visible 可见 aoto 添加滚动条 hidden 溢出部分小时 scroll 总是显示滚动条
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
