css基础小总结
css重要知识点
三层分离
- html:页面结构
- 从语义的角度描述页面结构
- css:页面样式
- 从样式上修饰结构
- JavaScript:行为
- 页面交互和动态效果
css三大特性
-
继承性
> color以及tetx-,font-,line-开头的属性都可以继承 > a标签的颜色无法继承 > h标签的大小无法继承 > div的高度如果不设置由内容决定，如果没有内容，高度为0；div的宽度默认由父元素继承过来 -
层叠性
权重相同时，后写的样式会覆盖先写的样式 -
优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 *** important属性无法被继承-
计算组合选择器的权重
(0,0,0,0) (行内样式,id选择器,类选择器,标签选择器) 1000 100 10 1 -
规则
1. 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计算权重。谁大听谁的。如果都一样，听后写的为准。 2. 如果没有选中，那么权重是0。如果大家都是0，就近原则。
-
文字
-
字体连写
font: normal 900 30px/30px "microsoft yahei" 字体样式 字体粗细 字体大小/行高 字体类型 -
首行缩进
text-indent: 2em;/*em 一个文字的距离*/ -
文字修饰
text-decoration:none; // 默认，标准文本 text-decoration:underline; // 下划线 text-decoration:linethrough; // 中划线 text-decoration:overline; // 上划线 -
行高
定义:第一行文字的基线到第二行文字的基线的距离 特点:默认情况下文字就是在自己的那一行垂直居中 应用:使用`line-height`设置行高和容器的高度相等，则文本会在容器中垂直居中 行高单位: px em % 无单位>. 在设置行高时，如果单位是em或者%,那么行高会先计算出结果以后再继承给子元素
>. 在设置行高时，如果没有单位,那么行高会先继承给子元素,然后再计算出行高
背景
background:background-color background-image background-repeat background-position;
background: red;
background: url(xxx.jpg) no-repeat 100px 100px;
- 可以只设置颜色或者图片,但是不能在没有设置图片的情况下直接设置`background-repeat`和`background-position`
元素的显示方式
-
行内元素:
display:inline;- 一行里面可以显示多个
- 无法设置宽高
-
大小由内容来决定
行内元素: a span b u i s strong em ins del
-
块级元素:
display:block;- 独占一行
- 可以设置宽高
-
默认宽度一整行
块级元素: p h1-h6 div ul ol li dl dt dd
-
行内块级元素:
display:inline-block;- 可以设置宽高
-
一行内可以显示多个
行内块级元素: img input
锚伪类
- `a:link`:给a标签设置没有访问过的样式
- `a:visited`:给a标签设置访问过的样式
- `a:hover`:设置鼠标放在**元素**上时的样式
- `a:active`:设置**元素**被点击时的样式
固定顺序:l v h a
盒子模型
注意:
- 当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子宽是继承于大盒子，那么设置小盒子的padding-left不会改变小盒子的大小
- `body`标签默认带有`margin:8px;`
- `p`标签默认带有`margin-top`和`margin-bottom`,值等于`font-size`的大小
- `h`标签默认带有`margin-top`和`margin-bottom`
- `ul`标签默认带有`margin-top`和`margin-bottom`以及`padding-left`
外边框的合并现象
如果两个div上下排列,给上面这个div设置margin-bottom,给下面这个div设置margin-top,那么两个margin会发生合并现象,合并后的值会取较大的那个
margin的塌陷现象及解决方案
如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会一起向下平移
- 解决方案:
1. 给大盒子加一个边框（border）
2. 给大盒子设置`overflow:hiden;`
3. 设置小盒子浮动
浮动
float: left; //左浮动
float: right; //右浮动
- 浮动后的元素层级比标准流高
- 浮动后的元素显示模式会变成行内块
清除浮动产生的影响
浮动的影响:大盒子不设置高度,而且大盒子中的子盒子全部浮动，则大盒子的高度将不会被撑开
清除浮动:
1. 额外标签法:在浮动的元素后面加一个div,给这个div设置clear:both;
- 内部标签法:可以撑开父盒子的高度
- 外部标签法:不能撑开父盒子的高度
2. 给大盒子设置overflow: hidden;
- 缺点:超出大盒子范围的内容会被裁剪
3. 伪元素清除浮动
.clearfix:after {
content:"";
height: 0;
line-height: 0;
display: block;
visiblity: hidden;
clear: both;
}
.clearfix {
zoom: 1;/*兼容ie6*/
}
定位
- 作用:解决盒子与盒子之间的层叠问题
-
使用:
position:absolute; // 设置定位 left:0; // 定位以后距离浏览器左边框的距离 top:0; // 定位以后距离浏览器上边框的距离
静态定位
- 代码:
position:static; - 所有标准流默认都是静态定位
相对定位
- 代码:
position:relative; -
使用:
position:relative; left:0; top:0; // right:0; // bottom:0; -
特点:如果设置了相对定位并且设置了
left top right bottom,那么盒子会以盒子原来自己的位置偏移 -
注意:
- 相对定位是相对于自己原来的位置
- 相对定位后的元素还在页面上占据位置(没有脱离标准流)
绝对定位
- 代码:
position:absolute; -
使用:
position:absolute; left:0; top:0; // right:0; // bottom:0; -
特点:
- 如果设置绝对定位的元素没有父元素,那么这个元素相对于body来定位
- 如果设置绝对定位的元素有父元素,但是父元素没有定位,那么这个元素还是相对于body来定位
- 如果设置绝对定位的元素有父元素,而且父元素有定位(非static),那么这个元素是相对于父元素来定位
- 绝对定位的元素不在页面占据位置,即脱离了标准流
固定定位
- 代码:
position:fixed; -
使用:
position:fixed; left:0; top:0; // right:0; // bottom:0; -
特点:
- 不管页面有多大,永远相对于浏览器的边框定位
- 固定定位的元素脱离了标准流,不在页面占位置
子绝父相
子元素用绝对定位,父元素用相对定位
居中
margin: 0 auto; /*设置容器水平居中*/
text-align: center; /*设置文本水平居中*/
vertical-align: middle; /*设置图片与文字中线对齐*/
- 如果小盒子在大盒子中要定位并且水平居中,先设置大盒子相对定位,再设置子盒子绝对定位,然后设置子盒子left:50%;再设置子盒子margin-left值为-(小盒子宽度的一半),那么小盒子就会在大盒子中水平居中
position:absloute;
left:50%;
top:0;
margin-left: -50px;/*此处数值根据实际情况改变*/
- 如果小盒子在大盒子中要定位并且垂直居中,先设置大盒子相对定位,再设置子盒子绝对定位,然后设置top:50%;再设置子盒子margin-top值为-(小盒子高度的一半),那么小盒子就会在大盒子中垂直居中
position:absloute;
left:0;
top:50%;
margin-top: -50px;/*此处数值根据实际情况改变*/
元素的隐藏
overflow: hiiden; /*超出部分裁剪*/
visiblity: hidden; /*隐藏后还占据位置*/
display: none; /*隐藏后不占位置,使用display: block可以显示出来*/
层级z-index
div {
position:absolute;
z-index:5;
}
- z-index仅能在定位元素上奏效(绝对,固定,相对定位)
- 没有定位的元素，不管在HTML中出现的顺序如何，总是在带有定位的元素下方
css初始化
/*css初始化*/
/* 清除标签的默认margin padding*/
html,body,ul,li,dl,dt,dd,h1,h2,h3,p,img,input {
margin: 0;
padding: 0;
}
/*清除img的边框*/
img {
border: 0;
}
/*清除li标签前的小点*/
li {
list-style: none;
}
/*设置页面统一文字字体和颜色*/
body {
font-size: 12px;
color: #434343;
font-family: "宋体";
background-color: #FFF;
}
/*清除浮动*/
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;/*兼容ie6*/
}
/*a标签设置*/
a {
color: #434343;
text-decoration: none;/*去下划线*/
}
a:hover {
color: green;
}
/*左浮动*/
.fl {
float: left;
}
/*右浮动*/
.fr {
float: right;
}
透明度
opacity:不透明度-
取值:0~1.0之间的小数
opacity:0.5; // 半透明 -
注意:这个属性ie6不支持
filter:Alpha(opacity=50);// 兼容ie6
圣杯布局
<style>
.content {
padding: 0 200px;
height: 200px;
min-width: 200px;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -200px;
}
.right {
width: 200px;
height: 200px;
background-color: yellow;
float: right;
margin-right: -200px;
}
.center {
width: 100%;
height: 200px;
background-color: green;
float: left;
min-width: 200px;
}
</style>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
元素显示模式转换的三种方法
- display: inline-block;
- 浮动
- 绝对定位和固定定位
