CSS选择器:
CSS2: id选择器
类选择器
普通选择器
后代选择器 p em
群组选择器 ,分隔
伪类选择器:超链接,按钮,div
:hover: 光标悬停
:active: 光标点下去
-
伪元素选择器(CSS3使用::前缀):
- first-letter
选择器的优先级:
1.内联> 嵌入 > 外联
2.定位范围越小的优先级越高 Id> 类>普通
3.优先级最高 !important
Div盒子模型:
Margin: 90px //4个外边距都是90
Margin: 90px 90px 90px 90px //上 右 下 左
Margin: 90px 90px 90px 上 左右 下
Margin: 90px 90px 上下 左右
Margin: 90px auto; 水平方向居中
Div布局:
Div: position样式:
Fixed: 相对于浏览器本身
Relative: 相对div在文档中原有的位置
Absolute: 相对父元素定位, 父元素必须是relative或者absolute, 如果所有父级元素都不是relative或者是absolute, 只能相对浏览器窗口定位
Div: 浮动
问题: 如果一个元素,其子元素都浮动了,这个元素就没有了高度。
解决方案:
1.给父元素制定高度
2.在父元素中添加额外的div, 设置样式Clear:both
3.使用CSS3的伪对象,
行级元素 VS 块级元素
块级元素: div p ul li
行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
行内元素和块级元素之间可以互转:
Display: inline(行级) 不可以设置宽高属性
Block(块级)
Inline-block: 行级元素,但是具有块级元素的宽高属性
注意: 块级元素变inline-block,vertical-align:top解决对齐问题。
颜色代码: red, rgb, rgba, #xxxxxx #eeeeee
阶段练习1 模仿QQmusic主页:
==================
![](img/QQ音乐图标.png)
![](img/MV.png)
![](img/电台.png)
![](img/歌单.png)
![](img/排行.png)
![](img/1.png)
![](img/2.png)
![](img/3.png)
![](img/4.png)
![](img/5.png)
![](img/6.png)
![](img/7.png)
![](img/8.png)
common.css
html,body
{
/*margin: 0px;
padding:0px;*/
height: 100%;
}
body
{
min-width: 850px;
background-image: url(“…/img/背景.png”);
background-size: cover;
background-position: center;
}
#header
{
height: 70px;
background-image: url(…/img/导航栏.png);
}
#header_menu
{
height: 70px;
float: right;
}
#content
{
width:850px;
/*margin-top: 100px;
margin-left: 100px;*/
margin: 90px auto;
}
#content img
{
width:200px;
height: 200px;
}
CSS3选择器:
div>p 子元素
div+* 紧挨着div后面的元素(1个)
div~* 紧挨着div后面的元素(多个)
属性选择器:
[target*=flower] target=”xxxxflower” target=”xxxx flower”
[target~=flower] target=”xxx flower”
[target^=flower] target=”flowerxxxx”
[target|=flower] target=”flower-xxxx”
[target$=flower] target=”xxxtarget”;
P:first-of-type 和P:first-child 的区别
如下案例:
P:first-of-type:
这是第二个段落。
这是第一个段落。
这是第二个段落。
这是第三个段落。
这是第四个段落。
p:empty 开头和结尾标记紧挨着,重点不能有内容,空格,换行
:target
这是标题
请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。
内容 1...
内容 2...
文末
篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页