CSS第二篇

時間 2019-11-18

標籤 css 第二欄目 CSS 简体版

原文原文鏈接

給導航設置圓角的代碼：css

c3 裏面的屬性：border-radius：7px；spa

1補充盒子問題code

（盒子邊框緊鄰變粗問題）將兩個盒子邊框重疊而且設置定位提升層級避免盒子重疊，鼠標放上去只顯示一個盒子的邊框。blog

<style type="text/css">
div{
width:200px;
heigh:200px:
border:1px solid red;

margin-left=-1px;
}

div:hover{
border-color:blue;
position:relative
}
</style>

<body>
<div class="one"></div>
<div class="two"></div></body>

（盒子大小計算問題）在邊框顯示上作減法，不讓邊框顯示超出圖片大小 box-sizing：content-box（盒子默認計算方式）圖片

<style type="text/css">

.box{
width:200px;
height:200px;
background-color:pink;}

.box:hover{
border:5px solid green;
/*改變盒子計算方式*/
box-sizing:border-box;
}</style

2補充圖片垂直居中問題，兩種方式it

<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
line-herght:300px;(行高)}

ing{vertical-align:middle;(藉助div裏的文字使得圖片居中)}

</style></head>

<body>
<div class="box">
123<ing src="2.png"></div>
</body>
第一種方式

<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
}
span{
height:100%;
display:inline-block;}(因此基線對齊)

img{
vertical-align:middle;}
</style></head>

<body>
<div class="box">
<img src="2.png">
<span></span></div>
</body>
第二種方式
同時還能夠設置第三種方式
把span去掉在CSS裏替換成
div:after{
content:"";
height:100%;
dispaly:inline-block;
vertical-align:middle;}
}

推薦方式 按照表格方式
img{
vertical-align:middle;}
推薦方式
.table{
width;300px;
height:300px:
border:1px solid red;

display:table;}

.td{display:table-cell;
text-align:center;
vertical-align:middle;}
<body>
<div class="table">
<div class="td">
      <img src-"2.png">
</div></div>
</body>

1. 第二篇 CSS快速入門
2. css篇 -- （二）浮動
3. CSS基礎篇（二）
4. CSS第二講 CSS屬性
5. HTML第二課——css
6. 第二天HTML&CSS
7. CSS(第二部分)
8. 第二週day1（css）
9. CSS入門篇（第一篇，CSS選擇器與CSS權值）
10. Django第二篇
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• RxJava操作符（二）Transforming Observables
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。