2018-11-07
前端之CSS

<!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>