CSS视频教程|CSS 高级-大灰牛博客

第6章 CSS 高级

CSS定位
CSS浮动
CSS尺寸
CSS导航栏
CSS图片

CSS定位

允许定义元素相对其正常位置该出现的位置/或相对父元素，另一个元素甚至浏览器窗口本身的位置发生偏移。

css三种定位基本机制：

①普通流：元素按照html元素中的位置顺序排序

②浮动(float)：浮动的框可以向左或者向右，直到它的外边距碰到包含框或另外一个浮动框的边框为止

③绝对定位(absolute)：使元素的位置脱离文档流，不占据空间；这一点与相对定位(relative)不同，相对定位实际上被看作普通流定位模型的一部分，因此元素的位置相对它在普通流的位置。

定位属性：position将元素放在一个静态的，相对的，绝对的，固定的位置，通过属性赋值，让元素向对应的方向发生偏移。

overflow设置元素溢出的区域发生的事情，clip设置元素显示状态多用于图片，vertical-align设置元素的垂直对齐方式，z-index设置元素的层叠顺序

CSS浮动

属性float属性赋值，left、right、none；inherit从父级继承浮动属性，还有一个clear属性主要是用来去掉浮动引起的属性包括继承属性

CSS尺寸

尺寸属性允许你控制元素的高度和宽度，同样它允许你增加行间距，涉及属性为： height/line-height/max-height/max-width/width/min-height/min-width

CSS导航栏

<ul id="web">
	<li><a href="dhnblog.com">HTML</a></li>
	<li><a href="dhnblog.com">CSS</a></li>
	<li><a href="dhnblog.com">JavaScript</a></li>
	<li><a href="dhnblog.com">jQuery</a></li>
</ul>

#web li{
    list-style: none;
    display: inline;
    margin-right: 24px;
}
#web li a:link,#web li a:visited{
    color: #fff;
    /* display: block; */
    text-decoration: none;
    background-color: #FF9900
}
#web li a:hover,#web li a:active{
    background-color: deepskyblue
}

CSS图片

<!-- 引用一张图片，加上一句描述，使用div进行承载 -->
<div class="picture">
	<a href="#">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1003320719,3235932866&fm=26&gp=0.jpg" width="300" height="200">
	</a>
</div>
<style type="text/css">
	.picture a:link img,.picture a:visited img{
		opacity: 0.6;
	}
	.picture a:hover img,.picture a:active img{
		opacity: 0.8;
	}
	/*opacity设置属性透明度，属性值为0-1，其中透明度为0完全透明；透明度为1完全不透明*/
</style>

转载请注明：大灰牛博客 » CSS视频教程|CSS 高级