1. 详细描述层叠和继承的概念。

  1. 元素内嵌样式（用元素的全局属性style定义的样式）
  2. 文档内嵌样式（定义在style元素中的样式）
  3. 外部样式（用link元素导入的样式）
  4. 用户样式（用户定义的样式）
  5. 浏览器样式（浏览器应用的默认样式）

  6. 用重要样式调整层叠次序
    把样式属性值标记为重要(important)，可以改变正常的层叠次序，例如：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>css的层叠</title>
    <style>
    a {
    color: black !important;
    }
    </style>
    </head>
    <body>
    <a style="color: red" href="#">test</a>
    <hr>
    <a href="#">test2</a>
    </body>
    </html>

  7. 在CSS中我们可以以z-index=  来定义权重
  8. 继承
  9. 层叠

2. 总结一下选择器的优先级。

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

      总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

3. 什么是盒模型？

盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。

元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。

4. 阐述元素在页面上的定位体系。

定位体系
相对位置：是指盒子在原本定位体系（常规流）下的位置，将盒子的position属性设为relative，启动相对位置
特点：
1.依然占用原来的尺寸
2.不会影响其他的元素位置
固定位置：将盒子的position属性设为fixed，启动固定位置
特点：
1.起始点在视口的左上角
2.脱离文档流（不占位置）宽为内容的宽
3.不给方向，位置不会改变
绝对位置：将盒子的position属性设为absolute，启动绝对位置，当多个标签需要重叠展示时使用
特点：
1.起始点会找第一个父级或祖先元素不为position属性不为static的左上角
2.脱离文档流（不占位置）宽为内容的宽
3.不给方向，位置不会改变

5. 什么是常规流？

常规流
盒模型：规定单个盒子的规则。

视觉格式化模型（布局规则）：页面中的多个盒子排列规则。

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流；
浮动；
定位。
常规流布局
常规流又称文档流，普通文档流，常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列。

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下，盒子的包含块，为其父元素的内容盒。

规则：

块盒：

每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto：将剩余空间吸收掉。

margin的取值也可以是auto(将剩余空间吸收掉),margin的默认值为0.

同为auto的时候width吸收能力强于margin。

若宽度、边框、内边距、外边距就算后，仍然有剩余空间，该剩余空间被margin-right全部吸收。

在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto。

margin:0px auto；

or

margin-left:auto；
margin-right:auto；
1
2
3
4
5
6
每个块盒垂直方向上的auto值
height：auto， 适应内容的高度

margin:auto ，表示0

百分比取值
padding、宽、margin可以取值为百分比。

以上所有的百分比，相对于包含块的宽度。

高度的百分比：

1). 包含块的高度取决于子元素的高度（父元素高度默认，子元素多高，父元素多高），设置百分比无效。

2). 包含块的高度不取决于子元素的高度，百分比相对于父元素高度。

上下外边距的合并
两个常规流的块盒，上下外边距相邻，会进行合并。

如：两个相邻div，上下边距都为50px，则两个div之间的间距为50px而非100px.

两个外边距取最大值。

html和css常见问题解答的更多相关文章

  1. HTML和css常见问题解答2

    1.将一个块级元素水平和垂直居中有几种方法?分别是什么? 四种方式: (1).要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上 ...

  2. 使用LNMP常见问题解答

    使用LNMP常见问题解答 一.LNMP的安装过程详解,注:绿色文字为注释,实际使用过程中没有. ##先要下载,并根据不同系统进行安装: wget -c http://soft.vpser.net/ln ...

  3. web前端工程师面试技巧 常见问题解答

    web前端工程师面试技巧 常见问题解答 每年的春招是各企业需求人才的黄金时期,不少的前端大牛或者前端新手在面试时候不知道怎么来回答面试官的问题,下面来看下我转载的这篇文章吧,希望对从事前端工作的你有所 ...

  4. MySQL同步常见问题解答（自己的小心得）

    前几天刚刚注册了博客园,我想写一些技巧性的教程,今天给大家分享一个MySQL同步常见问题解答. Q:如果主服务器正在运行并且不想停止主服务器,怎样配置一个从服务器? A:有多种方法.如果你在某时间点做 ...

  5. Delphi XE5 常见问题解答

    Delphi XE5 常见问题解答 有关于新即时试用的问题吗?请看看 RAD Studio 即时试用常见问答. 常见问题 什么是 Delphi? Embarcadero? Delphi? XE5 是易 ...

  6. SSL/TLS 高强度加密: 常见问题解答

    关于这个模块 mod_ssl 简史 mod_ssl会受到Wassenaar Arrangement(瓦森纳协议)的影响吗? mod_ssl 简史 mod_ssl v1 最早在1998年4月由Ralf ...

  7. [!!!!!]Inno Setup教程－常见问题解答

    [转]Inno Setup教程-常见问题解答 功能 * 翻译 Inno Setup 文字  * 它支持 MBCS (多字节字符集) 吗?  * 将来会支持 Windows Installer 吗?   ...

  8. 英特尔® 实感™ SDK 前置摄像头 (F200) 常见问题解答

    原文地址 https://software.intel.com/zh-cn/articles/intel-realsense-sdk-faq-for-front-facing-camera-f200? ...

  9. 我个人有关 Azure 网络 SLA、带宽、延迟、性能、SLB、DNS、DMZ、VNET、IPv6 等的 Azure 常见问题解答

    Igor Pagliai(微软)   2014 年 9月 28日上午 5:57  年 11 月 3 年欧洲 TechEd 大会新宣布的内容). 重要提示:这篇文章中我提供的信息具有时间敏感性,因为这些 ...

随机推荐

  1. MongoDB(二)：在Windows环境安装MongoDB

    1. 在Windows环境安装 1.1 MongoDB下载 要在Windows上安装MongoDB,首先打开MongoDB官网:https://www.mongodb.com/download-cen ...

  2. feign响应Image流对象

    feign面向方法签名的http调用,越来越受欢迎,类型于rpc的thrift,只需要关注方法签名和返回值即可,当然feign响应流对象时,需要我们做一下特殊处理,否则会出现异常.也有一些文章通过重写 ...

  3. 天下代码一大抄，整个案例的搬是什么鬼！疑似冒充蚂蚁金服高级Java开发工程师？你大爷

    写在开始 上班前的第一件事,就是码云看看有什么消息,回复下网友的问题.如果看到喜欢的项目会点进去瞅瞅,然后就开始一天的工作. 然而,这一天的工作并不开心,一个今日热门项目让自己很恼火,一开始感觉并没有 ...

  4. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  5. Odoo，快速上手Odoo，来了解Odoo几个标准模块

    odoo通过Apps和Connector扩展和集成数以万计的应用和服务,odoo目前有超过12500个Apps可选用.它囊括了项目管理,生产.财务.记账和销售管理,仓储管理,人力资源管理,等等项目.本 ...

  6. 【Kafka】《Kafka权威指南》——提交和偏移量

    KafkaConsumer(消费者)每次调用 poll()方法,它总是返回由生产者写入 Kafka但还没有被消费者读取过的记录, 我们因 此可以追踪到哪些记录是被群组里的哪个消费者读取的.之前已经讨论 ...

  7. Oracle11G_R2中共享服务器模式和专用服务器模式参数解释及设置

    sys@MYTESTDB> show parameterNAME TYPE VALUE------------------------------------ ----------- ----- ...

  8. centeros系统之上传下载文件

    安装lrzszlrzsz这个软件,可以让我们直接从linux上,下载和上传文件的操作 yum install -y lrzsz11.上传文件通过输入 rz命令,可以弹出上传文件的对话框,然后就可以上传 ...

  9. 检测服务器是否开启重协商功能（用于CVE-2011-1473漏洞检测）

    背景 由于服务器端的重新密钥协商的开销至少是客户端的10倍,因此攻击者可利用这个过程向服务器发起拒绝服务攻击.OpenSSL 1.0.2及以前版本受影响. 方法 使用OpenSSL(linux系统基本 ...

  10. linux下录屏和回放工具script和scriptreplay

    读书是一个长见识的过程,以前偶尔会用到录屏的工具,很少用想系统的学习一下.最近看了linux shell脚本攻略,发现很多新东西是以前自己没有接触到的.比如,这个非常好用的录屏工具:script,这次 ...