當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

發布時間：2023/11/27 生活经验 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

１標簽包含規范

◆div可以包含所有的標簽。

◆p標簽不能包含div h1等標簽。

◆h1可以包含p，div等標簽。

◆行內元素盡量包含行內元素，行內元素不要包含塊元素。

2 規避脫標流

◆盡量使用標準流。

◆標準流解決不了的使用浮動。

◆浮動解決不了的使用定位。

使得綠色盒子跑到右邊 ?

    <style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

    <style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right;       }</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

         .son{width:100px;height:100px;background:green;margin-left:auto;}

設置盒子左外邊距為auto，將盒子往右邊沖

margin:0 auto ; ? 盒子左右邊一直沖，居中

3 圖片和文字垂直居中對齊

vertical-align對inline-block最敏感。默認屬性是:vertical-align:baseline;

4 Css可見性

visibility:hidden;?? 隱藏元素??? 隱藏之后還占據原來的位置。

    <style type="text/css">.red{width: 300px;height: 300px;background:red;visibility:hidden;}.green{width: 300px;height: 300px;background:green;}</style>
</head>
<body><div class="red"></div><div class="green"></div>
</body>

?display:none;????? 隱藏元素??? 隱藏之后不占據原來的位置

轉載于:https://www.cnblogs.com/yimian/p/6681844.html

總結

以上是生活随笔為你收集整理的HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。