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. 「SAP技术」如何看Z移动类型是复制哪个标准移动类型而创建的？

    [SAP技术]SAP MM 如何看一个自定义移动类型是复制哪个标准移动类型而创建的? 比如项目上有一个自定义移动类型Z59,是复制551移动类型而定义的. OMJJ配置界面里,是有一个Ref字段.如下 ...

  2. Java学习笔记-Java文件操作流

     day03 输入输出流:读入写出  节点流:   有明确的来源和去向   往往对字节操作 节点流又叫低级流.字节流   处理流:  没有明确的来源和去向  往往对低级流或其他高级流进行操作,不能独立 ...

  3. PHP 利用PHPExcel到处数据到Excel；还有导出数据乱码的解决方案。

    直接贴代码吧 PHP版本5.6.38 mysql版本5.0 //连接数据库 $mysql_server_name = "*.*.*.*"; $mysql_username=&quo ...

  4. DSP程序中的布尔类型使用

    在DSP程序中,布尔类型不能直接拿来用,要定义一下,可以通过定义为枚举类型来定义: typedef enum{FALSE=0,TRUE} BOOL; 一般枚举类型的定义是这样的:enum [枚举名] ...

  5. Appium(三)：安装appium client、adb命令

    1. 安装appium client appium client是对webdriver原生api的一些扩展和封装.它可以帮助我们更容易的写出用例,写出更好的用例. appium client是配合原生 ...

  6. Dashboard安装与配置

    本节介绍如何在控制器节点上安装和配置仪表板. 仪表板所需的唯一核心服务是身份服务. 您可以将仪表板与其他服务结合使用,例如图像服务,计算和联网. 您也可以在具有独立服务(例如对象存储)的环境中使用仪表 ...

  7. MAC地址表（交换机）、ARP缓存表以及路由表（路由器）

  8. java之JavaBean

    JavaBean是一种java语言编写而成的可重用组件. 所谓JavaBean,是指符合以下标准的java类: 类是公共的: 有一个无参的公共构造器: 有属性,属性一般是私有的,且有对应的set.ge ...

  9. Java连载54-两种单例模式、接口详解

    一.单例模式分为两种: (1)饿汉式单例:在类加载阶段就创建了一个对象. (2)懒汉式单例:用对对象的时候才会创建对象.(连载53中例子就是懒汉式) 饿汉式举例: package com.bjpowe ...

  10. ThinkPHP调用其他控制器的方法,助手函数action()

    用法: $a = action('admin/user/detail',['id'=>10]); var_dump($a) 表示在其他控制器调用user控制器的detail方法,传了一个参数id