css自问自答(一)

css自问自答(一)

1.块级元素和行内元素特性与区别？

块级：display:block

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

内联（行内）：display:inline

<span>、<a>、<label>、 <strong> 和<em>
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部外边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
注意：
内联元素是当做字体来处理的，字体之间是有间隔的，所以内联元素之间也是有间隔的，可以将父元素字体设为0，可以消除间隔，但是重新设置内联元素的字体大小
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

*{margin:0;padding:0;}
div{background:green;}
span{
  background:red;
}
上面的span之间并没有设置外边距，但是左右之间依然有间距，通过下面方法，就可以实现左右紧紧挨在一起，形成一个整体
*{margin:0;padding:0;}
div{background:green;font-size:0;}
span{
  background:red;font-size:12px;
}

内联块状：display:inline-block

<img>、<input>
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
同样存在内联元素之间有间距的问题

2.为文档添加样式的三种方法？

行内样式
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">

嵌入样式
<style type="text/css">
h1 {font-size:16px;}
p {color:blue;}
</style>

链接样式
<link href="styles.css" rel="stylesheet" type="text/css" />

额外：在样式表中其他样式之前使用@import url(css/styles2.css)规则

3.浏览器层叠各个来源样式的顺序?

浏览器默认样式表
用户样式表
链接样式表（按照它们链接到页面的先后顺序）
嵌入样式
行内样式

特殊注意：

p {color:green !important; font-size:12pt;}

空格!important 分号（;）用于加重声明的权重。

这条规则加重了将文本设置为绿色的权重。于是，就算层叠的下一来源给段落设定
了其他颜色，最终的颜色值仍然还是绿色。

4.src和href使用区别？

Src是引入，使用时需要加载进来，而href是引用，建立一个到原文档的链接

5.name 属性和title 属性?

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。

6.理解盒模型

三个属性

边框（border） 。可以设置边框的宽窄、样式和颜色。
内边距（padding） 。可以设置盒子内容区与边框的间距。
外边距（margin） 。可以设置盒子与相邻元素的间距。

相关的属性也各有 4 个

分别是上（top）、右（right）、下（bottom）、左（left）。
语法：
P {margin: top right bottom left; }
P {padding: top right bottom left; }
那个位置没写，就使用那个相对位置上的值

盒子边框

语法：
{ border:border-width border-style border-color;}

（1）全部3个属性，全部4条边
{border:2px dashed red;}
（2）1个属性，全部4条边
{border-style:dashed;}
（3）1个属性，1条边
{border-left-style:dashed;}

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

盒子有多大

• 盒模型结论一：

没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。

• 盒模型结论二：

为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

注意：CSS3 新增了一个box-sizing属性，通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为（box-sizing:border-box;）。