一些简单的样式其实就可以不用剖出来代码就可以懂的，所以有些简单的样式我就不用剖出来代码进行说明了，因为已经学过并掌握觉得没必要写这么详细，觉得小白还是适合去看看教程什么的，我写的东西就是一些简单的记录与对所学内容的总结
目录
1. 盒模型
2. 选择器
3. 常用的居中方法
4. 常用的清除浮动的方法
5. 设置元素透明的方式
6. 设置元素隐藏的方式
7. 外边距问题
8. 关于定位
9. 关于默认样式的问题
一. 盒模型
1.box-sizing:border-box/content-box:边框盒模型/内容盒模型
盒模型由
content,padding,margin,border组成，其中content,padding,border是盒子的内部
示例：
<style type="text/css">
.box{width:200px;
height:200px;
padding:50px;
background-color:blue;
margin:30px;
border:10px red solid;
box-sizing:border-box;}
</style>
<body>
<div class="box"></div>
</body>打印结果如右图：
二. 选择器
1.常用选择器
1) 通配选择器：
*–获取页面中的所有标签2) 类型选择器(标签选择器)：如
div3) class选择器：如
.class–可以有多个，且自己命名4) id选择器：如
#id5) 群组选择器：如
.class,#id–用’,’连接，属于并列关系6) 包含选择器：如
#id .class7)
div span–获取div下的所有后代元素8)
div>span–获取div下的所有子元素9) 既右选择器：如
a.href–可以获取a下的所有href10)
.box1.box2–选择元素class既有.box1又有.box2的元素11)
div+span–选择紧连在div后面的span元素
2.选择器的优先级
选择范围越广，优先级越低
!important>行间样式>id>class> 类型 > 通配可以通过约分包含选择器判断包含选择器的优先级
优先级一致时，后面覆盖前面
三. 常用的居中方法
1.text-align:center;/line-height:xxpx;:文字在块内水平居中/文字在块内垂直居中
2.margin:0 auto;:块只能水平居中，且只适用于子级比父级小的元素
3.子级位于父级的中心第一种方法
position: absolute;
margin-left:-自己宽度的一半;
margin-top:-自己宽度的一半;
top:50%;
left:50%;4.子级位于父级的中心第二种方法
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;四. 常用的清除浮动的方法
1.overflow:hidden;``hidden 可以清除浮动，但有可能会隐藏有用的东西，不推荐
2.style="clear:both;" 可以清除浮动但是会加入新标签，且一定是最后一个元素，调用时可能会出现问题，但是是清除浮动的真正方式
3.用before after 伪类清除浮动
.clearfix:before,.clearfix:after{
display:table;
content:""; //只有`before` `after` 伪类才可以使用
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}/*兼容ie浏览器*/五：设置元素透明的方式
1. opacity:0; 元素透明，包括块元素上的文字 ,1是不透明，0是全透明
2.filter:alpha(opacity=0); 同上，兼容ie版本
3.background-color:rgba(0,0,0,0) 背景颜色透明，背景上的文字不透明
4. 背景颜色设置为父元素的背景颜色
六：设置元素隐藏的方式
1. visibility:hidden/visible;–元素隐藏/不隐藏
2. display:none; –元素隐藏且不占位
3. 设置另外一个元素进行着遮挡
4. 用margin 把元素移动到页面外
5. 定位后用left 把元素移动到页面外
七：外边距问题
1.父子级包含的时候子级的margin-top 会传递给父级
body{
background-color: #b2b0b0;
}
.father{
width:200px;
height:200px;
background-color: #E77F24;
}
.son{
width:100px;
height:100px;
background-color: slategray;
margin-top: 30px;
} <div class="father">
<div class="son"></div>
</div>效果如右图所示
2.能用内边距就尽量不要使用外边距
3.上下外边距会叠压
.father{
width:200px;
height:200px;
background-color: #E77F24;
margin-bottom: 60px;
}
.son{
width:100px;
height:100px;
background-color: slategray;
margin-top: 30px;
}<div class="father"></div>
<div class="son"></div>效果如右图所示，可以看到上下元素间距明显不到90px
4. 外边距重叠（margin-collapse）的计算规则
1) 两个相邻外边距均为正时，折叠结果是他们中较大的值
2) 一正一负时，结果是两者相加之和
3) 两个均为负值时，结果是绝对值中的较大值
八：关于定位
1.
position:relative;相对定位特点
* 不影响元素本身的特性
* 不使元素脱离文档流(依然占位)
* 没有定位偏移量对元素无影响(相对于自身偏移)
* 提升层级，
z-index:1;,默认为1，设置谁大谁就在前面作用
* 配合绝对定位，让绝对定位相对父级定位
* 让一个元素进行位移（父元素比子元素大情况下）
2.
position:absolute;绝对定位特点
* 使元素完全脱离文档流
* 使内联元素支持宽高
* 块属性标签内容撑开宽度
* 相对于最近的有定位的父元素进行偏离，且逐层上找知道document
* 提升层级
3.
position:fixed;绝对定位:point_right: 与绝对定位一致，但相对于可视区域进行偏离，不兼容ie6及以下版本
九：关于默认样式的问题
1.默认样式的初始化
初始化浏览器CSS的所有默认样式，因为浏览器不同浏览器的样式不同，因此重置让所有浏览器的样式统一
2.自定义默认样式的作用
1) 清除浏览器的默认样式
2) 格式化样式，可以让自己重新定义
3) 将一些常用样式加入到自定义样式中去使用
如下代码所示，清除一些常用的默认样式
*{
box-sizing:border-box;
-moz-box-sizing:border-box;/*为了兼容低版本的浏览器*/
-webkit-box-sizing:border-box;/*为了兼容低版本的浏览器*/
color:#000;
}
body{
font-size:12px;
font-family:Arial,Verdana,Tahoma,"微软雅黑","黑体";
line-height:120%;
background:#fff;
margin:0;
overflow-x:hidden;/*做滚动条*/
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,form,table{
margin:0;
padding:0;
}
a,img{
border:none;
}
img{
vertical-align:middle;
border:0;
}
li{
list-style:none;
}
i,em{
font-style:normal;
}
a{
text-decoration:none;
color:#000000;
border:0;
}
a:link{
text-decoration:none;
color:#000000;
}
a:visited{
text-decoration:none;
color:#000000;
}
a:hover{
text-decoration:none;
color:#000000;
}
a:active{
text-decoration:none;
color:#000000;
}
2941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
