前端css基础知识点总结
1.selector
7种选择器
1、通配符选择器
* 表示所有标签
* {
background-color: blue;
}
2、标签选择器
标签名 一般对一类标签设置样式 采用
h1 {
color: red;
}
a {
text-decoration: none;
}
3、id选择器
#id 用的不多 一般用在独一无二的元素
#box2 {
background-color: green;
}
4、类选择器
.class 用的最多
.f30 {
font-size: 30px;
}
5、并集选择器
(群组选择器) p div h2 字颜色为红色
p,
h2,
div {
color: red;
}
6、交集选择器
li.f30 既是li又class是f30
li.f30 {
text-decoration: underline;
}
7、后代选择器
div .f30 {
font-weight: 700;
}
2.text&font
- 设置文字颜色
color: red;
- 字颜色方式
字颜色方式 |
---|
颜色单词 red yellow blue … |
rgb(0255,0255,0~255) |
十六进制 #ff0000 #00ff00 #ffffff #000000 #f00 #0f0 #fff #000 #aa7712 |
- 文字水平对齐方式
text-align:left或center或right
- 文本的装饰效果
text-decoration:underline下划线 overline 上划线 line-through 中划线 none没有 默认值
- 文本首行缩进
text-indent: 2em;
/*em是相对单位 相对于当前元素的font-size*/
- 字号
font-size: 20px;
- 文本粗细
font-weight: 400;
- 字体样式
font-style: italic;
/* normal 显示正常 italic文本显示斜体*/
font-family: "Microsoft YaHei", "宋体";
/* 设置字体 假如字体名称含有空格 必须用引号印引起来*/
- 行高
line-height: 20px;
- font字体简写属性
font: italic 400 20px/20px "Microsoft YaHei", "宋体";
/*字号和字体同时具有 才可以简写*/
3.box-model
- 盒子模型 width/height/padding/border/margin
属性 | 含义 |
---|---|
width | 宽度 指的是内容宽度 不是盒子真实宽 |
height | 高度 指的是内容高度 不是盒子真实高 |
padding | 内边距 指的是内容到边框的距离 |
border | 边框 |
margin | 元素与元素之间的间距 |
- width,height
width: 200px;
height: 200px;
- padding
/* 一个值 相当于四个方向是相同值*/
padding: 10px;
/* 按照方向进行展开*/
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
/* 两个值 相当于上下10px 左右20px*/
padding: 10px 20px;
/* 上 10 右 20 下 30 左 20 没有就找对立面*/
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
- border
边框三要素 | |
---|---|
border-width | 边框宽度 |
border-style | 边框样式 solid实线 dashed虚线 |
border-color | 边框颜色 |
/*四周*/
border: 10px solid blue;
/* 按照方向进行展开*/
border-bottom: 5px solid blue;
border-top: 5px solid blue;
border-right: 5px solid blue;
border-left: 5px solid blue;
- margin
margin: 0 auto ;
/*auto 可以让有宽度的块级元素水平居中*/
margin-bottom:10px
margin-top:10px
margin-left:10px auto
margin-right:10px
4.margin
margin塌陷
父子塌陷
当父亲没有设置padding、border、内容时,父子元素垂直方向的margin会重叠
以父子中较大的为准 而不是相加
解决办法
- 把儿子的margin转化为父亲的padding 注意盒子总高度变化
- 给父亲增加一个属性 overflow: hidden
兄弟塌陷
垂直方向上相遇的margin会发生塌陷,以较大的值为准
只设置一个方向即可
5.background
- 边界
border: 3px solid blue;
- 背景图片
background-image: url(programer.jpeg);
/*默认会平铺*/
- 背景重复
background-repeat: no-repeat或 repeat-x 或repeat-y;
- 背景图定位
background-position: left top;
background-position: center center;
background-position: 50px 150px;
/* 50px 横坐标 150px纵坐标*/
background-attachment: fixed;
/*fixed固定的*/
- background简写
background: red url(programer.jpeg) no-repeat 0 0 fixed;
6.element(block 、inline-block、 inline)
元素根据表现的特性分为块级元素、行内元素、行内块元素
元素类型 | 特点 |
---|---|
块级元素 | 1 独占一行 2 设置宽高有效(padding、margin、line-height) 3 不设置宽度 默认是父亲的100% |
行内元素 | 1 可以与其他行内元素并排 2 设置宽高无效(不支持垂直方向的margin和padding) 3 元素靠元素撑开 |
行内块元素 | 1 可以与其他行内元素或行内块元素并排 2 可以设置宽高 |
7.display
display 改变元素的显示模式
/*
display: block 转化为块级
display: inline 转为行内元素
display: inline-block 转为行内块元素
display: none 隐藏元素
*/
8.float
float和display不要写在同一个元素内
让两个有宽高的盒子平排 我们可以让这两个盒子转成行内块,但是盒子之间有空白
浮动的诞生就可以让元素平排 并且还可以设置宽高
浮动特点 |
---|
1.相互贴靠(怎么贴靠) |
2.浮动的元素可以设置宽高 |
3.脱离标准流(脱标) |
9.clear float effect
清除浮动(带来的影响)方法 |
---|
1.给浮动元素的父亲设置高度 ——有高度的盒子可以关闭浮动 |
2.clear:both 在父亲末尾增加一个元素 给这个元素设置属性clear:both |
3.给浮动元素的父级 增加一个overflow:hidden |
4.是第二种清除浮动的升级版 可以使用 |
5.最优方法 可以反复使用 |
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="cleardiv"></div>
</div>
<div class="wrap2">
</div>
</body>
/* 5 */
.cleardiv:after{
content:'';
display: block;
clear: both;
}
10.after,before
.box:before {
/*
before: 在box内部的前面
after: 在box内部的最后
*/
content: '456';
display: block;
background-color: blue;
width: 60px;
height: 40px;
}
11.overflow
overflow: hidden;
/* 让溢出的内容隐藏*/
overflow: scroll;
/* 滚动 显示滚动条 内容溢出可以使用滚动条*/
overflow: auto;
/*内容溢出则显示滚动条 不溢出不显示滚动条*/
12.vertical-align
vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/*
文字与图片垂直方向的对齐方式
图片与图片垂直方向的对齐方式
*/
13.position
- 相对位置
position: relative;
left:10px;
top:10px;
/*相对于自己原来的位置*/
特性 |
---|
1.不脱标 |
2.老家留坑 形影不离 |
3.可以提升层级 |
作用 |
---|
1.相对自己进行位置微调 |
2.配合绝对定位使用 |
- 绝对定位
position: absolute;
left:10px;
top:10px;
参考点 |
---|
1.假如该绝对定位元素没有定位(相对或者绝对或者固定)的祖先元素 则以body为参考点 |
2.假如有定位的祖先,则以最近的定位祖先元素为参考点 |
特性 |
---|
1.脱标 |
2.假如不设置宽度 则由内容撑开 |
子绝父相 |
---|
1.儿子采用绝对定位 父亲采用相对定位,此时儿子就可以在父亲范围内任意确定位置 |
- 固定定位
position: fixed;
left:10px或50%;
top:10px或50%;
参考点
始终以浏览器窗口左上角
14.z-index
position不是默认的static情况下使用
设置定位元素的层级 |
---|
1.z-index属性 默认值是0 |
2.z-index属性值是整数,值越大越在上面 (从父现象) |
3.z-index属性值相同的话 看结构,后面的会压住前面的 |
15.BFC
块格式化上下文(Block Formatting Context,BFC)
清除浮动前:
清除浮动后:
通常的做法是设置父元素 overflow: auto
或者设置其他的非默认的 overflow: visible
的值。
BFC特点 |
---|
1.内部标签会在垂直方向一个接一个放置 |
2.垂直方向的距离由margin决定,属于同一个BFC的两个相邻标签会发生重叠 |
3.每个标签的左外边距与包含块的左边界相接触,从左到右,即便浮动也如此 |
4.BFC的高度,浮动的子元素参与计算 |
5.BFC是一个隔离的独立容器,容器里面的子元素不会影响外面标签 |
BFC作用 |
---|
1.可以避免margin值叠加问题 |
2.清除浮动 |
3.避免文字环绕 |
4.实现两列、三列布局(后面讲) |
16.problem
图片下方多出空白间隙
解决方案 |
---|
1.对img设置display: block |
2.设置vertical-align 取值top/middle/bottom |
3.对图片的父级设置font-size:0;line-height:0 |
ie兼容问题 | 解决方案 |
---|---|
1.ie中图片放在a中会显示边框 | img {border: none;} |
2.ie8以下浏览器背景复合属性写法问题 background: url(…)no-repeat center url和no-repeat之间没有空格 在ie8以下显示异常 | 正常以空格隔开 |
3.ie6和7兼容问题 | (忽略) |
17.hack
- 条件hack
选择ie浏览器以及不同版本
是ie特有功能,ie10开始标准模式下 不再支持条件注释
<!--[if IE]>
<p style="backgroud: red;">
只能被ie识别
</p>
<![endif]-->
<!--[if IE 6]>
<p style="backgroud: red;">
只能被ie6识别
</p>
<![endif]-->
<!--[if gt IE 7]>
<p style="backgroud: red;">
能被ie7以上版本识别
</p>
<![endif]-->
符号 | 含义 |
---|---|
gt | 大于 |
lt | 小于 |
gte | 大于等于 |
lte | 小于等于 |
! | 非 |
- 属性级Hack
我们可能会在样式属性名前面或值的后面加上一些只有特定
浏览器能识别的hack前缀或后缀
_ 下划线 选择ie6或以下 如 _color: red; color: green
* ie6,7识别
\0 ie8以上
18.opacity
- opacity
opacity:num /*num 0到1*/
兼容性 ie9及以上和标准浏览器都支持
特点 设置opacity的元素的所有后代会一起具有透明性
用法 调整图片或模块整体不透明度
- rgba
兼容性 ie9及以上和标准浏览器都支持
使用 设置颜色的不透明度,用于调整color,background-color等
ie专属滤镜 filter:Alpha(opacity=x)
兼容性 ie6-9 ie10开始废除
19.sprite
css sprite css精灵或css雪碧
把网页中一些背景图片整合到一个大文件中,然后利用
background-image、background-repeat、background-position
组合进行背景定位,适用于小图标
- 优点
减少网页的http请求,从而提高页面的性能
图片命名更容易
更换风格方便
- 缺点
必须限定容器大小符合背景图元素位置
/*代码写法*/
.box {
width: 48px;
height: 48px;
background: url(tb.png) no-repeat 0 -120px;
}
20.others
border-spacing,border-collapse
table,
tr,
td {
border: 1px solid #ccc;
/* 边框与边框的间距*/
border-spacing: 0;
/*制作细线表格 */
border-collapse: collapse;
}
cursor,word-spacing,letter-spacing
div {
/* 一个箭头*/
cursor: default;
/*小手指*/
cursor: pointer;
/* 浏览器默认设置的光标 */
cursor: auto;
/*十字叉*/
cursor: crosshair;
/*移动十字箭头*/
cursor: move;
/* 字间距 */
letter-spacing: 10px;
/* 词间距 以空格解析为依据 */
word-spacing: 20px;
}
display,visibility
display: none;
visibility: visible;
outline
input {
/* outline轮廓 一般用法同border 设置值为none去掉轮廓线*/
outline: none;
}
PC端项目-规范
1 文件管理
- 文件名用英文命名
- css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式、比如页面的头部尾部、重复使用字体、字号等)
index.css - 图片名称
图片命名尽量与其模块样式名称保持一致,尽量用小写
如 login_bg.jpg login_user_ico.gif
2 html书写规范
- h5模版
- 书写规范 (缩进、属性值必须用双引号、标签要闭合、属性标签等名字由数字下划线或小写字母组成)
- 语义化
比如 图片添加alt - 合理嵌套html标签
ul>li
dl>dt+dd
p不能套p a不能套a a不能套交互元素 - 保证结构和表现相分离
3 css书写规范
-
编码 utf-8
-
规划重置样式表
-
版心-页面有效区域 1000px 1200px
-
书写代码时候
添加注释
class/id
jd_top jdTop
缩进
布局定位属性->自身属性->文本属性->其他属性 -
兼容
border-radiusie10,ie9支持border-radius属性
4 注意事项
PC 一般兼容到ie8以及以上