六 元素的类型
这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
感激相遇 你好 我是y大壮
作者：y大壮
链接：juejin.cn/user/756923… 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系
1.元素的分类
根据css显示分类，xhtml元素被分为三种类型：块状元素，内联元素，可变元素
块级元素特点
a).块状元素在网页中就是以块显示，就是元素显示为矩形区域
b).默认下，块状元素会占据一行。就是两个块状会按顺序自上而下排列。
C).块状元素都可以定义自己的宽度和高度。
D).块状元素一般作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。可以叫做一个盒子。
常见的块级元素
块级元素
div : 最常用的块级元素
dl : 和dt-dd搭配使用的块级元素
form : 交互表单
h1-h6 : 大标题
hr : 水平分隔线
ol : 有序列表
p : 段落
ul : 无序列表
fieldset : 表单字段集
例：
<style type="text/css">
div{ width:200px; height:30px; background:red;}
p{ width:200px; height:60px; background: #0CC;} //块元素就是可以自己占据一行，自己定义宽高
h1{ width:300px; height:90px; background:#C0C;}
</style>
<div>我是vid</div>
<p>我是段落p</p>
<h1>我是标题hq</h1>
2.内联元素(行内元素)
a).内联元素的表现形式是始终以行内逐个进行显示
b).内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度，高度和宽度来确定，它的只能根据所包含内容的高度最小内容单元也会呈现矩形形状
c).内联元素也会遵循模型基本规则，如可以定义padding.border,margin ,background等属性，但个别属性不能正确显示{padding-top:;margin-top/botton:;}
常见的内联元素：
行内元素：
a : 超链接(锚点)
br : 换行
i : 斜体
em : 强调
label : 表单标签
span : 常用内联容器，定义文本内区块
strong : 粗体强调
textarea : 多选文本输入框
u : 下划线
select : 项目选择
3.常见的行内块元素
img : 图片
input : 输入框
4.元素类型的转换
需要根据上下文关系确定该元素是块元素或者内联元素。
盒子模型可通过display属性来改变默认的显示类型。
元素的转变 {display:block}
display属性和属性值(18个属性值)
作用：该属性设置或检索对象元素应该生成的盒模型的类型
1.block块状，就是把内联元素转换成块级元素
2.inline ： 把块元素转换成内联元素。
3.当元素设置了float属性后，就相当于给该元素加了display：block;声明;
4.inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行（只有这一个元素类型支持vertical-align属性）img,input（行内块元素）
5.none：此元素不会被显示。
6.list-item:将元素转换成列表,li的默认类型
5.图片文字的居中
text-align:center; 水平居中
vertical-align:middle; 垂直居中
例：
<style type="text/css">
div{ width:200px; height:30px; background:red; display:inline;} #加display:inline让块元素元素变成内联元素
h1{ width:300px; height:90px; background:#C0C;}
a{ width:300px; height:300px; background:#999; display:block; text-align:center;} #加display:block让内联元素变成块元素，在用text-aling:center：水平居中
a span{ display:inline-block; width:0; height:100%; overflow:hidden; vertical-align: middle;} #设置垂直居中
a img{ display:inline-block} #把图片设置成内联
</style>
<h1>我是标题hq</h1>
<div>我是vid</div>
<a href="https://www.baidu.com" <img src="" />>
我是一个a链接
<span> </span>
</a>
七 CSS定位
1. position定位属性
statci：默认值。位置设置为static的元素会正常显示
absolute:相对于父级元素的绝对定位，浮出，脱离文档流，不占据空间，。若父级没有定位，则以html可直接指定 left top right bottom
例：
<style type="text/css">
.box1{ width:60px;height:60px; background:blue; position: absolute; left:100px; top: 50px;;}
.box2{ width:300px; height:200px; background:red; left:0px; top:0px;}
</style>
<div class="box2" >
<div class="box1"> </div> //父级相对定位，子集绝对定位 （嵌套）
</div>
relative:是相对于默认位置的偏移定位，通过设置left,top right,bottom值可将其移至相对于其正常位置的地方(相对于自己的开始位置发生的位置上的移动 )
fixed:相对浏览器的绝对定位，是相对于浏览器容器的指定坐标进行定位，些元素的位置可通过left top right botton来规定，不论容器滚动与否，元素都会留在那个位置。(如页面中的小广告一直跟容器滚动走)
z-index:1 :放在最上面
例： 如果几个文本框在一起的话用 z-index:2 z-index3; 数量大的就在上面
<style type="text/css">
*{ margin:0; padding:0}
.box1{ width:300px;height:200px; background:blue; position: absolute; z-index:2} //用position：absolute; 让文本框浮动在最上面和float:一样
.box2{ width:300px; height:200px; background:red; position: relative; right:100px;} //position:relative;只能在原定的文本框区浮动
.box3{ width:300px; height:200px; background:yellow; position:fixed; right:10px; bottom:20px;} //position:fixed；和网页小弹窗一样跟页面走
.box4{ height:9000px;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
2.让一元素始终在窗口水平，垂直位置居中。
例：
<style type="text/css">
.box1{ width:300px; height:300px; background:blue; position:fixed; top:0px; right:0px; bottom:0px; left:0px; margin: auto;} //先用position:fixed让他浮动在上方。
或者： .box1{ width:300px; height:300px; background:blue;
position:fixed; left:50%; top:50%; margin:-150px 0 0 -150px;
}
</style>
<body>
<div class="box1"></div>
</body>
八 命名锚点链接
命名锚点链接的应用
定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接运用相当普通：
应用：
命名锚点的作用： 在同一页面内的不同位置进行跳转。
制作锚标记：
1.给元素定义命名锚记名 语法：< 标记 id="命名锚记名"> </标记>
2.命名锚记连接 语法： < a href="#命名锚记名称"> </a>
例：
<style type="text/css">
div{ height:2000px;}
</style>
<body>
<a href="#top1">001</a> //一定要记住加#号在前面 ，#命名锚记名称
<a href="#top2">002</a>
<a href="#top3">003</a>
<div id="top1"><img src="images/005EpFX5gy1g5h4jy8eu9j30tz1cnqfy.jpg" /></div>
<div id="top2" > <img src="images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg" /></div>
<div id="top3" > <img src="images/005EpFX5gy1g5h4k1518ij30tz1c9n6r.jpg" /></div>
</body>
九 CSS Sprites的原理
1.图片整合技术 （就是把多个小图片搞成一张图片，在在那一张图片中选择小图片） 精灵图
a).即将多张图片合为一张整图，然后用background-position 来实现 背景图片的定位技术。
b).图片整合的优势：通过图片整合来减少对服务器的请求次数，提高页面加载速度 通过整合图片来减小图片的体积。
例：
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
ul li a{ display:block; width:40px; height:43px; line-height:50px; background: url(images/%E7%B2%BE%E7%81%B5%E5%9B%BE%E4%B8%8A.png); //图片一定要是png 和jpg
padding-left:42px;
}
.top2{ background-position:-120px;0px;}
</style>
<body>
<ul>
<li class="to1">
<a href="#" > 首页</a>
</li>
<li class="to2">
<a href="#"> 直播</a>
</li>
</ul>
</body>
2.滑动门技术
a).什么是滑动门
滑动门是一个形象的称呼，它复用CSS背景图像可层叠性，并允许彼此之上进行滑动来创建一些特殊动态效果。
b).滑动门特征：
通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。
例：
<style type="text/css">
*{margin:0;padding:0;}
ul{ list-style:none; background:red; height:30px;;}
ul li{ float:left;}
ul li a{ display:block; height:20px; line-height:20px; background:url(images/%E6%BB%91%E5%8A%A8%E9%97%A82.png) no-repeat; padding-left:4px;
}
ul li a span{ display:block; background:url(images/%E6%BB%91%E5%8A%A8%E9%97%A81.png) no-repeat top right; padding-left:6px; padding-right:10px;}
</style>
</head>
<body>
<ul>
<li>
<a href="#" >
<span>滑动门1</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" >
<span>滑动门2</span>
</a>
</li>
</ul><ul>
<li>
<a href="#" >
<span>滑动门3</span>
</a>
</li>
</ul>
3. CSS圆角
圆角边框设置
CSS圆角设置：
border-:数值
border-radius:
例： border-radius:50px;
十 宽高自适应属性
1.网页布局中经常定义 元素的宽和高。
a).宽度自适应 元素宽度设置为100% 。（块元素宽度默认为100%）
div{ height:300px; background:red;}
b).高度自适应 元素的高度自适应：设置如：div{height:auto;}
body.html{ height::100%}
.top1{ background:red;}
<div class="top1">1
2<br />
</div>
窗口的高度自适应：
设置：body,html{height:100%;} div{height:30%;}
元素高宽最大，最小值设置
min-height(最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
2.过滤器（fiter）
a).下划线属性过滤器
当在一个属性前面增加了一个下划线后(IE6以下)
语法：选择符{_属性：属性值;}
! important:最高权重
3.浮动元素高度自适应(高度塌陷)
a). 给父元素加 overflow:hidden;
b). 给父元素加 height
c).在浮动元素下方添加空div，并给该元素添加 声明: div{clear:booth;height:0;overflow:hidden;}
d). 万能清除浮动法
.clear:after{content:" ";display:block;width:100%;height:0; overflow:hidden; clear:both; visibility:hidden;}
4.伪对象选择器
a). ::after:与content属性一起使用，定义在对象后的内容。
语法：选择符: :after{content:" 文字" ;} 选择符: :after{content:url(图片路径);}
例：
<style type="text/css">
.top1{ width:300px; height:300px; border:3px solid red;}
div:after{ content:'我是不可以选中,不可以复制的文字'}
</style>
<body>
<div class="top1"> 我是div中的内容<br /> </div>
</body>
b). ::before:与content属性一起使用，定义在对象前的内容。
div:before{content:"我是前面的文字"}
c). ::first-letter定义对象内第一个字符的样式。
说明： *(该伪元素只能用于块级元素)]
div:first-letter{ color:blue; font-size:32px;}
d). ::first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)
div:first-line{ color:yellow; font-size:20px;}
十一 浏览器兼容
IE6常见CSS解析BUG及hack
1.图片有边框BUG
当图片加<a href="#"> </a> 在IE上会出现边框
Hack:给图片加border:0 或者 border:0 none;
例：
<style type="text/css">
img{ border:0}
</style>
<img src="images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg" ;/>
2.图片间隙
给div盒子里面嵌套标签会产出3-6的象素间隙
例1： 就是把它设置成块元素
<style type="text/css">
div{border:3px solid red;}
div img{ display:block;}
</style>
<div>
<img src="images/滑动门1.png" />
</div>
例2：设置浮动
<style type="text/css">
div{border:3px solid red;overflow:hidden}
div img{ float:left;}
</style>
<div>
<img src="images/滑动门1.png" />
</div>
3.双倍浮向(双倍边距)(只有IE6出现)
当ie6以下出现解析浮动时，会错误把浮向边边界(margin)加倍显示
给元素添加声明：_display:inline
div{width:300px; height:200px; border:3px solid red; background:blue; float: left; margin:50px; display: inline;}
4.默认高度(IE6,7)
部分块元素拥有默认高度(16px-20px)
给元素添加： *font-size:0px;
overflow:hidden;
5.表单元素行高对齐不一致
添加声明： float:left;
6.百分比bug
给右面的浮动元素添加声明：clear:right:清除右浮动
例：
<style type="text/css">
.top1{ height:100px;width:50%;background:blue; float:left}
.top2{ height:100px; width:50%;background:red; float:left; clear:right;}
</style>
<body>
<div class="top1">c</div>
<div class="top2">b</div>
</body>
7.透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1)
IE浏览器写法： filter:alpha(opacity=value)1-100
.top1{ height:100px;width:50%;background:blue; opacity:0.51; filter:alpha(opacity=50);}
8.当前元素（父元素里面第一个子元素）与元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上
1.给父级元素加overflow:hidden
十二 鼠标滑动属性 cursor：
auto:默认
crosshair：加号
text:文本
wait:等待
help:帮助
progress:过程
inherit:继承
move:移动
ne-resize:向上或向右移动
pointer:手形
