ホームページ > 記事 > ウェブフロントエンド > CSS のスキルと経験の共有_html/css_WEB-ITnose
CSS のスキルと経験の共有_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:091024ブラウズ
CSS のヒントと経験:
1. 画像の下の数ピクセルの空白のギャップをクリアする方法
方法 1
img {
display: block;
}
方法 2img {
vertical -align: top;
}
// 上の値に加えて、特定の
メソッド 3
// #test は img
の親要素です#test {
font-size: 0;
line-height: 0;
}
2テキスト入力ボックス内のテキストを垂直方向に揃える方法
input {
vertical-align: middle;
}
3. コンテナ内の 1 行のテキストを垂直方向に中央揃えにする方法
#test {
垂直-align: middle;// テキストの行の高さをコンテナの高さと同じに設定するだけです
4. ハイパーリンクの色を訪問後と訪問前で変更し、ホバーを保持する方法link-visited-hover-active になるのはなぜですか? a:hover {
color: #f30;
}
a:active {
Color: #c30;
}
// ハイパーリンクのスタイルを L-V-H-A の順に設定するだけです。 LoVe (like) HAte (hate)
5. テキストのオーバーフロー境界を強制的に 1 行で表示する方法
#test {
width: 150px;
white-space: nowrap ;
}
// コンテナの幅と空白を nowrap に設定できます
6. テキスト オーバーフロー境界を省略記号として表示する方法の詳細な説明
#test {
width: 150px;
text- overflow: ellipsis;
}
// まず、テキストを強制的に 1 行で表示するように設定し、次に overflow: hidden を使用してオーバーフロー テキストを切り詰める必要があります。 text-overflow を使用して、切り詰められたテキストを省略記号として表示します: ellipsis
7. 連続した長い文字列を自動的にワードラップする方法 詳細説明
#test {
width: 150px;
word-ラップ：ブレークワード;要素
方法 2
#test {
表示: ブロック;
ズーム: 1;
オーバーフロー: 非表示; zoom:1 は固定の幅または高さに置き換えることもできます
方法 3
#test {
}
#test:after {
display: block;
Clear: Both;
Visibility: hidden;
height: 0;
content: '';
}
// #test は浮動要素の親要素です
9. マウスポインタのカーソル形状をハンドカーソルとして定義する方法詳細な説明
#test {
Cursor: pointer;
}
// カーソルをポインタに設定するだけです
10. 幅と高さが既知のコンテナをページの水平方向と垂直方向の中央に配置する方法
方法 1 位置の詳細な説明
#test {
width: 200px;
height: 100px;
location:relative
top: 50%;
マージン: 0 自動
マージン-top: -50px; / * 高さの半分 */
}
// まず、コンテナを相対位置に設定し、margin-top: -50px; を垂直方向の中央に設定します。 margin: 0 auto 水平方向に中央揃えにする
方法 2 の詳細な説明
#test {
width: 200px;
height: 100px;
position:relative;
トップ: 50%;変換:translateY(-50%);
margin: 0 auto;
}
// 首先容器为相对定位，设置top: 50%;transform: translateY(-50%);使其垂直居中，再设置margin:0 auto使其水平居中
11. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中 vertical-align详解
#test {
display: table-cell; /* vertical-align只支持内联（inline）元素或表格单元格（table-cell）元素 */
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#test p {
margin: 0;
}
#test p img {
vertical-align: middle;
}
// #test是img的祖父节点，p是img的父节点
12. 如何设置span的宽度和高度（即如何设置内联元素的宽高）
span {
display: block;
width: 200px;
height: 100px;
}
// 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。
13. 如何让某个元素充满整个页面
html, body {
height: 100%;
margin: 0;
}
#test {
height: 100%;
}
14. 如何让某个元素距离窗口上右下左4边各10像素
html, body {
height: 100%;
margin: 0;
}
#test {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
15. 如何容器透明，内容不透明
方法1
.outer {
width: 200px;
height: 200px;
background: #000;
opacity: 0.2;
}
.inner {
width: 200px;
height: 200px;
margin-top: -200px;
}
// 原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上
方法2
.outer {
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.2);
}
我是不透明的内容
// 直接使用background-color的rgba颜色值实现（高级浏览器）
16. 如何让已知宽度的容器水平居中
#test {
width: 960px;
margin: 0 auto;
}
17. 为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？
// 清除浮动，方法请参考第8条
// 通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方
18. 如何做1像素细边框的table
方法1 border-collapse详解
#test {
border-collapse: collapse;
border: 1px solid #ddd;
}
#test th, #test td {
border: 1px solid #ddd;
}
| 姓名 | Joy Du |
|---|---|
| 年龄 | 26 |
方法2 border-spacing详解
#test {
border-spacing: 1px;
background: #ddd;
}
#test tr {
background: #fff;
}
| 姓名 | Joy Du |
|---|---|
| 年龄 | 26 |
19. 如何使页面文本行距始终保持为n倍字体大小的基调
body {
line-height: n;
}
// 注意，不要给n加单位
20. 以图换字的几种方法及优劣分析
思路1 使用text-indent的负值，将内容移出容器 text-indent详解
#test {
width: 200px;
height: 50px;
text-indent: -9999px;
background:#eee url(*.png) no-repeat;
}
// 该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异
思路2 使用display:none或visibility:hidden将内容隐藏
#test {
width: 200px;
height: 50px;
background: #eee url(*.png) no-repeat;
}
#test span {
visibility: hidden; /* 或者display:none */
}
以图换字之内容隐藏法
// 该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂
思路3 使用padding或者line-height将内容挤出容器之外
#test {
overflow: hidden;
width: 200px;
height: 0;
padding-top: 50px;
background: #eee url(*.png) no-repeat;
}
.test {
overflow: hidden;
width: 200px;
height: 50px;
line-height: 50;
background: #eee url(*.jpg) no-repeat;
}
//该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack
思路4 使用超小字体和文本全透明法
.test {
overflow: hidden;
width: 200px;
height: 50px;
font-size: 0;
line-height: 0;
color: rgba(0,0,0,0);
background: #eee url(*.png) no-repeat;
}
// 该方法结构简单易用，推荐使用
21. 为什么2个相邻div的margin只有1个生效
.box1 {
margin: 10px 0;
}
.box2 {
margin: 20px 0;
}
// この例では、box1 の下マージンは 10px、box2 の上マージンは 20px ですが、ページ上の 2 つの間のギャップは 20px であり、予想される 10+20px=30px ではありません。結果は次のようになります。選択 2 つの間の最大のマージン。このメカニズムを「マージンのマージ」と呼びます。マージンのマージは、隣接する要素間で発生するだけでなく、親と子の間でも発生します
// マージンのマージに関する注意事項をいくつか挙げます。
// a. マージンのマージはブロックレベルの要素にのみ適用されます。
// b. フローティング要素は隣接する要素とマージされません。
// d. インラインのブロックレベル要素はマージンとマージされません。
// 属性オーバーフローが設定されたルート要素はマージンとマージされません。表示されない値は子要素とマージンをマージしません。
22. テキストボックスで中国語を無効にする方法 入力メソッド
input, textarea {
ime-mode:disabled;
}
// ime-mode は非標準属性です。このドキュメントを作成する際、中国語入力メソッドを正しく無効にできるのは IE だけです。Firefox はサポートしていますが、無効にすることはできません
23. 詳細な説明の前に改ページを印刷します
// ほとんどのインターネット ユーザーはオンラインでコンテンツを読むことを好みますが、記事を印刷したいユーザーもいるかもしれません。 CSS を使用すると、コンテンツの改ページを制御でき、印刷したいラベルにこのクラスを追加できます
#test {
page-break-before: always
}
24. 段落ドロップキャップ: : first-letter 詳細説明
// 新聞や雑誌などで使用するための沈み効果を作成できます
p::first-letter {
margin: 5px 0 0 5px
float: left;
color: #FF3366;
font-size: 3.0em;
}
25. 単語の大文字化の詳しい説明 text-transform
#test {
text-transform: uppercase; /* lowercase lowercase; *** 27. CSS Resetnormalize.css download
// Normalize.cssの使用を推奨します
28. CSS calcでの簡単な操作詳細説明
// いくつかの簡単な操作は、ダイナミクスを実現する CSS の calc メソッド 要素のスタイル設定の目的を指定します。
#test {
背景-位置: calc(100% - 50px) calc(100% - 20px);
}