您現在的位置是:電腦技術吧?>? 編程技術 ??>??right left,right to left??>??正文詳情

right left,right to left

問燕嵐2019-11-22 17:31:46 人圍觀
簡介onthe left一。明白清楚:左/清楚:右。當你想到“清”:左,你自然會想到“清”左浮,而“清”:右其實就是“清”右浮,如果你現在想起來,這樣的理解和表達一般都不嚴謹、不周到

一、理解clear: left/clear: right  當想到clear: left的時候,自然會認為是清除左浮動,clear: right是清除右浮動。

  其實現在想想,這樣的理解與表示是不嚴謹的欠考慮的。

  一般,現在中文圈流傳的表述是:  clear語法:  clear : none | left | right | both  取值:  none : 默認值。

允許兩邊都可以有浮動對象  left : 不允許左邊有浮動對象  right : 不允許右邊有浮動對象  both : 不允許有浮動對象  w3.org官方的解釋是:「元素盒子的邊不能和前面的浮動元素相鄰」。

  我個人覺得官方解釋更好一點。

  無論是我清除左/右浮動,還是業界流傳的不允許左/右邊有浮動對象,其意思都是,設置的clear的元素讓浮動元素如何如何。

也就是我讓別人如何如何~~大家可以仔細體會,細細感受下  而官方的說法則是設置了clear的元素不能怎樣怎樣。

也就是我自己如何如何~~大家可以再次感受下  為何官方解釋更好呢?難道是己所不欲勿施于人的緣故?哈,這個解釋贊的,方便記憶。

更通俗的原因是:  務必記住這句話:float是魔鬼,會影響其他相鄰元素;但是clear是小白,其只會影響自身,不會對其他相鄰元素造成影響!  但是,官方的解釋似乎拗口,缺少點靈性。

于是,我根據自己的感性認知,做了如下理解:  clear語法:  clear : none | left | right | both  取值:  none : 默認值。

  left : 左側抗浮動  right : 右側抗浮動  both : 兩側抗浮動  抗這個擬人化的動詞的發起者是設置了clear屬性的元素,既形象又釋義準確。

  實例出真知  您可以狠狠地點擊這里:clear:left/right的作用效果demo

  例如上圖所示的clear:left作用示意:圖片左浮動,化身魔鬼,要影響后面相鄰的元素。

一般的元素都逃不了被影響被束縛的命運。

除非擁有clear技能。

例如,這里clear:left左側抗浮動,也就是,左側的浮動根本就奈何不了我我還是原原本本在下面顯示。

  但是,如果圖片是右浮動,則clear:left仍逃不過淪陷的命運,可以看到父級容器的高度塌陷了!  單純的clear:left就像是招潮蟹,一側雄起,一側不舉。

  因此,考慮到通用性,在抗浮動的處理中,我們都是使用clear:both. 用意很明顯:我不必關心你是左浮動還是右浮動,我都通通免疫。

  因此,我們才會有下面這段雕琢后的清除浮動通用CSS:  CSS Code復制內容到剪貼板  .fix { *zoom: 1; }  .fix:after { content: ''; display: table; clear: both; }  下面又有問題了,貌似我們接觸的clear基本上都是both值,似乎left, right值的出現就是雞肋,沒什么用。

真的是這樣嗎?  二、clear:left/right的實際用途  clear:left/right最實際也是最常見的用途就是實現垂直環繞布局。

  出個簡單的題目,下圖所示的布局實現,你的HTML結構會是?

  哈,我猜想下,估計你會把頭像img和姓名放在同一個父級容器中,而這個父級容器左浮動;然后右側的信息元素浮動跟隨(自適應布局),對不對?  這是業界主流做法,其實是沒什么問題的?  不過,你有沒有細細思考過這樣一個問題:為何大家幾乎都是這種HTML結構設計?  實際上,按照我不專業的理解,頭像、姓名、自我描述應該是平級的兄弟關系。

從語義來看,貌似頭像、姓名硬生生變成兒子和女兒是不妥的吧~~  當我們只知道票子放銀行錢會變多,我們就只會存錢理財。

同樣的,并不是我們不想嘗試其他的結構實現布局,而是,我們不知道方法。

