前端面试题之CSS,浏览器滚动条
分类:面向对象

QQ 中的一些网站,比如:,在操作时,可能会弹出一个登录框,而此时整个网页覆盖一个浅蓝色的背景,包括“浏览器滚动条”也被覆盖了,此时我们无法拖动滚动条。

CSS(层叠样式表)

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

 

web下的高度、位置

1. em、rem、vh、vw 分别如何计算尺寸的?

  • em 1em = 默认字体大小的倍数(比如不设置时是字体是20px,那2em 就是40px)
  • rem 1rem = 根元素(html 节点)字体大小的倍数。IE8 及以下不支持 rem, Tips:caniuse.com查询兼容性。
  • 1vw = 1% 视口宽度,
  • 1vh = 1% 视口高度

它是怎么做的呢?实际上我们看到的“浏览器滚动条”并不是真正的浏览器的滚动条。

标签选择器 

屏幕、浏览器、页面的高度宽度

NARUTOne

相信各位web开发狮们,在项目中为了搭建漂亮酷炫的页面,经常会遇到需要获取各种高宽吧,屏幕的、浏览器的、页面的。应该也有些人对这些各种高宽有过疑惑吧。这篇文章我将简单介绍下这些宽高,发发身份证,最后加上点元素大小及位置介绍O(∩_∩)O~。

老规矩(参考链接):http://www.cnblogs.com/polk6/p/5051935.html

http://www.cnblogs.com/autismtune/p/5264589.html

2.css 中calc是什么?

是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

它先用样式表消除掉浏览器的滚动条。

class选择器

.class_name{
color:red;
}

 

屏幕

设备的可视大小。

图片 1

  • screen.height :屏幕高度。

  • screen.width :屏幕宽度。

  • screen.availHeight :屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。

  • screen.availWidth :屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度,可表示为软件最大化时的宽度。

  • 任务栏高/宽度 :可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如:任务栏高度 = screen.height - screen.availHeight 。

3. 颜色有几种写法?透明色如何表示?透明效果如何实现?currentColor如何来用?

  • 颜色关键字
a {
  color: white;
  background-color: blue;
}
  • 十六进制值
p {
  background-color: #e0b0ff;
}
  • RGB
p {
  background-color: rgb(224, 176, 255);
}
  • HSL
p {
  background-color: hsl(276, 100%, 85%);
}
  • RGBA & HSLA
p {
  background-color: rgb(224, 176, 255, .5);
}

p {
  background-color: hsla(240, 100%, 50%, 0.5);
}
  1. 透明色: rgba(255 ,255,255, .5) a表示透明度,取值范围0-1。
  2. Opacity 注意 (设置在父元素上 opacity 会影响到其后代元素。)
p {
  opacity: .5;
  background-color: rgb(224, 176, 255);
}
  1. currentColor如何来用?
    表示和当前元素的color一样的颜色
  <div class="box">box
    child
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

然后设置网页最外层元素(比如是一个 table)的高度和宽度都是 100%,再设置样式表 overflow:auto;,如果网页高度超过浏览器 clientWidth、clientHeight,就会自动显示滚动条,由于宽度是 100%,所以这个滚动条就位于浏览器的边缘,看起来就像是浏览器的滚动条一样。

id选择器

#id_name{
color:red;
}

 

浏览器

浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口)。

图片 2

  • window.outerHeight :浏览器高度。

  • window.outerWidth :浏览器宽度。

  • window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

  • window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

  • 工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight。

4.下图所示的代码和效果中,为什么 h1 的字体大小没变化? 为什么 a 的颜色没变化?

图片 3

image.png

对于Web开发者来说,样式来源分为三种,优先级从上到下:

  1. 使用不同的选择器设置的样式
  2. 浏览器默认样式 (user agent stylesheet)
  3. 继承的样式 (Inherited from xxx)

我们先用Chrome浏览器检查一下元素h1

图片 4

image.png

图片 5

image.png

  • 通过这两张图,我们发现h1其实字体变小了,而不是没变,第一张图,我们根据上面所说的原则,h1的字体应该是浏览器默认样式,h1=32px。到了第二张图,按照上面的原则,我原本以为字体应该是不变,因为浏览器还是按照默认样式,但是大家注意了,浏览器默认样式中,h1=2em,虽然h1不会继承div的字体12px,但是默认字体改变了,由原来的16px(浏览器默认字体大小,记住就好。)变为12px,所以h1就变为24px。
  • a标签就好说了,根据上面原则,a标签采用第二种为浏览器默认样式,所以颜色不变。

