块级、行内级元素 替换、非替换元素 元素的分类总结 CSS属性 - display 练习 CSS属性 - display inline-block 练习 CSS属性 - visibility CSS属性 - overflow 元素之间的空格 注意点 01_元素类型的划分方式.html <!DOCTYPEhtml> Document .box{ width:500px; height:200px; background: orange; } ....
当div1 设置了属性overflow:hidden后,baseline会设置在bottom margin的边缘。详情戳css规范。 规范的截图: 翻译:'inline-block'(盒)的基线是它的最后一个常规流中的行盒的基线,除非它没有流内行盒或者它的'overflow'属性的计算值不为'visible',此时基线是bottom margin边。 所以div2的文字和div1的下边框对齐。
外边距问题,发现给盒子直接添加overflow并不能解决外边距折叠,而直接添加display:inline-block却可以。 正文: 开启bfc是作用于盒子的内部子元素:所以对盒子直接使用ovflow:hidden时,box1与box2相邻同属于一个布局空间里(html的bfc里),垂直外边距依然折叠。 正如网上所写,我们给box1套一个box时,并ovflow:hidden开启...
overflow | position:absolute | float:left/right 等都可以让元素inline-block化产生包裹性。 而包裹性的作用很多,其中一个是可以使用其来清除元素的浮动。 inline-block的作用 css布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子。只是浮动经常会产生一...
图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下: >>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲) c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:图三: 图四: ...
行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ;
overflow | position:absolute | float:left/right 等都可以让元素inline-block化产生包裹性。 而包裹性的作用很多,其中一个是可以使用其来清除元素的浮动。 inline-block的作用 css布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子。只是浮动经常会产生一...
注意但块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值(visible,hidden,overflow,scroll) 4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin...
注意但块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值(visible,hidden,overflow,scroll) 4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin...
注意但块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值(visible,hidden,overflow,scroll) 4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin...