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. python3 tornado api + angular8 + nginx 跨域问题

    问题: 上一个博客部署好了api之后,前端开始吊发现了跨域的问题. 接口地址: http://111.231.201.164/api/houses  服务器上使用的是nginx转发 数据: 前端ang ...

  2. 快速幂取模&快速乘取模

    快速幂取模 即快速求出(a^b)mod c 的值.由于当a.b的值非常大时直接求a^b可能造成溢出,并且效率低. 思路 原理就是基于\(a*b \% c = ((a \% c)*(b \% c))\% ...

  3. 编译原理之LL(1)文法的判断，递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...

  4. MAC 下将libpomelo连接到cocos2d-x

    摘要:借助GYP将libpomelo连接到Cocos2d-x项目并使项目能与服务端成功连接. 配置:OS X 10.9.4 + Xcode 6.0 + Cocos2d-x-3.2 一.部署GYP(Ge ...

  5. "echo 0 /proc/sys/kernel/hung_task_timeout_secs" disable this message

    问题现象: 问题原因: 默认情况下, Linux会最多使用40%的可用内存作为文件系统缓存.当超过这个阈值后,文件系统会把将缓存中的内存全部写入磁盘, 导致后续的IO请求都是同步的. 将缓存写入磁盘时 ...

  6. CSharpGL(57)[译]Vulkan清空屏幕

    CSharpGL(57)[译]Vulkan清空屏幕 本文是对(http://ogldev.atspace.co.uk/www/tutorial51/tutorial51.html)的翻译,作为学习Vu ...

  7. VS出现未加载wntdll.pdb的解决办法

    无缘无故出现了未加载wntdll.pdb的的错误,不知道原因是什么,但找到了解决方法.在调试中选择选项,然后选择调试->符号,勾选Microsoft符号服务器,确定.重新生成项目时会有各种加载, ...

  8. 第一个月.day1

    1. 编辑器下载 推荐的是hbulider     开发环境 2. 浏览器 推荐chrome 谷歌浏览器学习 3. 建立技术笔记 推荐博客园 Web 本月任务 搭建静态网页. 静态页面:不需要网络请求 ...

  9. Luogu P1583 魔法照片

    题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人.佳佳按照与他们的关系好坏的程度给每个人赋予了一个初始权值W[i].然后将初始权值从大到小进行排序 ...

  10. netty源码解析(4.0)-27 ByteBuf内存池:PoolArena-PoolThreadCache

    前面两章分析的PoolChunk和PoolSubpage,从功能上来说已经可以直接拿来用了.但直接使用这个两个类管理内存在高频分配/释放内存场景下会有性能问题,PoolChunk分配内存时算法复杂度最 ...