而在这个网页元素上层覆盖一个层是可以将其滚动条也覆盖起来的。

关联选择器

  <style>
          .container li a {    #标签关联
              background-color:red;
  }
  </style>

  <div class="container">
          <ul>
              <li>
                 <a>This is A ! </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>   

=============================================
  <style>
          .container .l .a {        #class关联 找到class=container 再找下面的class=l 继续找到class=a
              background-color:red;
  }
  </style>

  <div class="container">
          <ul>
              <li>
                 <a class="l">
                        This is  span!!
                 </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>  

body页面

一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。

很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分。

图片 6

  • body.offsetHeight :body总高度。

  • body.offsetWidth :body总宽度。出现滚动条后,与scrollHeight一致。

  • body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。

  • body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。

  • 滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight。

合并到一张图

图片 7

5.盒模型有哪些属性?

  • 基础属性
  1. width
  2. height
  3. padding
  4. border
  5. margin
  • display
  • box-sizing
    box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。
  1. box-sizing: content-box 默认值
.box {
  width: 300px;
  border: 10px;
}

渲染出来的盒子宽度为 320px

  1. box-sizing: border-box
.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

  • 其他相关属性

    1. outline
      如果你看到被选中的 <a> <input><button>
      周围有一圈黄或蓝色的外框,就是 outline 了,可以通过设置 outline: 0
      或 outline: none
      去除。
    2. overflow
      overflow 用于控制内容溢出包含它的块状元素时的显示方式。overflow-x 和 overflow-y 分别用于控制水平溢出和垂直溢出。
    • visible默认值显示溢出的内容
    • hidden 内容被裁剪且不会出现滚动条
    • scroll 内容被裁剪但出现滚动条
    • auto 由浏览器决定

组合选择器

.c1 #ll a .cc1,cc2 {
    color:red;   #将.c1 #ll a标签下 class=cc1 和 class=cc2的标签设置此样式
}

.c1 #ll a .cc1,.c1 #ll a .cc2{
    color:red;   #不在一个目录下时,使用全路径
}

进阶篇 —— 元素大小、位置

6. 什么是标签的默认样式?列举几个带默认样式的标签,并写出默认样式的属性-值

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染。

body{ 
  display:block;
  margin:8px;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

dl {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

dd {
    display: block;
    -webkit-margin-start: 40px;
}

属性选择器

<style>
          .con input[type="text"][name='username']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下 type='text'下name='username'的标签 应用此样式

<div class="con">

<input type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

盒子模型

图片 8

CSS3中新增了一种盒模型计算方式:box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box,几种盒模型计算元素宽高的区别如下:

  • content-box(默认)

布局所占宽度Width:

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

  • padding-box

布局所占宽度Width:

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

  • border-box

布局所占宽度Width:

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

7. 列举display 的几个值

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit m规定应该从父元素继承 display 属性的值。

自定义属性(所有的标签都可以拥有自定义属性)

<style>
          .con input[alex='sb']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下自定义属性alex='sb'的标签 应用此样式

<div class="con">

<input alex='sb' type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

 

元素的决对位置

网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

首先,每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。

图片 9

下面两个函数可以用来获取绝对位置的横坐标和纵坐标。

  function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }

    return actualLeft;
  }

  function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
      actualTop += current.offsetTop;
      current = current.offsetParent;
    }

    return actualTop;
  }

由于在表格和iframe中,offsetParent对象未必等于父容器,所以上面的函数对于表格和iframe中的元素不适用。

8. 块级元素和行内元素分别有什么特点?分别列举二者对应的标签

块级元素列表

<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
< hr > 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体(正文)
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚(脚注或表注)
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行

行内元素列表

<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
< br > 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
< sub > 定义下标文本
< sup > 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架(即行内框架)
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射(即热区)
<object> object对象
<script> 客户端脚本

二、行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上

行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

使用方法

有三种方法可以在站点网页上使用样式表:

  1. 外联式Linking(也叫外部样式):将网页链接到外部样式表。

  2. 嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。

  3. 内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。

  4. 其中,优先级:内联式 > 嵌入式 > 外联式

 

