发表于： 2018-12-13 19:27:13
1 786
今天完成的事情：
MARGIN为负值时产生的影响
1、对于自身的影响
当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
2、对文档流的影响
元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。
元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。
3、对浮动元素的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
4、对绝对定位的影响
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移
bootstrap有哪些常用组件
1.轮播图
2.下拉菜单
3.响应式导航条
下拉菜单
如需使用下拉菜单，首先要引入bootstrap文件，一般都是引入网上别人提供的cdn，当然，自己可以引入自己定制好的bootstrap文件。 然后只需要在 class .dropdown 内加上下拉菜单即可。
给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1",data-toggle用来控制弹出框元素
给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单
响应式导航条
创建一个默认的响应式导航条的步骤如下:
1、向nav标签添加 class .navbar、.navbar-default。
2、向上面的元素添加 navbar-header，navbar-header
3、给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。
4、给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"
1.navbar-toggle样式是控制3根斑马线的。
2.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中
3.collapsed是为了响应折叠插件的
4.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容
明天计划的事：
继续任务
遇到的困难：
感觉现在写的代码很多，没有很好的分出类来
响应式是会写很多吗，还是稍微的修改？
收获：
如上
返回列表
评论