前端之css2
复习：
css:层叠样式表，给HTML增加样式的 语法结构 选择器 {属性：属性值} h1 {color:red;backgroud:blue} 选择器 1.基本选择器 标签选择器 div {color:red} id选择器 #div {color:red} 类选择器(***) .c1 {color:red} 通用选择器 * {color：red} 2.组合选择器 后代选择器 div（空格）span{color：red} 儿子选择器 div>span{color:yellow} 毗邻选择器 div+span{color:blue} 弟弟选择器 div~span{color:black} 3.属性选择器 任何标签都可以设置自定义的属性及属性值 [xxx] 查到具有xxx属性的所有标签 [xxx="1"] 查询xxx=1属性的所有标签 span [xxx="1"] 查询span中xxx=1属性的标签 精准度越来越高 4.分组与嵌套 div,span,p{color:red} div,#d1,.c1{color:blue} 5.伪类选择器 a:link{} a:hover{} 重要，悬浮态 a:active{} a:visited{color:black} input:focus{} 6.伪元素选择器 p:first-letter {font-size:24px} p:before { content:'#'; font-size:24px } p:after{ content:'?'; font-size:24px } 选择器优先级 行内>id选择器>类选择器>标签选择器 调节样式 长宽：width height 字体属性:font-family font-size font-weight 背景
backgroud-color backgroud-image backgound-border 如果背景图片尺寸小于所在区域尺寸，默认是铺满整个区域，可以通过指定参数决定是否铺满 no-repeat不铺满 repeat-x铺满x轴 repeat-y铺满y轴 center(左右) center（上下） 一张照片可以上下滑动
可以简写成一下 backgroud:背景颜色 背景图片 是否铺满 位置 文字属性 text -align:center; (居中) text-decoration:none(主要是用给a标签的，原生的a标签太丑，自带的下划线) text-indent:48px;用于首行缩进 ul{list-style-type:none} 自动将前面的小圆点去掉 边框(比如给div设置边框) border-style border-size border-color border:3px solid red; #顺序无所谓 border-left:（只有左边加）3px solid red; border-top; border-right; border-bottom;（只有下面） display div{display:none} 不显示不占位 div-inline 块儿级标签具有行内标签的特性 div-block 行内标签变成块儿级标签 div-inline-bloack 同时具备行内和块儿级标签的特性，主要是让行内标签可以设置长宽 画圆 div {border-radius:50%;} 盒子模型 margin ：用来调节盒子与盒子之间的距离（标签与标签之间的距离） border ：盒子的包装厚度（边框） padding：内部物体与盒子之间的距离（内部文本与边框之间的距离） content：物体大小（文本内容） 溢出 overflow hidden(隐藏)/auto（自动调整）/sroll(滚动)
浮动float
float left;
float right;
只要是页面布局，都会用到浮动 浮动带来的影响： 脱离文档流，造成父标签塌陷 所以要用到clearfix{content:'自己书写的一个空白'；clear：both；}
clear 清除浮动
z-index 垂直屏幕，数值越大越靠近用户 ，比如登录百度页面是弹出的模态框
定位position 让一个静态的变成动态可以移动的，然后就可以对他设置边距等 相对定位relative：相对标签本身原来的位置 绝对定位absolute：相对于已经定位过的父标签（小米购物车，一点击就会出现边框） 固定定位fixted：相对于浏览器窗口固定在某一个位置（固定在一个地方的） 是否脱离文档流： 脱离文档流： 1.浮动 2.绝对定位 3.固定定位 不脱离文档流： 1.相对定位 透明度rgba opacity rgba:只调节颜色，不针对字体颜色 opacity:字体颜色和背景颜色都调节，是真正的透明度
练习题
/*这是博客页面的css样式表*/
/*通用样式表*/
body{ /*整体的背景设置*/
margin: 0; /*靠紧左边*/
background-color: #f0f0f0; /*设置背景颜色*/
}
a{ /*存在a标签，将下划线去掉*/
text-decoration: none; /*给a标签去除下划线*/
}
ul{ /*存在列表将列表默认的小黑点去掉*/
list-style-type: none; /*无序列表的默认小黑点去除*/
padding-left: 0; /*文本和边框之间的填充*/
}
.clearfix{ /**/
content: ''; /*占位，不然会出现塌陷*/
clear: both; /*两边都清除*/
display: block; /*将所有的行内元素转变为块元素*/
}
/*博客左侧的样式*/
.blog-left{
float: left; /*浮动方式是朝左浮动*/
position: fixed; /*固定在当前，不会随着鼠标的滑动而改变*/
left: 0; /*左边不留空白*/
width: 20%; /*宽度占20%*/
height: 100%; /*高度占到100%*/
background-color: #4d4c4c; /*背景颜色*/
}
/*博客左侧样式之头像*/
.blog-avatar{
width: 150px; /*设置宽度*/
height: 150px; /*设置长度*/
border: 5px solid wheat; /*设置边框和边框的颜色*/
border-radius: 50%; /*将方边框变成圆形边框*/
margin: 20px auto; /*将边框上下设置为20px,然后居中显示*/
overflow: hidden; /*就是将图片按照圆形填充，多的就隐藏*/
/*overflow: auto; !*图片填充完以后可以上下滑动看没有显示完全的信息*!*/
/*overflow: fragments; !**!*/
}
/*博客左侧头像之图片*/
.blog-avatar img{
width: 100%; /*宽度为100%*/
}
/*博客左侧之名字和简介*/
.blog-name,.blog-info{
color: darkgray; /*字体颜色设置*/
text-align: center; /*字体位置设置*/
}
/*博客左侧链接的颜色设置*/
.blog-link a,.blog-tag a{ /*注意是给a链接设置字体颜色，所以要写上a这个标签*/
color:darkgray; /*超链接的字体颜色设置*/
}
/*博客左侧a标签悬浮状态设置*/
.blog-link a:hover,.blog-tag a:hover{ /*给a标签设置悬浮态*/
color: white; /*当鼠标悬浮的时候颜色为白色*/
}
/*博客左侧表格设置*/
.blog-link ul,.blog-tag ul{
text-align: center; /*将ul表格居中*/
margin-top: 60px; /*表格和上面东西的距离为60px*/
}
/*博客右边的样式*/
.blog-right{
float: right; /*朝右边移动*/
width: 80%; /*占位80%*/
}
.blog-list{ /*右边整体这个列表*/
background-color: white; /*背景颜色设置*/
margin: 20px 40px 20px 10px; /*边距设置*/
box-shadow: 3px 3px 3px rgba(0,0,0,0.4); /*设置x,y,z和字体透明度*/
}
.article-title{
border-left: 5px solid red; /*设置标题的左边边框和颜色*/
}
.article{
font-size: 36px; /*标题字体大小*/
margin-left: 10px; /*标题标签朝左移动*/
}
.date{
float: right; /*日期朝右边移动*/
font-size: 18px; /*日期字体大小*/
margin-top: 20px; /*日期距离顶部的距离*/
margin-right: 10px; /*日期和右边的距离*/
}
.blog-body{
border-bottom: 1px solid black; /*和hr一样的效果，就是添加一个下划线*/
}
.blog-body p{ /*因为将所有的行内元素变成了块元素，所以只修改p就可以都修改*/
font-size:18px; /*修改字体大小*/
text-indent: 18px; /*首行缩进*/
}