获取网页元素的相对位置

网页元素的相对位置,指该元素左上角相对于浏览器窗口左上角的坐标。

有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。

图片 10

对上一节中的两个函数进行相应的改写:

  function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }

    if (document.compatMode == "BackCompat"){
      var elementScrollLeft=document.body.scrollLeft;
    } else {
      var elementScrollLeft=document.documentElement.scrollLeft; 
    }

    return actualLeft-elementScrollLeft;
  }

  function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
      actualTop += current. offsetTop;
      current = current.offsetParent;
    }

     if (document.compatMode == "BackCompat"){
      var elementScrollTop=document.body.scrollTop;
    } else {
      var elementScrollTop=document.documentElement.scrollTop; 
    }

    return actualTop-elementScrollTop;
  }

scrollTop和scrollLeft属性是可以赋值的,并且会立即自动滚动网页到相应位置,因此可以利用它们改变网页元素的相对位置。另外,element.scrollIntoView()方法也有类似作用,可以使网页元素出现在浏览器窗口的左上角。

9.box-sizing: border-box; 是什么意思

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--外部样式表-->
    <link rel="stylesheet" href="css/css_cool.css"/>

</head>

<!--应用外部样式表-->
<div class="red">
    rrrrrrrrrrrrrrrrrrrrrr
</div>
<div class="name">
    qqqqqqqqqqqqqqqqqqqqqq
</div>

获取元素位置的快速方法

除了上面的函数以外,还有一种快速方法,可以立刻获得网页元素的位置。

那就是使用getBoundingClientRect()方法。它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。

所以,网页元素的相对位置就是

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

再加上滚动距离,就可以得到绝对位置

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。

10.inline-block有什么作用?inline-block的缝隙是怎么回事?如何解决

  • 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
  • inline-block 之间有空格、Tab、换行符。
    给父元素设置 font-size: 0,在 inline-block 元素上重新设置 font-size。

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <!--内部样式表-->
 8     <style>
 9         所有class=brown应用此样式
10         .brown{
11             color: brown;
12         }
13         }所有class=brown下的a标签应用此样式
14         .brown a{
15 
16         }
17         所有id=new 应用此样式
18         #new{
19             background-color: cyan;
20         }
21         所有的div和span标签应用此样式
22         div,span{
23             font-size: 50px;color: red;
24         }
25         所有a标签下的div标签应用此样式
26         a div{
27             background-color: red;
28         }
29         所有input标签下type='text'的标签应用此样式
30         input[type='text']{
31 
32         }
33     </style>
34 </head>
35 
36 
37 <!--应用内部样式表-->
38 
39     Embedding style!
40 
41 
42 <!--应用ID选择器-->
43 <div id="new">nnnnnnnnnnnnnnnnnnnn</div>
44 
45 123123123123123

 

基础知识

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识。

11.回答如下截图中的两个问题

图片 11

image.png

  • 浏览器的默认样式造成的

图片 12

image.png

图片 13

image.png

*{
margin:0;
padding:0;
}

参考资料:
calc()
块级和行内元素
inline-block
inline-block常见问题

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1 <!--应用内联样式-->
2 <div style="color: blue;">
3     Inline style!!!
4 </div>

 

先来说两个标签: <div>  <span>

这两个标签其实什么都不是,如果不往里写内容,那么什么都不会显示。

但是,<div>标签里一旦写入内容,那么就变为一个块级标签,<span>标签写入内容,就会变为一个内联标签。

clientHeight和clientWidth

  • 用于描述元素内尺寸,是指 元素内容+内边距 大小,不包括边框(IE下实际包括)、外边距、滚动条部分
  • 如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高

CSS+div

offsetHeight和offsetWidth

  • 用于描述元素外尺寸,是指 元素内容+内边距+边框,不包括外边距和滚动条部分及溢出部分
  • 该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关

一.精简代码,降低重构难度。

网站使用DIV+CSS布局使代码很是精简,相信大多朋友也都略有所闻,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

clientTop和clientLeft

  • 返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

offsetTop和offsetLeft

  • 表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

offsetParent

  • 是指元素最近的定位(relative,absolute)祖先元素,递归上溯,找不到这样一个父级元素,那么当前元素的offsetParent就是body元素,如果没有祖先元素是定位的话,会返回null

四.浏览器兼容性

