前端之CSS

作者: ropon 分类: Web前端 发布时间: 2018-11-07 13:04
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01</title>
	<style type="text/css">
		/*css基本选择器*/
		/*1.标签选择器*/
		a{
			/*清除a标签默认下划线*/
			text-decoration: none;
			color: #b0b0b0;
		}
		a:hover{
			color: #fff;
		}
		/*2.类选择器,书写格式:.类名,选择的是共性*/
		.box1{
			width: 100%;
			height: 40px;
			background-color: #333;
		}
		/*3.ID选择器,书写格式:#ID名,选择的是特性*/
		#count{
			color: #b0b0b0;
			margin: 0.5em;
		}
		/*4.组合选择器 比如重置ul,ol默认样式*/
		ul,ol{
			list-style: none;
		}
		/*4.通配符选择器 慎用 不相关标签也会被选中,影响加载效率*/
		*{
			padding: 0;
			margin: 0;
		}
		/*css高级选择器*/
		/*1.后代选择器*/
		.top-bar a{
			/*清除a标签默认下划线*/
			text-decoration: none;
			color: #b0b0b0;
		}
		/*2.子代选择器,书写格式:xx>xx*/
		.box1>p{
			width: 100%;
			height: 40px;
			background-color: #333;
		}
		/*3.交集选择器*/
		div{
			color: red;
		}
		div.box1{
			color: green;
		}
		/*4.属性选择器*/
		form input[type='text']{
			border: none;
			border: 2px solid green;
			font-size: 16px;
		}
		/*5.伪类选择器
		a:link 未被访问过
		a:visited 已访问过
		a:hover 鼠标悬停的时候
		a:active 鼠标按住的时候
		*/
		/*6.伪元素选择器 属性一定是content*/
		p:before{
			content: '$'
		}
		p:after{
			content: '.'
		}
		/*继承性,可继承属性:color、text-xxx、font-xxx、line-xxx*/

		/*层叠性,显示谁的主要看谁的权重高*/
		/*权重依次:;
		行内样式 > id > class > 标签
		计算权重方法:
		依次计算id的个数,class的个数,标签的个数
		3 1 1
		#father1 .box3 #father2 #father3 p{
			color: green;
		}
		2 1 1
		#father1 .box2 #father3 p{
			color: blue;
		}
		0 4 0
		.box1 .box2 .box3 .box4{
			color: red;
		}
		311最大,显示它的样式
		1.权重一样,以最后设置为主
		2.继承来的属性权重为0,与选中的标签没有可比性
		3.如果都是继承来的属性,就近原则
		4.如果都是继承来的属性,选择的标签一样近,在计算权重
		*/
		
		/*盒模型
		属性
		width 内容的宽度
		height 内存的高度
		padding 内边距 内容到边框的距离*/
		.box1{
			width: 0px;
			height: 0px;
			/*background-color: green;*/
			/*margin-bottom: 50px;*/
			/*float: left;*/
			/*上下左右都是10px*/
			/*padding: 10px;*/
			/*上下10px,左右20px*/
			/*padding: 10px 20px;*/
			/*上10px,左右20px,下30px*/
			/*padding: 10px 20px 30px;*/
			/*顺时针 上右下左*/
			/*padding: 10px 20px 30px 40px*/
		
		/*border 边框*/
		/*三要素:边框的宽度 边框的样式 边框的颜色*/
			/*border: 2px solid red;*/
			/*border-left: 2px solid red;*/
			/*制作三角形*/
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-bottom: 20px solid green;
		}
		/*margin 外边距 一个盒子的边到另外一个盒子的边距离 前提必须是标准文档流下*/
		.father{
			width: 500px;
			/*height: 300px;*/
			overflow: hidden;
			/*background-color: red;
			margin-top: 80px;*/
			/*制作三角形*/
			/*border-top: 20px solid red;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;*/
			/*制作圆形*/
			/*background-color: red;*/
			/*border-radius: 100px;*/
			/*border-radius: 50%;*/
			/*float: left;*/
		}	
		/*margin的水平方向没有任何问题,垂直方向有塌陷问题*/
		
		/*
		盒模型计算
		盒子的大小= width+2*padding+2*border
		保证盒模型大小不变,如果加padding就一定要减去width或height
		在标准文档流,父子之情调整位置通常使用padding
		兄弟之间调整位置通常使用margin

		浮动是实现元素并排,只要盒子浮动,就脱离标准文档流(不在文档流上占位置)

		diplay 显示 前提标准文档流
		属性
		block 块级标签 独占一行,结余设置宽高,如果不设置宽,默认是父盒子的100%
		inline 行内标签 在一行内显示,不可以设置宽高,根据内容来显示宽高
		inline-block 行内快 在一行内显示,可以设置宽高
		none 不显示 隐藏 不在文档中占位置
		visibility: hidden; 隐藏 在文档中占位置

		浮动
		float: none;
			 : left; 左浮动
			 : right; 右浮动
		作用 让元素并排显示 主要为了后期布局
		特点 第一个盒子贴父盒子边 第二个盒子贴第一个盒子边
		特性 
		1.脱离标准文档流
		2.浮动元素相互贴靠
		3.浮动的元素由"字围"效果
		4.收缩效果
		5.要浮动一起浮动,指的儿子设置浮动,父亲也会浮动,不想浮动可以清除浮动*/
		span{
			float: left;
			width: 100px;
			height: 100px;
			background-color: green;
		}
		/*注意 如果父盒子不设置宽高,子盒子浮动,因脱离标准文档流不在页面中占位置,那么就撑不起父盒子导致页面错乱
		盒子如果浮动,那么垂直方向上不会出现塌陷问题
		*/
		.box11{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}

		.box12{
			width: 100px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.box13{
			width: 100px;
			height: 300px;
			background-color: blue;
			float: left;
		}
		.father2{
			width: 500px;
			height: 200px;
			background-color: red;
		}
		/*盒子要居中,正常情况下使用margin: 0 auto; 如果盒子浮动margin: 0 auto;就不起作用*/
		.box21{
			width: 100px;
			overflow: hidden;
			margin: 0 auto;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: yellow;
			margin: 0 auto;
			float: left;
		}
		/*清除浮动
		1.给父盒子设置固定高度[不推荐]
		2.在浮动元素的最后面加一个空的块级标签(标准文档流)
		给这个标签设置一个clearfix类名,并设置其属性cleart:both*/
		/*.clearfix{
			clear: both;
		}*/
		/*
		3.伪元素清除法 代码冗余*/
		/*.clearfix:after{
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both
		}*/
		/*
		4.overflow:hidden;*/

		/*iconfont矢量图标*/
		@font-face {
			font-family: 'iconfont';
			src: url('./font/iconfont.eot');
			src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
			url('./font/iconfont.woff') format('woff'),
			url('./font/iconfont.ttf') format('truetype'),
			url('./font/iconfont.svg#iconfont') format('svg');
		}

		.iconfont{
  			font-family:"iconfont" !important;
		  	font-size:16px;font-style:normal;
		  	-webkit-font-smoothing: antialiased;
		  	-webkit-text-stroke-width: 0.2px;
		  	-moz-osx-font-smoothing: grayscale;
		}

		.tt {
			font-size: 30px;
		}

		/*text-align: center; 文本水平居中
		line-height: 100px; 行高 
		单行文本垂直居中 行高=盒子的高度
		行高的高度不能小于字体的大小,不然上下字之间会紧挨一起

		text-align: justify; 两端对齐
		text-indent: 2em; 首行缩进
		text-decoration: none;
					   : underline; 有下划线

		*/
		
		/*相对定位
		position: static; 静态定位
		posititon: relative; 相对定位
		标准文档流下盒子相对定位 参考点:原来起始位置
		层级z-index 层级高压盖层级低
		布局方案: 子盒子相对定位,父盒子绝对定位

		绝对定位
		absolute
		脱离标准文档流 不在文档流上占位置 
		使用top 参考点:页面左上角
		使用bottom 参考点:页面左下角
		使用left 参考点:页面左边
		使用right 参考点:页面右边
		层级z-index 层级高压盖层级低
		
		如果父辈盒子设置相对定位,子盒子设置绝对定位,以父辈盒子[相对定位]的0 0为参考点

		*/
		.box31{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box32{
			width: 200px;
			height: 200px;
			background-color: green;
			/*position: relative;*/
			/*可以使用 top left right bottom*/
			/*top: 30px;*/
			/*left: 100px;*/
			/*z-index: 5;*/
			position: absolute;
			top:100px;
			left:100px;
			z-index: 5;

		}
		.box33{
			width: 200px;
			height: 200px;
			background-color: blue;
			/*position: relative;*/
			position: absolute;
		}
		
		.father3{
			width: 992px;
			height: 460px;
			background-color: red;
			position: relative;
			float: right;
		}
		.box41{
			width: 200px;
			height: 200px;
			background-color: blue;
			margin-left: 50px;
			position: absolute;
		}
		.child1{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			top: 50px;
			left: 100px;
		}

		.banner{
			width: 992px;
			height: 460px;
			background-color: red;
			float: right;
			position: relative;
		}
		.npcommon{
			width: 50px;
			height: 50px;
			background-color: black;
			color: white;
			line-height: 50px;
			text-align: center;
			position: absolute;
			top: 50%;
		}
		.next{	
			right: 0;
		}
		.prev{
			left: 0;
		}
		/*让一个盒子绝对居中
		left: 50%;
		margin-left: -盒子宽度的一半;*/
		.top-bar{
			width: 100%;
			height: 200px;
			background-color: red;
			position: relative;
		}
		.top-site{
			width: 400px;
			height: 100px;
			background-color: green;
			position: absolute;
			top: 50px;
			left: 50%;
			margin-left: -200px;
		}
		/*固定定位 position: fixed;
		脱离标准文档流 不在文档流上占位置
		使用top 参考点:浏览器左上角
		使用bottom 参考点:浏览器左下角
		常用于:固定导航栏、返回顶部、小广告*/
		.container{
			width: 100%;
			height: 1000px;
			background-color: green;
		}
		.adbox{
			width: 100px;
			height: 100px;
			background-color: red;
			position: fixed;
			bottom: 50px;
			right: 50px;
		}
	</style>
</head>
<body>
	<!-- <div class="father clearfix">
		<div class="box11">ropon1</div>
		<div class="box12">ropon2</div>
		<div class="box13">ropon3</div>
		<div class="clearfix"></div>
	</div>
	<div class="father2">
		<div class="box21">
			<div class="child"></div>
		</div>
	</div>
	<i class="iconfont tt">&#xe61f;</i>
	<span class="iconfont">&#xe623;</span> -->
	<!-- <div class="box31"></div>
	<div class="box32"></div>
	<div class="box33"></div> -->
	<!-- <div class="father3">
		<div class="box41">
			<div class="child1"></div>
		</div>
		<div class="box42"></div>
	</div> -->

	<!-- <div class="banner">
		<sapn class="npcommon next">></sapn>
		<sapn class="npcommon prev"><</sapn>
	</div> -->

	<!-- <div class="top-bar">
		<div class="top-site"></div>
	</div> -->
	<!-- <div class="container">
		<div class="main"></div>
		<div class="adbox"></div>
	</div> -->
	
</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!