2019年3月10日css学习随笔

1、在这里插入图片描述
用element-ui container布局容器,会精准划分各个板块,精确到0.01px,故在设计板块的时候,应该严格继承布局划分的像素,而不应该自己设定width,会使页面坍塌。
2、关于a标签设置inline-block继承宽高100%问题,应该说所有block元素,在父元素有宽高的前提下,继承只是宽width高height,并不会继承padding margin border 任意属性。
在这里插入图片描述
白色为继承的父元素宽高。
3、子元素 margin:0 auto和padding:0 auto;的区别,绝大部分时候的子元素的水平居中,用的都是margin: 0 auto.padding:auto 似乎不常用,padding多用于边距调整,而不是居中。
4、样式类名命名规范,el表示element-ul组件最外层,m表示model模型盒子,在wrapper,表示盒子,在是div
<el-main>
—<m-container>
------<m-header>
---------<box-wrapper>
-------------<wrapper-item>
-----------------<box>
----------------------------我是最里层元素!!!!!
-----------------</box>
-------------</wrapper-item>
---------</box-wrapper>
------</m-header>
—</m-container>
</el-main>
5、定位问题,如果你想要在这里插入图片描述
这种二级菜单的定位效果,尽量让子菜单position:absolute,让主菜单外的div的position:relative
在这里插入图片描述

虽然会牺牲一定的left和top,但是定位效益最大化。

6、多思考,多思考,多思考才能质变。
在这里插入图片描述
布局做到从心所欲,掌握每一个标签的用法。

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/88376333