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

質問

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

modernizr: ブラウザーの HTML5 および CSS3 機能を検出します (modernizr の紹介については、私の他のブログ投稿 HTML5 シリーズ 4 (機能検出、Modernizr.js の紹介) を参照してください)

2、

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

具体的な表示属性値は次のとおりです:

inline はサイズや形状を持たないフローとして理解でき、その幅は親コンテナの幅に依存します。インラインタグの場合、設定した幅と高さは無効です。

インライン要素をブロックレベル要素に変換する方法

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

したがって、インラインブロックの特徴は次のように要約できます: 外側からは「フロー」のように見えますが、それ自体は実際には「ブロック」です。

3.

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

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

ここに文章を挿入します。各メニューの間に下線を追加したい場合、効果は下の図のようになります

ほとんどの人は使用しますそれ

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

しかし、実際には、より便利な方法があります (構造化擬似クラスについてよく知っている場合)

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

ここに次の 2 つの構造化擬似クラスがあります:

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

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

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

実際、多くのアイコンは一般に非常に小さいですが (それ自体も小さいはずです)、この小さなアイコンにイベント バインディングを追加する必要があります。そうすると、さらに悪いことになります。携帯電話ではユーザーはまったくクリックできないので、どうすればよいでしょうか? コンテナのサイズを大きくするには、前後に使用できます。前後のプロパティは何も影響しません。したがって、ブラウザの解析時間が長くなる可能性があるので、コードに無駄な属性を書き込まないでください。

5.

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

これについては何も言うことはありません。実際、ID が 100 を表し、クラスが 10 を表し、要素が 1 を表すというブログ投稿をたくさん見てきました。本当に理解したいのであれば、私はこの説明に同意しません。 「CSS 決定ガイド」を参照してください。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知多少系列的总结