說穿了,就是對clear:left/right理解不透,不夠重視!  如何頭像、姓名、自我描述三兄弟平起平坐,同時達到我們想要的布局效果呢?就是借助clear:left, 半壁clear屬性配合float屬性可以實現垂直環繞布局。

  何為垂直環繞布局?上面提供的demo中有示意:

  兩個圖片實際上都是右浮動(float: right)的,這種情況下,顯然,圖片會是一行排排站。

但是,如果后面一張圖片設置了右側抗浮動聲明:clear: right. 則,后面一張圖片就會落下來,形成垂直布局;加上自身的浮動特性依舊存在,于是,兩張圖片猶如一個浮動整體。

這就是典型的垂直環繞布局。

  于是,我們如下HTML以及CSS,就有符合題目要求的新型布局方式啦!  CSS Code復制內容到剪貼板

    div style=width:500px;font-size:12px;overflow:hidden;_zoom:1; span style=float:left;width:96px;...頭像/span strong style=float:left;clear:left;...姓名/strong p style=margin-left:106px;...我是一個帥哥/p /div

至此,三兄弟終于平起平坐啦!

版權聲明:本文由 問燕嵐 整理編輯。

原標題:left right什么意思,leftrightleft的中文

轉載注明出處:http://www.dn9ww09s.icu/program/13987.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 秘密檔案2,秘密檔案1

    秘密檔案2,秘密檔案1 相關圖片中國秘密檔案秘密檔案館是在滴滴四周年之際為用戶推出的一項活動。通過這個活動,用戶可以了解到他們在過去四年中花了多少錢。那么迪迪的旅行秘密文件在哪里?接下來,超人軟...

  • Flash動畫實例教程,做flash動畫

    Flash動畫實例教程,做flash動畫 相關圖片flash一分鐘動畫輕松地將flash動畫轉換成GIF圖片magicswf2gif不僅可以快速高效地將swf格式的[color=﹐0000ff]flash[/color]動畫轉換成flash動畫作業...

  • 怎么修改ps的尺寸,ps修改圖片尺寸

    怎么修改ps的尺寸,ps修改圖片尺寸 相關圖片ps上面的尺寸怎么設置在我們的生活中,我們總是遇到一些圖片的大小達不到我們需要的大小的麻煩。很多朋友總是問我如何根據需要調整圖片的大小。今天,我將向Photoshop初學者介紹圖...

  • 抖音切換鏡頭視頻教程,抖音怎么切換幾個畫面

    抖音切換鏡頭視頻教程,抖音怎么切換幾個畫面 相關圖片抖音怎么切換場景自助餐作為下一代流行的電影拍攝軟件,以其超酷的功能受到很多年輕人的喜愛。但是你知道怎么換相機嗎?現在,超人軟件將為您帶來iPhone版本的相機切換方法。我...

  • 自學交互設計,交互設計自學網站

    自學交互設計,交互設計自學網站 相關圖片交互設計需要學編程嗎對于所有人來說,最常見的問題是如何從零基礎上學習交互設計。事實上,在許多情況下,零基礎并不可怕,但他們最害怕的是零基礎帶來的浮躁,例如,他們往...

  • 清理,清除瀏覽記錄

    清理,清除瀏覽記錄 相關圖片win7刪除文件恢復相信使用win7的小朋友們已經發現,他們的電腦系統在累積使用的過程中存儲了很多無用的記錄。那么win7系統如何清理記錄呢?接下來,超人軟件小程序將為您介紹win清...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符一。只有人為地增加兩個中文滿空間,才能顯示位置縮進效果。2。插入點地圖或圖形點地圖是指圖片中只有一個或多個像素點,肉眼看不到。當我們在段落的開頭插...

  • 719唯品會,719唯品會包郵嗎

    719唯品會,719唯品會包郵嗎 相關圖片唯品會y近日,摩比和唯品會推出了719紅包車活動。你知道719盒式汽車的用途嗎?接下來,超人軟件編輯將介紹如何玩iPhone版的Moby唯品會紅包車,感興趣的合作伙伴唯品會為什么便宜...

  • 水晶質感,PS水晶質感

    水晶質感,PS水晶質感 相關圖片如何用ps做出水晶質感的效果一。輸入你想要的單詞。2。使用“縮放”和“扭曲”工具調整所需的角度(請注意,這是我們正在處理的內容或單詞2不是組合路徑,因為如果它是由路徑處...

  • 桔子白條,桔子茶藍白條

    桔子白條,桔子茶藍白條 相關圖片桔子分期吧Orange staging是一種生活購物軟件。在這個軟件中,用戶只需申請一張白條,就可以在支付前體會到消費的體驗。那么如何在橙色的分期付款中制作白色條紋呢?接藍白條...

熱評文章

  • QQ瀏覽器不是私密連接,eas安裝檢測更新

    QQ瀏覽器不是私密連接,eas安裝檢測更新 相關圖片微博你的連接不是私密連接Chrome是谷歌推出的一款熱門瀏覽器,具有穩定性、速度和安全性的優勢。在使用Chrome瀏覽器的過程中,會警告某些用戶,您的連接不是私有的。如何處理這種...

  • 短暫的分開是為了更長久的,短暫的快樂長久的悲傷

    短暫的分開是為了更長久的,短暫的快樂長久的悲傷 相關圖片美好的時間總是短暫的中秋節快到了。你是高興回家過節,還是被迫在公司加班?作為廣告商,中秋節不僅是我們眼中的月餅,更是數不清的短暫卻不慌張!聽說看完這一套案例,你可...

  • ppt背景怎么設置顏色,ppt怎么設置表格顏色

    ppt背景怎么設置顏色,ppt怎么設置表格顏色 相關圖片PPT表格顏色在使用PPT的過程中,是否經常要將文字變換成各種顏色,使文字更加突出。那么如何為PPT設置多個文本顏色呢?接下來,超人軟件將介紹如何為PPT設置多個文本顏色PPT里表格...

  • 按鈕文本為返回,組態王按鈕上的文本

    按鈕文本為返回,組態王按鈕上的文本 相關圖片HMI按鈕文本動態改變Flash動畫按鈕可以給網站帶來動態性,這讓很多讀者覺得很有意思,同時也給網站增加了很多訪客。實際上,在DreamweaverMX2004中,可以通過幾個簡單的ppt超級鏈接返回...

  • 浙工院是幾本,浙工院孫麗穎

    浙工院是幾本,浙工院孫麗穎 相關圖片i浙工院最新版浙江理工學院是浙江職業技術學院的官方軟件。在這個軟件中,你可以得到最新和完整的學校信息。那么,如果進不了浙江工業大學的董事會,我該怎么辦呢?接下來,超...

  • 搖滾字體,搖滾字體設計

    搖滾字體,搖滾字體設計 相關圖片搖滾海報最終渲染如下:1。用你最喜歡的字體輸入一個200px大小的金色字符(我使用富超級歌曲),然后看一下下面的操作。2這是核心步驟,即應用震動變形的參數增量來產生巖石字體...

  • 解除百度云網速限制,電腦百度網盤下載網速慢

    解除百度云網速限制,電腦百度網盤下載網速慢 相關圖片百度賬號限速幾天恢復相信百度在線免費用戶已經發現,下載速度非常慢,甚至有時候只有幾十K,其實這是百度官方對大家的速度限制。那么百度在線磁盤下載速度是不是太慢了?接下...

  • 電腦pdf怎么轉換成word,pdf轉word免費不限頁數

    電腦pdf怎么轉換成word,pdf轉word免費不限頁數 相關圖片pdf轉換成可編輯的word雖然PDF文件的閱讀效果比較好,但相信還是有很多小伙伴喜歡使用word文檔。那么如何將PDF轉換成word呢?接下來,超人軟件編輯器將介紹如何將PDF轉換為wopdf轉換成...

  • 簡單網頁設計,簡單的網頁設計步驟

    簡單網頁設計,簡單的網頁設計步驟 相關圖片簡單網頁設計作品事實上,當今的網頁設計配色和色彩運用是一個非常有趣和值得思考的問題。雖然絕大多數網站看起來都很相似,但是巧妙地運用色彩會使平庸網站的布局顯得非同尋...

  • 天天練,瑜伽天天練好嗎

    天天練,瑜伽天天練好嗎 相關圖片手臂可以天天練嗎日常練習是一個非常好的閱讀和學習軟件。在這個軟件中,用戶可以體驗到對抗怪物的學習方法和升級模式。他們可以通過刷問題和沖刺排名來節省金幣。那么如何在...

關注微信

变脸官网查询