相關(guān)文章

• 深入清除浮動(dòng)原理

  摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動(dòng)了。下面詳細(xì)看一下這兩大類清除浮動(dòng)的方式及原理。所以，避免穿透啊，清除浮動(dòng)什么的也好理解了。 關(guān)于浮動(dòng) 設(shè)置為浮動(dòng)的元素會(huì)脫離當(dāng)前文檔流，向左或向右移動(dòng)直到邊緣遇到另一個(gè)浮動(dòng)元素或者到達(dá)邊界。普通元素不會(huì)對(duì)齊造成影響。 浮動(dòng)是把雙刃劍，在給我們的布局帶來(lái)便利的同時(shí)有一些缺點(diǎn)需要我們?nèi)ソ鉀Q。例如最常見(jiàn)的父元素塌陷。如下圖所示：...

  freewolf 2019-08-29 15:25 評(píng)論0 收藏0

• 重拾css(10)——display

  摘要：瀏覽器默認(rèn)樣式中規(guī)定了元素哪些屬于塊剩下的就是流。上圖可知，針對(duì)的標(biāo)簽，你設(shè)置寬度和高度是無(wú)效的，通過(guò)監(jiān)控可以知道，該元素實(shí)際的寬度和高度都是，并不是我們?cè)O(shè)定的值。因此，的特點(diǎn)可以總結(jié)為外部看來(lái)是流，但是自身卻是一個(gè)塊。 1.引言 html元素，除了塊就是流（即平時(shí)常說(shuō)的塊級(jí)元素和行內(nèi)元素），而且流都包含在塊中，例如body就是一個(gè)塊，而a就是一個(gè)流。瀏覽器默認(rèn)樣式中規(guī)定了html元素...

  dendoink 2019-08-29 12:44 評(píng)論0 收藏0

• CSS魔法堂："那不是bug，是你不懂我!" by inline-block

  摘要：那不是，是我不懂而已。的用途之一西文是以空格來(lái)分隔單詞的，而漢字間則無(wú)需空格分隔，但為了統(tǒng)一西文東亞和的排版，于是抽象出一個(gè)名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語(yǔ)言信息。 前言 每當(dāng)來(lái)個(gè)需要既要水平排版又要設(shè)置固定高寬時(shí)，我就會(huì)想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發(fā)...

  cucumber 2019-08-30 12:56 評(píng)論0 收藏0

• CSS篇之水平導(dǎo)航

  摘要：關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。問(wèn)題一個(gè)最簡(jiǎn)單的結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。缺點(diǎn)，和方法一樣，會(huì)出現(xiàn)空白間隙，解決方案如上，因?yàn)槭切袃?nèi)元素，所以不能設(shè)置寬高，比較局限。 關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。 問(wèn)題：一個(gè)最簡(jiǎn)單的html結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。 ...

  李義 2019-08-29 11:19 評(píng)論0 收藏0