首页手记 2017/2/3学习中遇到的问题

2017/2/3学习中遇到的问题

标签：

Html/CSS

Q1：div标签的id属性和class属性的适用情况？

A：首先，id名是唯一的，不可重复使用；而class名可以多次使用。其次，在大多数应用中，单一的元素或需要程序，javascript控制的，应使用id定义，适用于网站大致布局等情况；重复使用的元素，类别，则用class定义，尽量在结构内部使用。最后，一般在css中，大多使用class，通过class名称和其他元素的父子关系来进行选定。

Q2：dd，dt，dl标签的使用方法？

A：dl 标签定义了定义列表（definition list）。dl 标签用于结合 dt （定义列表中的项目）和 dd（描述列表中的项目）。

Q3:padding，border，margin的用途分别是？

A：【padding】元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。【border】盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。【margin】元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

Q4：CSS list-style属性？

A：list-style 简写属性在一个声明中设置所有的列表属性。该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

Q5:CSS text-decoration 属性？

A：text-decoration 属性规定添加到文本的修饰。这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

Q6:在css中，html的标签元素的分类？

A：块状元素、内联元素(又叫行内元素)和内联块状元素。

块状的影响范围大些div是标记一块区域，p是一个段落，form是表单，这些元素一般都可以自成块。而内联元素影响范围较小，一般是是结合块状元素来使用，对块状元素的补充或者强调，比如strong和em，i。

Q7:CSS类选择器？

A：类选择器在css样式编码中是最常用到的。
语法：
.类选器名称{css样式代码;}

注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来
第二步：使用class="类选择器名称"为标签设置一个类
第三步：设置类选器css样式

Q8:设置行内元素（内联元素）水平居中的方法？

A：通过给父元素设置text-align:center设置

Q9:设置定宽块状元素（width为固定值）水平居中的方法？

A：margin：20px auto;元素上下margin可以自定义，左右为auto则根据宽度自适应相同值（即居中）

Q10：控制超链接<a>的最简单方法？

A：设置display:block，将超链接变为块级元素

Q11：css float属性？

A：float 属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

Q12：使单行文本垂直居中的方法？

A：父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

Q13：CSS hover伪类？

A：【:hover】 伪类在鼠标移到元素上时向此元素添加特殊的样式。这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

Q14：CSS active伪类？

A：【:active 】伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。

Q15: CSS overflow属性？

A：overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

Q16：后代选择器与子选择器的区别？

A：【后代选择器】可以选择作为某元素后代的元素。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。【子元素选择器】（Child selectors）只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
    .container>p{
        color: red;
    }
    .container>div>p{
        color: blue;
    }
    /* 
       use .container{color:red;}
       or .container p{color:red;}
       to make all <p> to red
       --------------------------
       use .container>p{color:red;}
       to make first <p> to red
       but second <p> not change
       --------------------------
       use .conainer>div{color:red;}
       or .container>div>p{color:red;}
       to make second <p> to red
       but first <p> not change
       --------------------------
    */
</style>
</head>
<body>
    <div class="container">
        <p>123456</p>
            <div>
                <p>aaa</p>
            </div>      
    </div>
</body>
</html>

Q17：CSS z-index属性？

A：【z-index 属性】设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。