[web前端css学习-2]-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53061888/article/details/117385369

web前端

前言
一、盒子模型
二、浮动
- 1.标准文档流
- 2.浮动
三、定位
四.动画
- 课堂练习：
总结

前言

盒子模型，浮动以及定位的学习记录

一、盒子模型

1.边框：

border：2px solid yellow;
border-color:边框颜色
border-width:边框宽度
border-style：边框风格
部分取值：dashed虚线框,dotted点线框,solid实线边界,none无边框;
取值：border-color：1值：上下左右；2个值：上下，左右；3个值：上，左右，下；4个值：上，右，下，左.
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

二、浮动

1.标准文档流

块级元素和内联元素

display属性块级元素display属性的默认值是block，内联元素display属性默认值inline
我们可以通过改变display属性将块级元素与内联元素做转换。
内联元素设置宽与高是没有作用的，若我们要对内联元素设置宽与高可以通过改变display属性为display：inline-block,使它具有inline和block的特点。

2.浮动

CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动;Float(浮动)，往往是用于图像，但它在布局时一样非常有用。

float：left左浮动，right：右浮动。
浮动后的元素会脱离标准文档流，如果容器中的元素全部浮动，盒子高度会变小，那如何扩展盒子的高度呢：
1.借助clear：both（增加一个空元素，设置其元素值为clear：both即可）
2.溢出overflow：
visible溢出的部分正常显示在外面；
scroll：会生成水平和垂直方向的滚动轴，【水平只有样式，垂直是可以滚动的】
auto：溢出部分生成垂直方向的滚动轴，不溢出则没有。
hidden：自然是溢出的部分就会被隐藏起来啦。
3.借助伪类：

#container：after{
		content：'';
		display:block;
		clear:both;
}

三、定位

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

1.默认值：static，不进行定位；
2.相对定位：relative，相对于自己原来的位置进行定位，相对定位后的元素还在标准文档流中，对父元素和兄弟元素是没有影响的。
3.绝对定位：absolute，如果父容器没有定位，该位置就相对于浏览器来说，但如果父容器定位了，该位置就相对于父容器进行定位，要知道绝对定位的元素是脱离标准文档流的。
4.固定定位：fixed,元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

四.动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

课堂练习：

1.qq会员：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			p{
				margin-left: 20px;
				float: left;
				display: inline;
				height: 180px;
				line-height: 180px;
			}
			#container{
				width: auto;
				height: 180px;
				background-color: gray;
			}
			ul li {
				color: white;
				float: left;
				padding-left: 30px;
				display: inline;
				height: 180px;
				line-height: 180px;
			}
			div p:last-child input{
				background-color: yellow;
				font-size: 18px;
				font-weight: bold;
				border-radius: 20px;
				padding: 10px 10px 10px 10px;
			}
			div p:nth-last-child(2) input{
				border: 1px solid yellow;
				background-color: gray;
				font-size: 18px;
				border-radius: 20px;
				padding: 10px 10px 10px 10px;
			}
			img{
				padding-left: 40px;
				float:left;
			}
		</style>
	<body>
		<div id="container">
			<img src="img/2628470649d10a352ebea255a9fdd5c.png" />
			<ul>
				<li>功能特权</li>
				<li>游戏特权</li>
				<li>生活特权</li>
				<li>会员活动</li>
				<li>成长体系</li>
				<li>年费专区</li>
				<li>超级会员</li>
			</ul>
			<div>
				<p><a href="#"><input type="button"/ value="登录"></a></p>
				<p><a href="#"><input type="submit" value="开通超级会员" /> </a></p>
			</div>
		</div>
	</body>
</html>

2.实现如图效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#containe{
				width: 300px;
				border: 1px solid red;
			}
			div h1{
				background-color: #FF0000;
				font-size: 18px;
				color: white;
				height: 30px;
				line-height: 30px;
				padding-left: 20px;
			}
			ul{
				background-color: white;
				list-style: none;
			}
			ul li{
				border-bottom: 1px dashed gray;
				
				line-height: 30px;
				padding-left: 20px;
			}
			ul li a{
				font-size: 15px;
				color: gray;
				text-decoration: none;
			}
			ul li a span{
				color: white;
				line-height: 20px;
				background: url(img/dot_01.gif) 12px -1px no-repeat;
				text-indent: 20px;
				width: 40px;
				height: 24px;
				display: inline-block;
			}
			ul li div{
				text-align: center;
				display: none;
				color: red;
			}
			ul li:hover span{
				background-image: url(img/dot_02.gif);
			}
			ul li:hover a{
				color: pink;
			}
			ul li:hover div{
				color: red;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="containe">
			<h1>大家都喜欢的彩妆</h1>
			<ul>
				<li>
					<a><span>1</span>Za姬芮新能真知美白隔离霜 35g</a>
					<div>
						<p><img src="img/icon-1.jpg" /></p>
						<p>￥168元</p>
					</div>
				</li>
				<li>
					<a><span>1</span>Za姬芮新能真知美白隔离霜 35g</a>
					<div>
						<p><img src="img/icon-2.jpg" /></p>
						<p>￥168元</p>
					</div>
				</li>
				<li>
					<a><span>1</span>Za姬芮新能真知美白隔离霜 35g</a>
					<div>
						<p><img src="img/icon-3.jpg" /></p>
						<p>￥168元</p>
					</div>
				</li>
				<li>
					<a><span>1</span>Za姬芮新能真知美白隔离霜 35g</a>
					<div>
						<p><img src="img/icon-4.jpg" /></p>
						<p>￥168元</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>