資訊專欄INFORMATION COLUMN
摘要：實驗出真理對添加如圖對添加如圖可知子容器的位置是相對于父容器的再看看偽元素的情況，我想在文本后加一個方塊，代碼如下卻沒有想要的效果，原來偽元素默認是所以寬高對他無效我們加上再試下這下行了，現(xiàn)在移動偽元素，加上可知偽元素與普通的塊一
實驗出真理
1.
html:
css:
.demo1 {
position: relative;
width: 200px;
height: 200px;
background-color: blue;
}
.demo2 {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
對demo2添加left:10px;top:50px;如圖：
對demo2添加right:-10px;top:50px;如圖：
可知absolute子容器的位置是相對于relative父容器的.
再看看::after偽元素的情況，我想在文本后加一個方塊，代碼如下：
.demo1::after {
content: " ";
width: 50px;
height: 50px;
background-color: red;
}
卻沒有想要的效果，
原來偽元素默認是inline-box,所以寬高對他無效．我們加上position: absolute;再試下
這下行了，現(xiàn)在移動偽元素，加上left:0px;top:20px;
可知偽元素與普通的塊一樣移動．
現(xiàn)在將demo1變成內(nèi)聯(lián)元素span效果如下
將left:0px;改為right:0px;
效果也是一樣的.
第一篇文章收工！
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115683.html
摘要：定位使元素的位置與文檔流無關，因此不占據(jù)空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...
摘要：狀態(tài)偽類是基于元素當前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
摘要：狀態(tài)偽類是基于元素當前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
閱讀 2569·2021-11-23 09:51
閱讀 3120·2019-08-30 15:54
閱讀 1070·2019-08-30 14:14
閱讀 3542·2019-08-30 13:59
閱讀 1393·2019-08-29 17:09
閱讀 1468·2019-08-29 16:24
閱讀 2848·2019-08-29 15:43
閱讀 911·2019-08-29 12:45
