CSS篇2——有关布局的那些事

前言

本文理一下CSS布局的一些事。CSS布局要注意哪些点。其实CSS布局是有技巧的,不同人布局页面,最后出来的效果可能差不多,但是一些布局细节可能差很多。本文不讲stiky footer 布局,圣杯双飞翼等等的布局方式,就说一下一些常用的布局技巧。

一、少用定死宽度

布局的时候,少用定死的宽度,假如真的用宽度,外层用就可以,尽量让宽度和影响宽度的padding\border(有时候也包含margin),分开来布局。

1、避免用定死宽度布局

布局的时候,不要用定死宽度和float布局。可以采用左侧固定,右侧自适应,或者flex布局方式进行。

2、宽度分离 确实要用宽度的时候,在外层用,避免宽度和padding\border一起使用,推荐如下:

css 复制代码
.father{width:1280px}
.son{margin:0 20px;padding:16px;border:1px solid}

二、优先级最高的width

max-width 和min-width 优先级是最高的,即使宽度设置了!important,最大宽度和最小宽度的优先级也是最高的。

例如如下:

css 复制代码
<img  src="haoroomscom.jpg" style="width:500px !important;">
img{max-width:300px;}

图片就会展示300px

利用这一点,我们可以做高度展开收起的动画效果。

例如如下:

arduino 复制代码
.element{
max-height:0;
overflow:hidden;
transtion:max-height .25s;
}
.element.show{
max-height:500px
}

就可以出现展开收起的动画,假如max-height,设置为height,就不会出现动画。

三,辅助元素生成content

content的作用很多,我之前也有文章专门介绍过,请看:www.haorooms.com/post/conten...

四、多列等高布局

请看之前文章:www.haorooms.com/post/css_sk...

五、无依赖absolute绝对定位

类似如下:

布局一个top1

我们仅仅需要一句就可以

HTML:

ini 复制代码
<img src="top1.png" class="top1"><img src="https://www.haorooms.com/uploads/images/5gvideo.jpg">

CSS:

css 复制代码
.top1 {
  position: absolute;
}

因此,我们可以借助这个特性,来布局hot,new等导航栏的标识

通过absolute和margin 配合

例如hot标签

css 复制代码
.icon-hot{
position:absolute;
margin:-6px 0 0 2px;
width:12px;height:11px;
background:url(hot.gif);
}

除此之外,input必填输入框的* ;tips标识,都可以用这个特性来布局

css 复制代码
.icon-warn{
position:absolute;
margin-left:-20px;
width:20px;height:20px;
background:url(haorooms-warn.gif) no-repeat center;
}

六、releative最小化原则

经常看到有朋友在body等上面加position:releative 这样其实会限制很多,出现一些意想不到的问题。

最小化原则如下: 假如我们要在如下结构右上角定位一个图标

css 复制代码
<div>
<img src="haorooms.com.text" />
<p>haorooms测试内容</p>
<p>haorooms测试内容</p>
<p>haorooms测试内容</p>
</div>

要这么写:

xml 复制代码
<div>
 <div style="position:relative">
   <img src="icon.gif" style="position:absolute;top:0;right:0">
 </div>
<img src="haorooms.com.text" />
<p>haorooms测试内容</p>
<p>haorooms测试内容</p>
<p>haorooms测试内容</p>
</div>

这样污染最小,而不是在外层增加position:relative

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart1 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.1 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu1 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss1 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师1 小时前
React面试题
前端·javascript·react.js
木兮xg1 小时前
react基础篇
前端·react.js·前端框架
ssshooter2 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘2 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai2 小时前
HTML HTML基础(4)
前端·html