天天看点

前端学习篇章-第一阶段

1常见的浏览器及内核

浏览器:IE,Chrome,FireFox,Safari,Opera。

内核:Trident,Gecko,Blink,Webkit。

1,使用Trident的是internet explorer,国产的绝大部分浏览器。

2,使用Gecko的是Mozilla Firefox

3,使用Blink的是Chrome和Opera

4,使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit

2b和strong(i和em)标签的区别

b标签是一个实体标签,它所包围的字符被设为bold(粗体),而strong标签是一个语义标签,作用是加强字符的语义

em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。i标签仅仅将文字规定为斜体,并无特殊语义。

3css的三种引入方式

(1)内嵌式

通过

<style></style>

来书写CSS代码。

只能应用于当前网页,不能被其它网页共享。

注意:

<style>

标记可以放在网页的任何地方,但一般放在

<head>

(2)外联式

通过

<link>

标记来引入外部的CSS文件(.css)。

可以被其它网页共享。

格式:

<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意:

<link>

标记只能放在

<head>

(3)行内样式

通过style的属性来书写CSS代码。

举例:

<p style=“font-size:24px;”></p>

4单行文本水平垂直居中的方法

(1)水平居中

text-align:center:控制单行文字水平居中

(2)垂直居中

设置行高,line-height:元素的高度,如果元素的高度是50px,则line-height:50px

5选择器优先级的计算方式

  • 选择器优先级与权值相关
    • 基础选择器的权值:通配符选择器(0)、标签选择器(1)、class选择器(10)、id选择器(100)

      复合选择器的权值是所有的单一选择器权值的累加

    • 权值越大,优先级越高;权值相同,后写的会覆盖先写的
    • 继承样式的优先级为0,子元素设置样式会覆盖继承样式
    • 行间样式权值为1000,优于id选择器
    • !important优于行间样式

6可以继承的css属性

1)、字体系列属性

  font-family:字体系列

  font-weight:字体的粗细

  font-size:字体的大小

font-style:字体的风格

line-height:行高

2)、文本系列属性

  text-indent:文本缩进

  text-align:文本水平对齐

color:文本颜色

3) list-style属性

margin外边距塌陷问题解决方法

父子元素margin合并问题

在父元素里面有子元素时,若父元素在没有设置overflow:hidden或者是border属性,则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。

父子元素margin合并问题解决办法

**方法一:**设置父元素的overflow属性为hidden。

**方法二:**设置父元素的border属性,如:border:1px solid red;

兄弟元素margin合并问题

当元素是兄弟元素时,在不设置float和position:absolute时,margin-bottom和margin-top会合并为两者中的最大值。

兄弟元素margin合并问题解决方法

使兄弟元素不在同一个BFC区域下,具体做法如:将兄弟元素分别触发BFC或将兄弟元素包在不同的div下,这些不同的div再分别触发BFC。

浮动产生的问题

浮动会使得元素上浮,浏览器不认为其占用空间因此浮动元素的父容器不会被撑开从而会没有高度,在接下来其他不浮动的块级元素会自动占据浮动元素的位置显示在浮动元素的下方。

清除浮动的几个方法

清除浮动,清除浮动的方法有三种:

(1)在需要清除浮动的元素下方设置一个块级元素 给块级元素添加css属性:clearfix=both即可清除浮动

(2)使用css伪元素::after和 ::before,在css中添加属性clearfix{content:’’;clearfix:both;display:block},在需要清除浮动的容器上添加该clearfix的class属性即可。

(3)给父容器添加overflow:hidden 的css属性

(4)给父容器添加一个确定的高度

继续阅读