木灵鱼儿
阅读:2268
两栏自适应布局
两栏自适应布局,顾名思义就是当左边的高度高于右边时,右边会自动补全至其等同于左侧的高度!
示意图
方法有三种,按原理来算应该只能算两种,为此我们慢慢道来:
第一种:margin控制外部大小的方式
HTML代码:
<div class="div1">
<div class="left">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div class="right">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
CSS部分:
.div1 {
overflow:hidden;
}
.left {
width:50%;
float:left;
background:#666;
margin-bottom:-9999px;
padding-bottom:9999px;
}
.right {
width:50%;
float:left;
background:#999;
margin-bottom:-9999px;
padding-bottom:9999px;
}
原理:
通过margin的负值-9999px让元素外部大小减小,然后再添加padding值9999px让这个外部大小为0(9999-9999=0),虽然这个外部大小为0了,但是视觉层(padding)多了9999px;这样我们给他们的父元素添加超出部分隐藏,就会如示意图一样,不足的部分就会自动填充,形成自适应,实际上就是一个padding显示了而已!
第二种:margin控制外部大小的方式,用border增加高度!
HTML代码:
和第一种一样,只是CSS部分不同!
CSS部分:
.div1 {
overflow:hidden;
}
.left {
width:50%;
float:left;
background:#666;
margin-bottom:-9999px;
border-bottom:9999px solid #666;
}
.right {
width:50%;
float:left;
background:#999;
margin-bottom:-9999px;
border-bottom:9999px solid #999;
}
原理:
和第一种一样,只是第一种是用padding来增加高度,这里是用border来增加!
第三种:将元素设置display:table-cell
HTML部分:
和第一种一样,只是CSS部分不同!
CSS部分:
.div1 {
/* overflow:hidden;(已经不需要超出部分隐藏了,注释掉!) */
}
.left {
width:500px;
background:#666;
display:table-cell;
}
.right {
width:500px;
background:#999;
display:table-cell;
}
原理:
我们将两个需要自适应的元素其display属性改为table-cell表格属性,表格在css定义是天生自适应高度的,也就是说啥也不用干,改成这个属性就可以自适应高度了,简单方便,代码维护方便,在不考虑兼容ie7-ie8这些远古版本的话,完全就是可以日常使用了!个人推荐这个!
其实table-cell还可以很方便的设置内部内容的居中垂直对齐,把表格布局的一些精髓完全精简至现代代码中,这也是导致以前表格布局没落的原因之一!有兴趣可以百度也可以底下留评论发表看法,当然也可以要求博主再来一篇!233...
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
transform 知识补充
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的,如下图所示:因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;transform: translateX(100...

meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
scss 自动生成margin和padding的class
费了半天劲才搞懂了,scss的函数代码写的是真累啊,而且不知道为啥我的代码格式化会给我自动换一行,导致极度不美观。//生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", &qu...
纯css来做表单校验样式
css3新增了三个伪类::required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过,表单元素和form表单都有的伪类:invalid 表示不通过,表单元素和form表单都有的伪类其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。所以,如果此时设置:invalid伪类样式,是不合适的。解决办法就是:使用:placeholder-shown...

移动端适配iPhoneX和安卓底部小黑条
这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover...

css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...
