07月15, 2019

布局的一些问题

1.flex

2.12栅格

 十二栅格是一种响应式布局方式,它的大体思想是,将父元素的宽度等性的分成12栏,利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度,例如,某个元素,在大屏是占整个父元素的3栏(一行有4个相同元素),在中屏占整个父元素的6栏(一行有2个相同元素),在小屏占整个父元素的12栏(独占一行)。 alt col-xs sm md lg alt 3.rem布局

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

4.em

5.Margin-top 的BUG:

第一个子元素设置的margin-top作用在父元素身上 发生条件(同时具备)>1、父元素的第一个子元素。 2、父元素没有上边框。 3、父元素没有内间距。 4、父元素没有浮动 5、子元素没有浮动 解决方法:打破其中一个条件即可。

6.子类撑开父类:

一、(浮动的子元素撑不开父元素) 1、父元素能设置高度尽量设置。 2、给父元素添加“overflow:hidden”属性 3、给父元素添加子元素(放在父元素所有子元素之后),子元素设置属性“clear:both”(清除浮动产生的影响)
Clear:left/right/none/both

4.after before伪类选择器 前后加一个空的元素快速解决办法。加一个clear:both清除。 5.元素停止浮动:碰到父元素边界 碰到浮动的兄弟元素

本文链接:http://zzl.bzpwhite.cn/post/html.html

-- EOF --

Comments