CSS 基础
一.CSS概述;
CSS ====>cascading style sheets 层叠样式表 其作用为:修饰页面 .在HTML 写好页面布局,数据的展示完成后进行
HTML 和CSS 对于标签属性的使用区别:
HTML属性不能重用,只能对当前 元素生效;
CSS可以有限的进行属性的重用,但是无法把重用用到极致,通过scss可以;w3c建议我们尽量使用CSS样式代替HTML的属性以达到增强代码的可重用性和可维护性
二.CSS的语法规范
常用的样式属性
color :颜色; //设置对应元素的文本颜色
font-size:28px; //设置对应元素的字体大小
background-color:颜色; //设置对应元素的背景颜色
1.CSS的使用方法,有3种样式
①内联样式又称内样式 :在标签开始标记中,添加style属性,编写样式
其特点是:内联样式不能重用,其默认优先级最高(这与权重有关本博客后面详细介绍)
注意:内联样式在项目中基本不用,仅学习和测试的时候使用较多
②内部样式 :在<head></head>中编写<style></style>
在style中写样式,结构为: 选择器{样式声明1;样式声明2....}
选择器可以;理解为匹配到对应的能应用此样式的元素可以是一个也可以是很多个 (本博客后面详细介绍)
样式声明格式为 样式属性:值; //属性 (冒号): 值 ; (分号) 分号必须要有除非为最后一个样式 不然会报错
内部样式的特点:样式在当前页面可以重用,但多页面不能重用
注意:通内样式一样在项目中使用较少,仅在学习和测试时使用较多;
③外部样式
需要单独创建CSS文件,在HTML的head标签使用link一如CSS文件格式为
<link rel='stylesheet' href='css文件路径'/> 通目录下路径可以只写文件名
注意rel属性是指引入文件与当前HTML的关系 是必须要写的
在css文件中书写格式为 : 选择器1{样式声明1;样式声明2....} 选择器2{样式声明1;样式声明2....}
外部样式的特点:所有页面都可以引用 是项目中重要的样式使用方式
注意:
I,写css文件时对于换行没有特别的要求(但为了观看方便还是要注意换行!)
II,带有单位的数值,除了0都必须编写单位
III,一个样式声明中只有最后一个样式值可以省略分号;
IV,多个{}之间,不用添加分号
2.css样式的特征
①继承性(只关注文本样式的继承如文本字体大小和颜色其他样式不考虑)
后代元素会使用祖先元素设置的文本样式
注意，a标签不继承祖先元素的字体颜色会继承字体大小 ;而button标签两者都不继承
②层叠性
如果给一个元素在不同位置设置多个样式.如果样式不冲突,样式都会作用到这个元素,如果冲突就要考虑样式优先级(比较权重)
③默认优先级
最高优先级 内联样式
内部样式/外部样式 就近原则
最低优先级 浏览器的默认样式
可以通过浏览器检查功能查看样式显示的顺序是按照优先级顺序显示的
④调整样式的优先级
在样式的值和分号之间,添加!important 如 color: blue !important;
一旦某个样式属性添加了!important,这个属性直接获取到最高优先级,且比内联样式的优先级还高;
但是要注意:
I多个冲突的样式都添加!important 就按照就近原则处理;
II 语义要求,内联样式中不允许添加!important
三选择器
选择器的作用:规范了页面中哪些元素能够使用定义好的样式
选择器就是为了匹配元素,就是一个条件,符合这个条件的元素就应用样式
选择器分8种(接下来一一介绍)
1,通用选择器
形似 *{样式声明;} 匹配页面中的所有元素的样式 由于'*' 的效率低,项目中最好少用 最常见的用法为
*{margin:0;padding:0;box-sizing:border-box;}效果为 所有元素清除内外边距,所有元素改变盒子模型计算方式;
上面的做法是为了css reset 统一不同浏览器赋予元素的默认值
2,元素选择器(标签选择器)
标签关键字{样式声明;} 如div{color:red;} 匹配页面中某标签的默认样式
3.ID选择器(私有定制)
通过元素的id来匹配元素
书写格式:#元素id{样式声明;} 如 #d1{color:red;}
4,类选择器
项目中使用较多的选择器
.类名{样式声明;} 如.c1{color:red;} 注意类名前的点必须
匹配方式<标签 class=''类名''>
类选择器的其他用法;
① 多类选择器<标签 class=''类名1 类名2 类名3 ......''>可以应用多个样式
②分类选择器,更精准的匹配目标元素
.类名1.类名2{样式声明;} 匹配同时引用了这两个类名的元素并应用样式
标签关键字.类名{样式声明} 匹配引用这个类名的这个元素 并应用样式
5.群组选择器
写法为:选择器1,选择器2,选择器3....{样式声明;} 一次性匹配多个元素应用样式 每个选择器用逗号隔开 如 #d1,#d2,#d3{color;red;};
6,后代选择器
通过元素的后代关系,匹配元素
后代:一级或多级嵌套关系
写法为:选择器1 选择器2 选择器3 ...{样式声明} 选择器1后面的选择器为其后代(有嵌套关系)每个选择器用空格隔开 如#d1 #d2 #d3 {color:red;}
7,子代选择器
通过元素的子代关系匹配元素
子代:一级嵌套
写法为:选择器1>选择器2>选择器3....{样式声明}; 选择器之间用>大于符号连接 如#d1>div>p>i>span{background-color:blue}
后代选择和后代选择器可以混合使用 如 #d1 div>p>span{color:red}
8,伪类选择器
其作用为匹配一个元素的不同状态下的不同样式
所有元素都支持的伪类:
选择器:hover{样式声明} 匹配元素被鼠标悬停时显示的样式
选择器:active{样式声明} 匹配元素被激活时的状态(鼠标左键点住不松手)时显示的样式
选择器:focus{样式声明} 匹配元素获取焦点时的状态的样式
a标签专属的伪类
选择器:link{样式声明} 匹配元素尚未被访问过的状态
选择器:visited{样式选择} 匹配元素已经被访问过的状态
注意:当:link :visited :hover :active 都作用在一个元素上时 必须按照规定的顺序编写,不然又部分样式不能成功作用到该元素上;
需要按照:爱恨原则 love & hate :link :visited :hover :active 的顺序写
最后介绍下选择器的权值问题:
权值:每个选择器都有应用的重要程度,称为权值;
权值越高,优先先应用显示; 权值排序如下:
权值的特点:
1,当一个选择器中包含多个选择器(如继承)把所有的权值相加,计算出最终的权值,权值大的优先显示
2,权值相同,遵循就近原则;
3,群组选择器,各算各的,不相加;4,选择器的相加,不能进位(不能超过本身的最大数量级如多个元素选择器继承关系下相加权值无论嵌套多少层其权值最大只能为9不会进到10)
接下来介绍css中的样式
一,,尺寸属性:width:和height
取值:可以是以px为单位的数值;可以是%号数值 取父元素对应的尺寸的百分比
通过min-width:最小宽度 ;max-width:最大宽度 可以设置元素的最大最小值无论页面如何变化都不会超出范围min-height 和 max-height 类似
注意:
①页面中大都是宽度有限,高度无限,如果元素的父元素是body,那么body的高是无限的,此时这个元素的高度不能取百分比;
②,如果元素的父元素,有高度,那么其高度可以使用百分比取值
尺寸的单位还有其他的但不常用如下:
in 英寸 1in=2.54cm
pt 磅值 1pt=1/72in 可以用pt修饰字号的大小
cm 厘米 mm 毫米
em 以父元素设置值为一个基本单位 1em=父元素 的值
rem 以html设置的值为一个基本单位, 1rem=HTML设置的值 默认情况为1rem=16px;可以在style中通过html{font-size: 30px;}设置HTML的值
注意 img标签可设置 max-width 100% ,图片可以缩小,可以放大但不会超过图片本身尺寸的100%即img的width 超过100% 图片大小不会发生改变
二,页面中允许设置尺寸的元素
所有自带高宽属性的元素,都能设置尺寸(img,table,td.....等)
三,溢出的处理
尺寸小,内容过多,会产生溢出效果 默认情况下为纵向溢出
通过设置overflow属性可以改变溢出方式
| 属性值 | 效果 |
| visible | 默认值,溢出可见 |
| hidden | 溢出部分不可见 |
| scroll | 添加滚动条(不管是否溢出,都添加滚动条) |
| overflow-x | 沿x轴添加滚动条 |
| overflow-y | 沿y轴添加滚动条 |
| auto | 自动.内容不溢出没有滚动条,溢出时自动添加滚动条 |
四 颜色属性color
| 调用方式 | 解释及例子 |
| 通过颜色单词 | red yellow.... |
| 以#开头的6位16进制数 | #000000~#ffffff |
| 通过rgb()取值 |
括号内为(0~255 0~255 0~255)三位数 等价于16进制的00~ff 转为10进制后为 0~255 |
| 通过rgba() |
rgba(0,0,0,0)为全透明最后一位数的取值范围 为0到1 0为全透明 1为不透明 全为0等价于transparent 前面3位数同rgb取值相同 |
注意:#开头的方式可以简写#ff0000---->#f00 ,#00ff00----->#0f0
五,边框
1,同时设置4个方向的边框的属性通过 border:width style color
| 属性 | 作用 |
| width | 设置边框的出现1px |
| style |
边框的样式 solid 实线 dashed 短线的虚线 dotted 圆点的虚线 double 双实线 |
| color |
边框的颜色 |
最简短的方式:border:style
清除边框 :border:none/0 推荐用0因为其短
2.单边的设置
单独设置某一条边的3个属性
border-top:10px solid #f00;
border-right:5px dotted #0f0;
border-bottom:10px dashed #00f;
border-left:5px double #000;
取消某条边的边框:border-top/border-right/border-bottom/border-left:0
3,单独设置某一个属性
同时设置4条边的某一属性
border-style: solid;
border-color: #aaf;
border-width: 10px;
4,单边属性值的设置
border-top-width
border-top-style
border-top-color
其他3条边类似;
5,边框的倒角(把边框倒成圆角)
同时设置4个圆角
border-radius:圆角半径
取值:以px为单位的数值(rem也可);%也可
单独设置某一角
border-top-left-radius: 圆角半径;
border-top-right-radius: 圆角半径;
border-bottom-left-radius: 圆角半径;
border-bottom-right-radius: 圆角半径;
6,边框的阴影
box-shadow:h-shadow v-shadow blur spread color;
| 属性 | 作用 |
| h-shadow | 阴影的水平偏移量以px为单位 |
| v-shadow | 垂直偏移量以px为单位 |
| blur | 模糊程度以px为单位 |
| srpead | 阴影的大小以px为单位 |
| color | 颜色 |
| inset | 内部阴影(根据需求写,可以不写) |
7,轮廓:绘制在边框外部的一圈线条,不占页面空间
outline:width style color
清空轮廓:outline:0
六.盒子模型--框模型
所有元素皆为框-----所有元素在页面上都占据空间
盒子模型：浏览器默认的元素实际占地大小的计算公式
元素实际的占地宽度
左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素实际的占地高度
上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距
外边距margin：边框以外的距离，元素与元素之间的距离
内边距padding:边框到内容区域之间的距离
1,外边距: 如上图所示的部分,页面中外边距没有颜色,是透明的,显示的是父元素的背景颜色
通过改变外边距可以让元素发生位移效果,但是按现在所介绍方法只有在左上外边距才会发
生位移效果,其语法为:
| 语法 | 效果 |
| margin:v1 | 一次性设置4个方向相同的外边距 |
| margin-top | 单独设置上外边距 |
| margin-right | 单独设置右外边距 |
| margin-bottom | 单独设置下外边距 |
| margin-left | 单独设置左外边距 |
v1的取值:px为单位的数字;
%上右下做都是父元素宽度的百分比值;
auto外边距特有的值,auto对上下外边距无效,设置左右外边距,会让当前的元素本身在水平方向上居中显示,对于行内和行内块,auto无效
| 简写方式 | 效果 |
| margin:v1 | 同时设置4个方向的外边距 |
| margin:v1 v2 |
设置上下 左右 如 margin:0 auto ; margin:100 auto; |
| margin:v1 v2 v3 |
设置上 左右 下 如 margin:10px auto 20px |
| margin :v1 v2 v3 v4 | 设置上 右 下 左的外边距 |
总结:外边距可用来做元素位置的微调,这只元素之间的距离
2,外边距引发的特殊情况
①外边距的合并:当两个垂直外边距相遇的时候,他们将会合并成一个,值以大的为准.
解决办法:单独只写一个元素的垂直外边距,在设计的时候进行规避这种情况
②总结块级,行内元素和行内块元素的区别
| 行内元素 | 块级元素 | 行内块 | |
| 设置width/height | 设置宽高无效 |
可以设置宽高默认宽度为父元素100%,默认高度为0靠内容撑开 |
可以设置宽高浏览器默认会给行内块设置一个宽高。但是不同浏览器设置的默认宽高不同，我们需要些css reset进行统一 |
| 设置margin | 设置上下外边距无效 | 4个方向皆可生效 | 4个方向都会生效但是修改某一行内块元素上下外边距使之发生垂直位移时时会带着同一行其他行内元素一起发生位移 |
| 换行行为 | 与其他行内块,行内块共用一行,一行放不下自动折行 | 独占一行 | 与其他行内块,行内块共用一行,一行放不下自动折行 |
注意:在之前介绍HTML的博客中提到过table设置的宽高与内容大小有关 以大的为准
③自带外边距的元素:
body,p,h1,..h6,ul ol pre 等等都自带有外边距且不相同
body--4个方向都为8px
ul-----上下为16px 左右外边距为40px
注意:不同浏览器给元素的默认内外边距有可能不同,所以在编写样式之前要用css reset进行统一*{margin:0;padding:0}
④外边距溢出解决办法(父元素和子元素都为div)
满足这两情况:1父元素没有上边框;2父元素和子元素的内容区域的上边沿重合
子元素的上外边距会作用到父元素上
解决方案:I,给父元素添加上边框border,但是增加了父元素的实际高度
II,给父元素添加上内边距,但是增加了父元素的实际高度
III,给父元素添加overflow:hidden/auto 但父元素就不能溢出显示内容了
IV,在父元素与子元素之间 再添加一个空的table标签
3,内边距:改变内边距,会改变边框内的范围,让用户感觉改变了元素的大小
使用的场合:把元素撑开;很多时候,元素之间的距离也可以用内边距(即当元素与元素之间没有边框时)
①使用语法
| 语法 | 作用 |
| padding :v1 | 设置4个方向的内边距 |
| padding-top:v1 | 单独设置上内边距 |
| padding-right:v1 | 单独设置右内边距 |
| padding-bottom:v1 | 单独设置下内边距 |
| padding-left:v1 | 单独设置左内边距 |
| padding:v1 v2 | 设置上下 左右 |
| padding:v1 v2 v3 | 设置上 左右 下 |
| padding:v1 v2 v3 v4 | 设置上右下左 |
v1的取值:px为单位的数字,%百分比值;
注意padding没有auto值
4,改变盒子模型的计算方式
box-sizing:content-box;页面的默认方式代表的范围如图
box-sizing:border-box;代表的范围如图
其作用是(在一定范围内)改变内边距或border宽度时不会改变元素整体的大小只是内部发生大小改变
七,背景
1,背景颜色background-color:合法的颜色值 (可以加transparent使其透明)
2,背景图片backgro-image:url(图片路径)
3,背景图片的平铺
| backgro-repeat: | repeat | 默认值,纵横方向都平铺 |
| no-repeat | 不平铺 | |
| background-repeat | repeat-x | 横向平铺 |
| repeat-y | 纵行平铺 |
4,背景图片的位置
| 语法 | 作用 |
| background-position:300px | 只设置x轴位置,y轴默认居中 |
| backgroud-position:x y |
x:left/center/right y:top/center/bottom 分别设置x轴位置和y轴位置 取值可以是px % 和关键字 |
5,背景图片的尺寸
| 语法 | 作用 |
| background-size:v1 | 同时设置x轴和y轴的尺寸 |
| background-size:x y |
分别设置x轴y轴的尺寸 取值可以是:px为单位的数字 %百分比 cover:图片等比缩放,完全覆盖元素,但图片可能显示不完整 contain:图片等比缩放,图片完整显示,但可能出现元未被图片占满即有空白的情况 |
6,背景的简写方式
backgroud:color img repeat position;
注意:简写没有size,size需要单独写;编写顺序没有固定的要求;
最简编写方式:background:img/color;
八,渐变:多种颜色,平缓变化的一种显示效果,让元素颜色更有层次感和立体感
控制渐变的因素---色标:这个颜色出现的位置,颜色值
色标的取值方式:
①颜色 %; 如 :#f00 0% ,#fff 100%; //表示从0%的 起始位置的#f00色 渐变到结束位置100%的#fff色
②颜色 px ;如#f00 1px ,#fff 100px; //表示从1px起始位置的#f00色 渐变到结束位置100px的#fff色
③颜色 ;只写(最少两个颜色)颜色不写位置自动平均分配位置
渐变的分类:有3种接下来一一介绍
注意,最后一个色标不用逗号,最后一个之前的色标都要用逗号隔开
1,线性渐变
以直线的方式渐变颜色
background-image: linear-gradient(方向,色标1,色标2.........);
方向取值:
I.终点 to top/to right/to bottom/to left
II.角度 45deg或其他角度(数字+deg)
2,径向渐变:以圆的方式渐变颜色
background: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2........);
半径，px为单位的数字
圆心：1.px为单位的数字
2.百分比%
3.关键字 x:left/center/right y:top/center/bottom
注意，如果色标使用%，是半径的百分比，改变半径，色标位置会变化
px，就跟半径没关系了
3重复渐变
①重复的线性渐变
background-image: repeating-linear-gradient(0deg,#000 0px,#0ff 1px,#000 2px,#ff0 3px,#000 4px); //按照现有的色标重复至结束
②重复的径向渐变
background: repeating-radial-gradient(100px at center center, #000 0%,#0ff 1%,#000 2%,#ff0 3%,#000 4%); #以写入的色标为一个单位重复显示至一个圆
4.浏览器对渐变的兼容问题
渐变属性，支持低版本浏览器的写法
I.不同浏览器内部核心代码---内核
-webkit- chrome/safari/edge
-moz- firefox
-o- opera
-ms- IE
II.如果不写兼容的前缀，一定使用终点 to left、to top......
如:background-image: linear-gradien(to bottom,色标1,色标2,色标3...) bottom为终点
III.如果编写兼容的内核前缀，方向一定写起点，不加to ,top/right/bottom/left
如:backgroud:-webkid-linear-gradien(bottom,色标1,色标2,色标3...) bottom为起点
九,文本格式化
1,字体的属性
|
①字体大小 font-size: px/pt为单位的数字 ②字体系列-----硬件安装对应的字体库 font-family: "wingdings 2",仿宋,"mv boli"; 注意：1.推荐中间有空格字体系列使用双引号括起来 2.可以使用,分割，编写多个字体系列，从前往后，使用找到的第一个字体 3.慎用微软和方正的字体收费! ③字体加粗 font-weight: normal;默认值 400 bold; 加粗 600 lighter 细 300 bolder 更粗 700 不带单位的数字，必须是100的整倍数，最大值为1000 ④字体样式，正常和斜体 font-style: italic/normal; ⑤小型大写字母 font-variant: small-caps; 常用于英文报纸的头条正文 ⑥字体的简写方式 font:style variant weight size family; 注意：1.顺序问题，不能改变顺序 2.最简方式，font:size family; |
2,文本属性
|
①字体颜色 color ②文本的水平对齐方式 设置元素内部的文本，行内，行内块水平对齐方式，可以被后代元素继承 text-align: left/center/right/justify两端对齐 text-align: center;和margin: 0 auto;的区别 text-align: center;让元素内部的文本，行内，行内块水平居中 margin: 0 auto; 让当前块级元素水平居中 ③文本的垂直对齐---行高 如果行高大于字号，那么文本会自动在行高的范围内垂直居中显示 line-height: px为单位的数字 不带单位的数字，代表行高是字号的n倍 对于单行文本，我们通常会把行高设置为容器的高度，让文本在容器中垂直居中 对于多行文本，只能通过行高和上下内边距去计算 ④文本的线条修饰 text-decoration: underline; 下划线 overline 上划线 line-through 删除线 none；去除所有线条 (a标签去除下划线) ⑤首行缩进text-indent: 64px; text-shadow:h-shadow v-shadow blur color; h-shadow 水平偏移 v-shadow 垂直偏移 blur 模糊程度 color 阴影颜色 ⑦文本溢出变点 text-overflow: ellipsis; |
十表格相关的样式
1,之前提到的样式:
table,尺寸，边框，背景，文本，margin,padding可以生效
td/th ,尺寸，边框，背景，文本，padding有效，但是margin无效
2,表格特有的样式
①td/th
表格内文本的垂直对齐方式
vertical-align: top/middle/bottom;
②table
I.设置边框的合并状态
border-collapse: separate; 默认值，边框分离 ;;collapse 边框合并
II.设置边框之间的距离
border-spacing:--px (0px边框之间的距离为零)
前提，表格必须是分离状态，如果是合并状态，就失效即处于border-collapse: separate
3.表格标题的位置(前提table标签下有caption标签)
caption-side: top/bottom;
4.设置表格的显示规则
table-layout: auto/fixed
十一,其他常用的样式
1,显示方式
| 调用方式 | 作用 |
| display:inline | 按照函内元素的规则显示 |
| display:block | 按照块级元素的规则显示在li中应用会去掉其前面的样式 |
| display:inline-block | 按照行内块的规则显示 |
| display:table | 按照表格的规则显示:宽度以内容大的为准 |
| display:none | 脱离文档流的内容隐藏 |
2,显示效果
visibility:visible;显示
visibility:hidden隐藏,不脱离文档流的隐藏
display:none:脱离文档流的内容隐藏,不占据页面空间,visibility:hidden,知识隐藏不脱离文档流的内容,但其依然占据页面原来的空间
3,透明度
rgba(r,g,b,alpha)让当前元素颜色变透明前值都为零是等价于transparent
opacity:0~1;0位全透明,1位不透明,让内部(后代元素)所有颜色都变透明
4,垂直对齐方式的设置
vertical-align:top/middle/bottom不同元素对应默认值不同
| 元素 | 默认位置 |
| table中设置td的
vertical-align:top/ middle(默认值)/bottom |
默认位置为middle |
| 行内块 | 默认值为middle |
| img | 默认为基线(baseline)靠近bottom下面的位置 |
5,设置光标
介绍几个常用的
cursor:属性值
| 属性值 | 效果 |
| default | 箭头默认样式 |
| pointer | 小手的样子 |
| wait | 加载转圈 |
| text | 可输入内容的提示竖线 |
| help | 箭头下有个小问号 |
| crosshair | 十字定位的样式 |
如：
.myself_cursor_style{ cursor: url('https://blog-static.cnblogs.com/files/CIBud/line-cursor.ico') ,auto; } //注意绝对路径 光标在后缀是cur或者ico 并且记住加上逗号 auto或其他鼠标样式，以免前者不生效
6,列表的样式
| 样式 | 作用 |
| list-style-type:none | 去掉列表标识(如实心圆等),none为其他值也可设置为其他样式的列表标识 |
| list-style-image:url(1.png) | 设置图片为列表的标识(注意用小图片不能过大,因为图片大小无法调整) |
| list-style-position:outside/inside | 设置标识在li的外部或内部 |
简写方式 list-style:type image position
常用list-style:none去除标识项
十二.元素的定位:可以改变元素在页面中的位置(把原始在页面上自由的安排位置)
定位的分类:普通流定位,浮动定位,相对定位,绝对定位,固定定位:介绍来一一介绍
1,普通流定位:
I每个元素在页面上都有自己的空间
II.之前元素把空格让开(如被删除后)，后续元素回去上前补位
III.块级元素按照从上往下的顺序逐个排列，单独成行
IV行内和行内块在一行中从左往右排列
2.浮动定位:可以让块级元素横向显示
float:none; 元素不浮动
left; 元素脱离文档流，在浮动发生的当前行向左对齐
right 元素脱离文档流，在浮动发生的当前行向右对齐
2.1浮动的特点
①元素一旦浮动，脱离文档流(元素不占页面空间，后续元素上前补位)
②元素浮动之后，会停靠在父元素的左/右侧，或者其它浮动元素的后面
③父元素放不下所有浮动元素时，放不下的元素会折行显示
2.2浮动引发的特殊情况
①浮动元素的占位问题:浮动元素会在浮动方向上占据位置，不许其它元素过来补位
②脱离文档的元素不设置宽度的话:元素脱离文档之后，宽度靠内容撑开，没内容就为0
③元素一旦脱离文档流自动变为块级元素(设置宽高有效，上下外边距有效)
④文本，行内元素，行内块，不会被浮动元素压在下面，而是巧妙的避开
2.3清除浮动
清除之前浮动元素带来的影响，不会浮动元素压在下面
clear：left;清除左浮动元素带来的影响
right;清除右浮动元素带来的影响
both；清除所有浮动元素带来的影响
2.4由于浮动引发的高度坍塌
父元素不设置高度，所有子元素都浮动脱离文档流
父元素认为内部没有元素，就是失去高度了
解决方案：
I.给父元素设置高度，必须知道具体子元素数量和具体高度值
只有在子元素数量和高度确定的情况下使用
II.父元素也浮动
会影响其他兄弟元素，还会影响父元素的父元素
III.给父元素设置overflow:hidden/auto;
父元素不能设置溢出显示
IV给其他浮动元素添加一个兄弟元素div不设置浮动,设置clear:both内容为空这样就能撑开父元素
3,相对定位/绝对定位/固定定位 其元素被position修饰
取值为
position:static 静态,默认稳定流
position:relative(相对定位)
position:absolute(绝对定位)
position:fixed(固定定位)
上面四种情况中只要不是static其他三种定位被元素应用后,应用的元素称为已定位元素,同时
会解锁4个偏移属性(未解锁调用偏移属性无效)top/right/bottom/left(一般上下取一个值,左右取一个值,同时取左右以左为准,同时取上下,以上为准)
同时解锁堆叠属性z-index;
接下来具体的一一介绍
3.1相对定位
position:relative;配合偏移属性:
特点:不脱离文档流即不会影响其他元素的布局,偏移时会相对自己本身原来的位置做偏移
使用场合:①类似于margin,做元素位置的微调②作为绝对定位元素的祖先级元素(子绝父相)
3.2相对定位
position:absolute;配合偏移属性
特点:会脱离文档流
如果没有已定位的祖先级元素，相对于body左上角定位(浏览器的可视区域)偏移
如果有已定位的祖先级元素，相对于"最近的""已定位的""祖先级"元素左上角偏移
relative不脱离文档流( 不写偏移属性时，用户看上去跟没写定位是一样的)，不影响其他元素的布局更适用于当做absolute的祖先级元素已定位元素
3.3固定定位
position:fixed 相对于body(可视区域左上角)做偏移定位 ,会脱离文档流
4堆叠顺序
默认的堆叠顺序，html中后写的元素堆叠顺序高
我们可以使用z-index:n; 来调整堆叠顺序,n的默认值为0，理论最大值21亿
一般取值为-1000~~1000
特点：
①只对已定位元素生效
②浮动和堆叠顺序的关系
浮动不能设置堆叠顺序，
浮动元素的默认堆叠顺序是-1~~0之间
③堆叠顺序对父子关系的元素无效，子元素永远在父元素的上面
浙公网安备 33010602011771号