「CSS についてどれくらい知っていますか」_html/css_WEB-ITnose の概要を読む

質問

1. 一部のブラウザは css3 をサポートしているかどうか、またどのような項目をサポートしているかを検出するにはどのツールを使用できますか?

一般的に使用される HTML タグ、それらの表示属性は通常、デフォルトでブロックとインラインになります。ブロックまたはインラインで表示されない一般的なタグは何ですか? これらのタグの表示とブロック/インラインの違いは何ですか?

1. インライン要素にdisplay:blockを設定するインライン
2. 要素にfloatを設定する
インライン
3. 要素の位置を設定する:絶対/固定 簡単に言うと、一般的なテキストと画像はインライン、div はブロック、一般的なボタンと入力はインラインブロックです。

表の最初の行は赤色の背景を表示し、最後の行は青色の背景を表示し、中央の行は灰色/白色の空白の背景を使用します。

構造化疑似クラスを使用して、次のように記述します

        ul li        {            border-bottom: 1px solid #ccc;        }        ul li:last-child        {            border-bottom: 0px;        }

        ul li + li        {            border-top: 1px solid #ccc;        }

次の兄弟を選択する特定の要素のノード (li + li{…} など)

特定の要素の兄弟ノード (span ~ a{…} など) をすべて選択します
2. 4,
疑似要素::before、::after使ったことはありますか？どこで使われているのでしょうか？

フロートをクリアして div に「三角形」を追加します

css?? その中の「カスケード」を理解するにはどうすればよいですか?

6. ボックス モデルの幅は、実際にはパディング、ボーダーを除いたコンテンツの幅を指します。そしてマージン。実際、これは CSS レイアウトに非常に悪影響を及ぼします。幅を全幅にする方法はありますか?

box-sizing

.... 他にもたくさんの質問があるので、一つずつまとめていきます

cssの学習を考えています

ブラウザはどうやって動くの？

ブラウザが HTML をロードした後、検索するのは 1 つだけですか?? ブラウザは HTML を dom ツリー構造に変更し、HTML の構造化を完了します。

ブラウザはロードされた HTML を dom ツリーに変換しますが、現時点では表示スタイルがありません。したがって、表示されるスタイルはすべて css によって定義され、その後のビューのレンダリングに関しては、CSS を統合した後に起こったことです。ブラウザーの CSS の統合は、HTML の解析とは別のルートです。

HTML 解析は 1 行、CSS 解析は 1 行であり、この 2 つはある時点で結合されて最終ビューを形成します。

CSS に焦点を当てると、上の図から CSS を学習するための 3 つのブレークスルー ポイントをまとめることができます。

CSS の 5 つのソース

CSS で制御できる表示方法

1. 配置、背景、フォントなど
2. 実は、CSS を上記の 3 つの側面から理解すると、アイデアが突然明確になります。元のブロガーの文を使用すると、他人の力を利用して自分を向上させる、巨人の肩の上に立つことによってのみ、より遠くを見ることができるという意味です。
3. CSS スタイルソース

我之前一直到《css权威指南》里面说的用户代理样式一词很不了解，看了博主的文章后才明白，在一些浏览器是可以自定义字号和字体的（用户在这里设置了字体和字号之后，它们会覆盖掉浏览器默认的样式）。

布局相关

display:table具有包裹性，除了display:table之外，float及position:absolute也都具有包裹性，什么叫包裹性，简单一点的说就是宽度会根据内容而定，包裹的特性其实主要有三个表现：收缩、坚挺、隔绝。

在没有css3的column-count之前，大家都习惯用display:table-cell来实现多列布局，但是众所周知table-cell IE6、7不兼容。

纵向margin是会重叠

用div画下三角

        div        {            border: 10px solid;            border-color: #333 transparent transparent transparent;        }

div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

被设置了float的元素会脱离文档流。

“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。事实上这些空格并没有真正消失，只是位于float元素的后面罢了。

清除浮动的方法

1. 为父元素添加overflow:hidden
2. 浮动父元素
3. clear:both
4. 兼容各浏览器的clear both方法

        .clearfix:after        {            content: '';            display: table;            clear: both;        }        .clearfix        {            *zoom: 1;        }

 看王朋福的css知多少系列的总结