DIV+CSS相比TABLE布局,更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。国内主流是ie,firefox及chrome用的较少,在兼容性测试方面,首先需要保证在ie多版本不出现问题,这里涉及到一些方法和技巧,可以针对具体问题在网站查找解决办法。

 

scrollWidth和scrollHeight

  • 是元素的内容区域加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等
  • ,需要注意的是,当元素其中内容没有超过其高度或者宽度的时候,该属性是取不到的。

RGB(颜色对照表)

 

scrollLeft和scrollTop

  • 是指元素滚动条位置,它们是可写的
  • 元素被卷起的高度和宽度。

background

  • background-color   背景颜色

 

  • background-image   背景图片

 

  • background-repeat: no-repeat;

 

  •  background-position

 

获取样式

  • obj.style.*属性
  • obj.currentstyle(IE)
  • getComputedStyle(IE之外的浏览器)。

 

event对象下的位置

border

wwwwww

 

123456789

 

123456

 

123456

 

clientX和clientY

  • 这对属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,

  • 不管浏览器窗口大小如何变化,都不会影响点击位置的坐标。

display

  display:none 使其消失

  display:block   #内联标签,转变成块级标签

span flag!!! span flag!!!

  display:inline

div flag!!!

div flag!!!

 

1 <!--内联——>块级-->
2 span flag!!!
3 span flag!!!
4 
5 <!--块级<——内联-->
6 <div style="background-color: darkgreen">div flag!!!</div>
7 <div style="display: inline;background-color: darkgreen">div flag!!!</div>

  

screenX和screenY

  • 是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的screenX和screenY值

cursor

更改光标的样式

pointer || help || wait || move || crosshair

 

offsetX 和 offsetY

  • 这一对属性是指当事件发生时,鼠标点击位置相对于该事件源的位置,即点击该div,以该div左上角为原点来计算鼠标点击位置的坐标

  • Firefox不支持该属性,Firefox中与此属性相对应的概念是,event.layerX和event.layerY,所以需要兼容浏览器时,获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX

浮动 float

left

right

 

图片 14图片 15

<style>
        .w-left{
            width: 20%;
            background-color: red;
            height: 100px;
            float: left;
        }
        .w-right{
            width: 80%;
            background-color: green;
            height: 100px;
            float: left;
        }
    </style>
<div>
    <div class="w-left"></div>
    <div class="w-right"></div>
</div>

<div>
    <div style="float:left;width: 20%;height: 150px;background-color: blue;"></div>
    <div style="float: left;width: 80%;height: 150px;background-color: green;"></div>
</div>

浮动float

 

pageX和pageY

  • 该属性是事件发生时鼠标点击位置相对于页面的位置。
  • 通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度,

浮动的标签会覆盖掉父类的标签样式,需要另外设置属性:

1、在浮动的标签后在添加一个标签

1 <div style="background-color: aqua;">
2     <div style="float: left;">1111</div>
3     <div style="float: left;">2222</div>
4     <div style="clear: both;"></div>
5 </div>

2、或者在父类的标签上设置一个高度的属性样式

1 <div style="background-color: aqua;height: 150px;">
2     <div style="float: left;">1111</div>
3     <div style="float: left;">2222</div>
4 
5 </div>

 

 

 

内外边距

padding:内边距  标签自身增加边距

1 <div style="background-color: blue;height: 100px;">
2     <div style="background-color: aqua;height: 30px;padding-top: 10px;"></div>
3 </div>

 

margin:外边距  距离顶部的距离

1 <div style="background-color: chartreuse; border:1px solid yellow;height: 100px;">
2     <div style="background-color: red;height: 30px;margin-top: 10px;"></div>
3 </div>

 

在设置边距时有三种方式:

1、20px 一个值代表上下左右都是20px的距离

2、20px 30px   第一个值代表上下是20px  第二个值代表左右都是30px

3、20px 10px 30px 40px  顺时针分别代表上、下、左、右

 

将标签水平居中:

1 margin: 0 auto; 标签水平居中

 

 

position    位置

fixed:固定在浏览器窗口的某个位置

1 <div id="content" style="background-color: #ddd;height: 2000px;">
2 
3     <a href="#content" style="position: fixed;right: 20px;bottom: 20px;">返回顶部</a>
4 </div>

 

relative:相对位置

