前端学习笔记1

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主页：

==================

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

这是标题

跳转至内容 1

跳转至内容 2

请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。

内容 1...

内容 2...

注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。

阶段练习2 一个无序列表控制内容显示：