BFC (ブロック フォーマット コンテキスト)、ブロックレベルフォーマット Context は、内部要素と外部要素の位置が相互に影響しないように、BFC 内の要素を外部要素から分離する独立したレンダリング領域です。
## IE では、zoom:1
#特別な推奨事項##2. CSS3
属性セレクター
|
| #意味の説明
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
| ##E[att*="val"]||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
属性 att の値には「val」文字列要素が含まれています |
3. 中央揃えのレイアウト
1. 既知の要素の幅と高さ: 絶対位置マージン:auto: p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}ログイン後にコピー ログイン後にコピー 2。既知の要素の幅と高さ: 絶対配置負のマージン p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}ログイン後にコピー ログイン後にコピー 3.absolutetransform p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}ログイン後にコピー
空の要素を Clear 属性で使用し、空の要素を Clear 属性の後に使用します。
CSS の overflow 属性を使用して、フローティング要素のコンテナにoverflow:hidden;
クラスを追加し、このクラスに :after 疑似要素を追加して、要素の末尾に非表示のブロック要素 (Block 要素) を追加してフローティング要素をクリアします。 CSS疑似要素によりコンテナの内部要素の末尾に不可視のスペース「020」またはドット「.」が追加され、フロートをクリアするためにclear属性が割り当てられます。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1; を clearfix クラスに追加する必要があることに注意してください。
#親要素の高さの設定
5. 純粋な CSS を使用して三角形を作成する原理とは何ですか以前に三角形を作成するとき、それらは直接書かれていました。私はコードに行き詰まり、その理由を探りませんでした。面接を受けるまで、面接官は CSS で三角形を作成する原理について話すよう私に求めました。私は今... 戻ってきました。次に、私が当時理解していたことを説明しました。プロセスは次のとおりです: 1. 私たちが最もよく知っているボーダー アプリケーションを作成します 効果は次のとおりです。 .box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}ログイン後にコピー 2. 次に、境界値を増やします# 很容易发现, border渲染并不是正方形, 而是梯形的. 3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢! .box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}ログイン後にコピー 四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见; 4. 设置透明, 隐藏其中三个三角形 .box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}ログイン後にコピー 三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的 .box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}ログイン後にコピー
6. 实现三栏布局有哪些方法, 分别描述一下三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示： 下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p>ログイン後にコピー
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p>ログイン後にコピー
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}
</style>
<p class="content">
<p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p>ログイン後にコピー
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>ログイン後にコピー
7. css3实现0.5px的细线<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<p class="line"></p>ログイン後にコピー 8. link 与 @import 的区别
css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他 9. 开发中为什么要初始化css样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 10. CSS を最適化してパフォーマンスを向上させる方法は何ですか?
|
以上がWeb フロントエンドの面接で CSS について頻繁に聞かれる 10 の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
