草庐IT

css面试题一

codingggo 2023-03-28 原文

1.继承

css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们css中的继承。官方的解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

a.有继承的属性

1.字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
2.文本系列属性
text-index:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白，即字间隙
letter-spacing:增加或减少字符间的空白，即字符间距
direction:规定文本的书写方向
color:文本颜色
3.元素的可见性
visibility
4.光标属性
cursor
5.所有元素可以继承的属性
visibility/cursor
6.内联元素可以继承的属性
字体系列属性/除text-indent,text-align之外的文本系列属性
7.块级元素可以继承的属性
text-align/text-indent

b.无继承的属性

1.display
2.文本属性
vertical-align:垂直文本对齐
text-shadow:文本阴影效果
white-space:空白符
3.盒子模型属性
width/height/margin/border/padding
4.背景属性
background/background-color/background-image/background-repeat/background-position
5.定位属性
float/clear/position/top/right/bottom/left/z-index/overflow
6.轮廓样式属性
outline

2.css预处理工具

css预处理器是一个能让你通过预处理器自己独特语法生成css的程序

  • sass
  • 兼容css
    扩展名.scss/.sass
  • less
    兼容css
    扩展名.less
  • stylus
    兼容css
    扩展名.styl
    采用缩进语法

3.行内元素/块级元素

  • 块级元素
    1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列
    2.高度，宽度，margin，padding都是可控的，设置有效
    3.宽度没有设置时，默认为100%
    4.块级元素中可以包含块级元素和行内元素
  • 行内元素
    1.和其它元素在一行，即行内元素和其它元素都会在一条水平线上排列
    2.高度，宽度是不可控，设置无效，由内容决定
    3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素
  • 转换
    1.display:inline转换为行内元素
    2.display:block转换为块状元素
    3.display:inline-block转换为行内块状元素
  • 块状元素可以继承的属性
    Text-indent
    Text-align
    Visibility
    Cursor

4.盒模型

css盒模型本质是一个盒子，封装html元素，包括margin/border/padding/content

  • 标准模型
    width=content
  • ie模型
    width=border+padding+content
  • 自定义
    Box-sizing:content-box（默认模式）
    Box-sizing:border-box（ie模式）
  • js获取盒模型宽高
    dom.style.width/height 获取行内样式的宽高
    window.getComputedStyle(dom).width/height ie模式下
    Dom.getBoundingClientRect().width/height 渲染后的宽高
    dom.offsetWidth/offsetHeight 内容+内边距+边框不包括外边距

5.bfc块级格式化上下文

  • 概念：bfc是css布局的一个概念，是一个独立的渲染区域，是一个环境，里面的元素不会影响外部的元素。
  • 问题：父子元素和兄弟元素边距重叠，重叠原则取最大值，空元素的边距重叠取margin和padding的最大值
  • css创建bfc，脱离文档流
    1.html元素
    2.浮动
    3.绝对定位
    4.display:inline-block
    5.表格元素
    6.弹性盒子
    7.overflow:hidden
  • 使用场景
    1.自适应布局，避免多列布局由于宽度计算四舍五入换行
    2.避免元素被浮动元素覆盖
    3.父元素高度包含子浮动元素，清除内部浮动
    4.去除边距重叠，分别属于不同的bfc

6.ifc行内格式化上下文

1.内部的box会在水平方向，一个接一个的放置
2.这些box的水平方向的margin/border/padding都有效
3.对齐方式line-height/vertical-align

试题cssbr行内liHtml/Css

有关css面试题一的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析：解法：第2题分组问题分析：解法：第3题间隔连续问题分析：解法：第4题打折日期交叉问题分析：解法：第5题同时在线问题分析：解法：第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析：遇到这类

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  7. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  8. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  9. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  10. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

随机推荐