每日两道前端面试题20190304

最新推荐文章于 2025-05-12 21:49:03 发布

转载最新推荐文章于 2025-05-12 21:49:03 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018383030

本文深入解析了CSS的盒子模型，包括W3C盒子模型和IE盒子模型的区别，以及CSS选择符的多种类型，如ID选择器、类选择器、标签选择器等，帮助读者理解并掌握网页布局的核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标准的CSS的盒子模型

CSS盒子模型又称为框模型，包含了元素内容content，内边距padding，边框border，外边距margin.
它有两种种类：IE盒子模型、W3C盒子模型

区别：
标准的盒子模型宽高就是content/element元素的宽高.
低端IE的CSS模型宽高就是content + padding + border

CSS的选择符

1.id选择器 <#myid>
2.类选择器 <.myclassname>
3.标签选择器<div,h1,p>
4.相邻选择器<h1+p>
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
5.子选择器<ul>li>
6.后代选择器<li a>
7.通配符选择器<*>
通配选择器用一个星号（*）表示。单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如，让页面上的所有文本都为黑色.
8.属性选择器<[title]{color:red;}>
带有 title 属性的所有元素设置样式
9.伪类选择器<a:hoverli:nth-child>