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

相关推荐
crary,记忆1 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz2 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou02 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干2 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大3 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu3 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端3 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao3 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫3 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z3 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js