absolute:绝对位置  (默认absolute是绝对于浏览器的位置)两者一般会在一起使用,absolute一定在relative标签的里面

1 <div style="position: relative; background-color: aqua;margin: 0 auto;height: 100px;width: 300px;">
2         <h2>修改数据</h2>
3         <a style="position: absolute;right: 10px;bottom: 10px;">AAAAAAAAAAAAAAAAAA</a>
4 </div>

 

overflow :溢出后产生滚动条

auto:滚动条

 1 <div style="background-color: cornflowerblue;height: 100px;overflow: auto;">
 2     wwwwwwwwwwwww <br/>
 3     wwwwwwwwwwwww <br/>
 4     wwwwwwwwwwwww <br/>
 5     wwwwwwwwwwwww <br/>
 6     wwwwwwwwwwwww <br/>
 7     wwwwwwwwwwwww <br/>
 8     wwwwwwwwwwwww <br/>
 9     wwwwwwwwwwwww <br/>
10     wwwwwwwwwwwww <br/>
11     wwwwwwwwwwwww <br/>
12     wwwwwwwwwwwww <br/>
13     wwwwwwwwwwwww <br/>
14     wwwwwwwwwwwww <br/>
15 
16 </div>

 

hidden:隐藏

 1 <div style="background-color: cornflowerblue;height: 100px;overflow: hidden;">
 2     wwwwwwwwwwwww <br/>
 3     wwwwwwwwwwwww <br/>
 4     wwwwwwwwwwwww <br/>
 5     wwwwwwwwwwwww <br/>
 6     wwwwwwwwwwwww <br/>
 7     wwwwwwwwwwwww <br/>
 8     wwwwwwwwwwwww <br/>
 9     wwwwwwwwwwwww <br/>
10     wwwwwwwwwwwww <br/>
11     wwwwwwwwwwwww <br/>
12     wwwwwwwwwwwww <br/>
13     wwwwwwwwwwwww <br/>
14     wwwwwwwwwwwww <br/>
15 
16 </div>

 

标签外边距为0 ,填充整个浏览器宽度

margin: 0 auto;

1 <style>
2         body{
3             margin: 0 auto;  设置body的外边距为0
4         }
5     </style>

 

透明度

1 opacity: 0.2;(谷歌浏览器生效)
2 filter: alpha(opacity=10);
3 -moz-opacity: 0.1;

 图片 16

 

z-index   数值越大,层级越高,数值越小,越靠底层

1 style="z-index: 1;
2 style="z-index: 2;

 

遮罩层

可以利用display:none属性来设置遮罩层和编辑层的出现和消失,利用div标签的宽度、高度和位置position:fixed属性来设置始终在浏览器的中间位置

 1 <div >
 2 最底层的HTML
 3     <div style="z-index: 1;opacity: 0.6;position: fixed;left: 0;right: 0;top: 0;bottom: 0; background-color: blueviolet;display: none"></div>
 4     <div style="z-index: 2;position:fixed;left: 50%;top: 50%;margin-left: -100px;margin-top: -75px;display: none;">
 5         <div style="background-color: crimson;width: 200px;height: 150px;">
 6         <input type="text"/>
 7         <input type="text"/>
 8         <input type="text"/>
 9         <input type="text"/>
10         <input type="text"/>
11         <input type="text"/>
12         </div>
13     </div>
14 </div>

 

鼠标放置A标签,使下划线消失:

text-decoration: none

<a style="text-decoration: none;" href="www.baidu.com">This is A !!!</a>

 

用CSS的伪类方法,使鼠标放在标签上改变样式

a:hover

 1 CSS样式代码:
 2  
 3        .menu{
 4             padding: 15px;
 5         }
 6         .menu a:hover{
 7             background-color: firebrick;
 8         }
 9 
10 html代码:
11 
12 <div class="menu">
13     <a  href="#">菜单一</a>
14     <a  href="#">菜单一</a>
15     <a  href="#">菜单一</a>
16     <a  href="#">菜单一</a>
17     <a  href="#">菜单一</a>
18 </div>

 

Bootstarp中,图片出现圆角的方法

1 border-radius:50%;

 

本文由10bet手机官网发布于面向对象,转载请注明出处:前端面试题之CSS,浏览器滚动条

上一篇:建议不够,微软展现 下一篇:没有了
猜你喜欢
热门排行
精彩图文