标签嵌套使用:
1,块状元素一般作为父元素使用
2,H标题标签不能相互嵌套
3,P标签里面别嵌套h1-h6 div等块状元素,尽量套内联元素
4,P标签之间别相互嵌套
置换元素或非置换元素
置换元素:
标签在页面中的显示状态,通过当前标签里面属性来决定,置换元素在页面显示的过程中会生成一个框这个框能添加大小
非置换元素:只要不是置换元素就是非置换元素
定位:
第一步:怎么通知html的元素进行位置的变化
属性:position:;定位元素
作用:检索或者设置元素的定位方式
第二步:确定参照物
position的属性值们
第三部:坐标
left:;
right:;
top:;
bottom:;
position的属性值:
第一个定位:静态定位
position:static是默认值
第二个定位:绝对定位:
position:absoulte;
绝对定位的参照物:
定位的参照物是“已经有定位的父元素”如果一个元素或者是父元素都没有定位,按照整个文档来定位
绝对定位的特点:
绝对定位是不占据空间的,可以脱离文档流
第三个定位:相对定位
position:relative;
A,相对定位参照物是自身默认的位置
B,相对定位的特点,相对定位是占据空间不会破坏文档流
1,如果一个元素添加了position:absolute;margin:0 auto;还有浮动不起作用
2,相对定位position:relative;不会对浮动margin:0 auto;没有影响
1,给要做定位的元素的父元素添加:position:relative;形成参照物
2,给要做定位的元素添加position:absolute;
定位元素的层次关系和html结构和书写顺序有关,后写的层次比较高
控制定位元素的层次关系:
z-index:;
后面的属性值为一个数字,数值越大层次顺醋越高,z-index默认值是auto
第四个定位:固定定位
position:fixed;
A,固定定位参照物是浏览器窗口
B,固定定位脱离文档流,不占据空间
怎么让元素在窗口的正中间显示:
第一个方法:
position:fixed;
left:50%;
height:50%;
magin-left:宽度的一半;
margin-top:高度的一半;
第二种方法:
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
第三种方法:粘性定位
position:sticky;
粘性定位是relative和fixed的结合体
执行逻辑:
如果一个页面有滚动条,当前添加粘性定位的元素如果在页面内部执行的定位
锚点:就是超链接的一种,能实现在一个页面内,不同位置的跳转
锚点的使用:
<标签 id=”box”></标签>
<a href=”#box”></a>
效果:让对应的id名称的标签在浏览器最顶端显示
z-index调整定位元素的层叠顺序
Pc端宽高自适应:使用项目内部板块,更加灵活,能适应不同的pc端设备。适应不同的pc端分辨路,能适应各种数据渲染
width height设置方法及事项:
宽度自适应:
1,块状元素当宽度不去设置的时候,或者是设置width100%;跟随父元素宽度
高度自适应第一种情况:
height不去设置或者height:auto;元素的高度是被内容撑开的 但是height不去设置或者是auto存在问题:当内容极少 容器高度不会被撑开,影响版式布局 怎么解决当内容没有或内容极度减少 让容器保持一个最小高度
高度自适应第一种情况需求:
A, 当内容增加要内容撑开容器的高度
B, 当内容极少要让容器保持最小高度
最小高度的设置:属性:min-height:;
min-height:;现代高版本浏览器都能支出:但是低版本(ie6)不认min-height
补充:过滤器(兼容范畴)
1,ie6过滤器(下划线过滤器)
_属性:属性值;
只有ie6能识别带有下划线的属性
2,ie6不能识别!Important
Ie6不认为!Important给属性增加权重
解决高度塌陷:
1第一个方法:
给父元素添加overflow:hidden;
原理overflow:hidden;
触发了布局逻辑BFC
BFC规定:计算BFC高度的时候,浮动元素也参与计算
弊端:overflow:hidden;本身使用溢出隐藏会隐藏掉一些定位溢出的内容
第二个方法:(闭合浮动)
在浮动元素下方添加同级元素并且给当前元素添加的元素设置样式clear:both;
clear:;清除浮动
属性值:
left 清除左浮动
right 清除右浮动
both 清除二侧的浮动
忽略上方浮动元素预留出来的空间
弊端:重复添加空的元素,会造成代码冗余,形成负担
第三个方法:(万能清除法)
出现高度坍塌的元素:after{
content:” ”;
clear:both;
height:0;
overflow:hidden;
display:block;
visibility:hidden;
}
或者clear-fix:after{} 要解决高度坍塌的元素就起个class名clear-fix就行了
伪对象(伪元素)
1,::after{
content:” ”;
}
在某个容器内容的最后添加conter里面的内容
content可以是文本还可以是图片
2,::before{
content:” ”;
}
在某个容器的前面添加content里面的内容
3,:first-letter{
控制第一个字符的样式
}
4,:first-line{
控制第一行文字的样式
}
display:none; 隐藏元素,并且不占据空间
visibility:hidden; 隐藏元素,占据空间
如果想实现让一个元素在窗口平铺:html 和 body必须要有高度100%;