Web前端入门基础测试（一）

标签的权值为 1 类选择符的权值为 10 ID选择符的权值最高为 100

解释下列样式属性

font-size: 30px;  /*字体大小*/    
font-weight: 700; /*字重 常用有400 700 （没有单位） */   
text-decoration: none/underline/line-through; /*不显示下划线/显示/从字体中间横穿   */
text-indent:2px;  /*字体缩进2个像素*/
line-height:20px;  /*行高20个像素*/
letter-spacing:50px; /*字体之间的间距为50像素*/
margin:5px; /*上下左右均为5个像素*/
margin: 5px 0 5px; /*上下为5个像素，左右为0*/
margin: 10px 45px; /*上下为5个像素，左右为45像素*/
padding: 10px 5px 5px 8px; /*padding和margin写法差不多，请区别他们效果不同*/
list-style-type: none; /*去掉list前面的小黑点*/
background: url('url'); /*除了html的img可以插入图片还可以用css引入图片*/
background-size:100% 100% ; /*图片大小*/
background-color:#cd5; /*图片颜色，请去了解图片颜色有几种写法*/

添加伪类元素，让鼠标滑过是改变背景和字体颜色(红色背景,白色文字，1px边框)

.btn:hover{
     background:red;
     border:1px solid #fff;
     color:#fff;
}

怎么让行内元素变成块级元素？

span{
  display:block;
}

display:none与visibility:hidden的区别是什么？

**visibility:**隐藏对应的元素但不挤占该元素原来的空间。
**display:**隐藏对应的元素并且挤占该元素原来的空间。

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

怎样样行内元素居中？

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
text-align: center
适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

怎样让块级元素居中？

**利用margin**margin左右边距为 auto
 
<style>   
.wrapper {       
    height: 600px;
    border: 1px solid gray;     
}
.box {
width: 100px;
height: 100px;
background: gold;
margin: 250px auto 0;
}
</style>

        
<div class="wrapper">        
<div class="box"></div>       
</div>

CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

这个可以让元素浮动到浏览器窗口外就行
float:left;
left:-100%;

float和position有什么区别？position的属性有哪些分别怎么使用？

只有position是定位，float不能说是定位
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是可能需要注意的地方。

而position顾名思义就是定位。以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。
其中static和relative会占据文档流空间，他们并不是脱离文档的。
absolute和fixed是脱离文档流的，不会占据文档流空间。

比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。
虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。如果说到性能问题reflow问题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。

实现如下图的效果
灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
提示：圆角左上角 border-radius: 0 0 50px 0;

<style>
* {
  margin: 0;
  padding: 0;
}

.main {
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: #ccc;
  top: 50%;
  margin-top: -100px;
  left: 50%;  
  margin-left: -200px;
}

.left-top-area {
  width: 50px;
  height: 50px;
  border-radius: 0 0 50px 0;
  position: absolute;
  background-color: #FC0;
}

.right-bottom-area {
  width: 50px;
  height: 50px;
  border-radius: 50px 0 0 0;
  position: absolute;
  background-color: #FC0;
  right: 0;
  bottom: 0;
}
</style>

<div class="main">
<div class="left-top-area"></div>
<div class="right-bottom-area"></div>
</div>