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. WPF 3D球及进阶玩法

    在WPF中3D球的构建算法请参考: https://www.cnblogs.com/lonelyxmas/p/9844951.html 好玩以及值得借鉴的Demo:   (CSDN下载需要积分,避免你 ...

  2. FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

    The header and footer in the tweet embed example have child items that could be arranged as rows usi ...

  3. CSS入门(定位的简单总结)

    一.定位 普通流定位 浮动定位 相对定位 绝对定位 固定定位 二.position定位 1.static(默认值) 2.relative 相对定位 3.absolute 绝对定位 4.fixed 固定 ...

  4. [转]UiPath Invoke Code

    本文转自:https://dotnetbasic.com/2019/08/uipath-invoke-code.html We will learn step by step tutorial for ...

  5. git命令行的颜色配置

    Git颜色branch,diff,interactive,status配置,git终端配置颜色,git命令行高亮 Git默认的输出是单一颜色的,感觉很不容易阅读,Git支持用多种颜色来显示其输出的信息 ...

  6. k8s ingress 转发服务，内容显示不全问题

    0x00 事件 部署了 ingress ,并声明了两个路由 /eureka 和 /tomcat,/eureka 转发到了 eureka server 的服务端口,/tomcat 转发到了 tomcat ...

  7. pycharm报错：Process finished with exit code -1073741819 (0xC0000005)解决办法

    这个是几个月前的问题了,有小伙伴在CSDN问我咋解决的,那我今天在这边把这个问题解决办法分享下吧,免得大家把很多时间都浪费在安装排坑上面,有些坑虽然解决了还真不知道啥原因. 我的pycharm一直用的 ...

  8. centos8 安装 nginx

    http://nginx.org/ NGINX官网 创建文件夹mkdir nginx进入创建的文件夹 根据自己需要下载合适版本 通过 wget http://nginx.org/download/ng ...

  9. Python网络爬虫_Scrapy框架_2.logging模块的使用

    logging模块提供日志服务 在scrapy框架中已经对其进行一些操作所以使用更为简单 在Scrapy框架中使用: 1.在setting.py文件中设置LOG_LEVEL(设置日志等级,只有高于等于 ...

  10. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...