问答作业- 2017.1.18

  • 什么是css语法?
    首先CSS 规则由两个主要的部分构成:一个是选择器,另一个是声明。
    举例如下:
#p —— /*css选择器——选择器通常是您需要改变样式的 HTML 元素。*/
{
 color:  #cfcfcf;/*声明——每条声明由一个属性和一个值组成。
属性是你希望设置的样式属性。每个属性都有一个值。*/
 }
  • 列举常见的css选择器?
    我把我们所熟知的css选择器简单的分成四类:标签选择器、类选择器、id选择器和通用选择器。
    (1)标签选择器
    一个完整的html页面由许多不同的标签组成,e.g. div、p,而标签选择器,则是决定哪些标签采用相应的CSS样式。
a{ height:200px;width:200px;background:red;}

(2)类选择器
用符号“.”是页面中某些标签具有相同的样式

.div{height:200px;width:200px;background:red;}

(3)id选择器
用符号“#”对某个定义后的标签进行描述

#div1{height:200px;width:200px;background:red;}

(4)通用选择器
用符号“*”,对整个网页中所有HTML标签进行样式定义,这种功能类似“标签选择器”,覆盖的对象更加广泛

*{ margin:0;padding:0;}
  • background 属性如何简写?
    e.g.
background:url(.jif/.pnf格式的背景图片链接)
 red(关键字)/#cfcfcf(16进制)
 no-repeat(不平铺)/normal
 fixed(固定)/scroll(可滚动) 
 0px 100px(位置,也可用百分数及关键字表示)
  • 文本的属性有哪些?请写出 font 的复合式写法?
    行高:line-height:10px;
    字体:font-family:"此处输入可识别的字体格式";
    文字大小:font-size:5px;
    文字加粗:font-weight:bold(加粗)/normal(正常);
    文字形态:font-style:italic(文字倾斜)/normal(正常);
    首行缩进:text-indent:2px;
    文本对齐:text-align:left(左对齐)/center(居中)/right(右对齐);
    文本修饰:text-decoration:underline(下划线)/line-through(删除线)/over-line(上划线)/none(无);
    字母间距:letter-spacing:10px;
    font的叠加:```
    font: bold italic 5px/10px "宋体";
注:其中必须要设置字体大小和字体!
- text-indent 有什么作用?
起首行缩进的作用
e.g.`text-indent:2em;`
- 超链接 a 标签的作用有哪些?
  1.跳转页面
e.g. ` <a href="http://www.baidu.com"></a>`
  2.下载压缩包
e.g. ` <a href="压缩包链接"></a>`
  3.“锚点”
e.g. `<a href="www.souhu.com#souhu-search" >搜狐</a>`
直接跳转到搜狐的id上
- a标签默认样式是什么?
a标签的默认样式有下划线,即
` <a text-decoration:underline> </a>`
- 什么是盒模型?盒模型包括什么?
在网页中,一个元素的是由四部分组成的:内容(conten)、边框(border)、外边距(margin)、内边距(padding),这四部分组成了盒模型。
示例图如下:
![114eae2d5c8[1].jpg](http://upload-images.jianshu.io/upload_images/3536462-86fb19a1d8232119.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- padding和margin的区别?
padding为内填充/内边距,是内容与边框的距离。margin为外填充/外边距,是边框与其他元素的距离。padding纵向不可取负数,margin纵向可以取负数。margin:0 auto 是使边框在可视区域居中,而padding:0 auto是使content相对于边框居中。
- 什么是 margin 叠加?什么是 margin 传递?
margin叠加是指,有两个元素的margin重叠在了一起,但由于规则重叠部分的图像只能显示较大值的margin
父级元素没有设置margin,子级元素设置了margin,则父级元素显示子级元素的margin,即子级元素的margin传递给了父级元素
- 列举几种常见的语义化标签?
语义化标签就是尽量使用有相对应的结构的含义的Html的标签,常见的有

<header>元素描述了文档的头部区域
<nav>标签定义导航链接的部分。
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<article> 标签定义独立的内容。
<aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
<footer> 元素描述了文档的底部区域.

- 常见的块元素和内嵌元素有哪些?简要说一下它们的区别?
常见块元素

<div>画格子</div>
<header>页眉</header>
<nav>导航</nav>
<section>划分页面板块</section>
<footer>页脚</footer>
<article>article</article>
<aside>article的附属</aside>
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<dl>
<dt>定义列表的项目</dt>
<dd>dt的展开描述</dd>
</dl>
<h1>标题</h1>
<p>段落</p>

常见内嵌元素

<span></span>
<em></em>
<a href="#">链接</a>

区别1: 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
          <div><h1></h1><p></p></div> —— 对
          <a href=”#”><span></span></a> —— 对
          <span><div></div></span> —— 错
区别2:块级元素不能放在p标签里面:
          <p><ol><li></li></ol></p> —— 错
          <p><div></div></p> —— 错
区别3:块级元素可独占一行,内嵌元素可以在一行显示
区别4:块级元素支持所有样式,内嵌元素不支持宽高,对上下的margin和padding等样式支持也有问题
区别5:块级元素在不设置宽度的时候,宽度撑满整行,内嵌元素宽度由内容撑开
区别6:块级元素换行无效,内嵌元素还行会被解析
按照惯例,总结我还是贴图吧【...笑】

![1.png](http://upload-images.jianshu.io/upload_images/3536462-be2607ea605064ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![
![3.png](http://upload-images.jianshu.io/upload_images/3536462-2d8ec6c2f2486f23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](http://upload-images.jianshu.io/upload_images/3536462-23352f65129ea6dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![4.png](http://upload-images.jianshu.io/upload_images/3536462-fa6745354a35b560.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![5.png](http://upload-images.jianshu.io/upload_images/3536462-3257e5370d62f84c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![6.png](http://upload-images.jianshu.io/upload_images/3536462-5a5aad514d00620f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![7.png](http://upload-images.jianshu.io/upload_images/3536462-690c331f60c747b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




![8.png](http://upload-images.jianshu.io/upload_images/3536462-e2de7547bfe44312.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![9.png](http://upload-images.jianshu.io/upload_images/3536462-4c24c4fe5ac81339.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好啦,总结完毕!撒花*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,513评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,199评论 0 5
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,138评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8