发表于： 2017-04-19 22:25:43
3 917
这两天完成的事情：
1、学习栅格系统。
2、基本完成任务6。
明天计划的事情：
1、任务7。
遇到的问题：
1、本来想先把栅格布局放一放，结果昨天做任务6很费劲，多次尝试后发现bootstrap会影响flexbox的使用。
解决办法：
学习bootstrap的栅格布局。
①布局容器container
container（有margin，左右padding=15px）container-fluid（width=100%，左右padding=15px）container不能相互嵌套
②行row
左右自带-15px的margin，嵌套在container里才会正常。
③列column
左右自带15px的padding，嵌套在row里，文本正好顶格。
④嵌套nesting
通过nesting可以扩展栅格系统（相当于container）
⑤断点类型
col-xx-y xs sm md lg
当视口宽度小于断点时，column将数值堆叠。设置xs可以始终水平浮动。
2、float:right;后垂直居中的问题。
解决办法：
今天发现一个比较有意思的方法。不过要定宽度，可能不太实用。。
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle
}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
这个需要给父元素定义一个宽度才能实现。
3、之前img路径src为空时，有灰色边框。
解决办法：
目前比较简单的办法是：给src添一个透明背景的路径。
4、下拉菜单中间有两条渐变的边框。
解决办法：
border渐变设置：
-webkit-border-image:
-webkit-linear-gradient(#fff , #ccc, #fff) 1 100%;
-moz-border-image:
-moz-linear-gradient(#fff , #ccc, #fff) 1 100%;
-o-border-image:
-o-linear-gradient(#fff , #ccc, #fff) 1 100%;
border-image:
linear-gradient(to bottom, #fff , #ccc, #fff) 1 100%;
5、button字体大小改变。
解决办法：
给button加font-size是无效的。
button:first-child{font-size:16px;}
6、footer中间图标。
解决办法：
后来发现和任务5的头像是一样的。
待解决的问题：
1、bootstrap定义了字体10px，自己定义html{font-size：625%;}无效，不知道怎么修改html的字体大小。这样用rem很不方便。
2、bootstrap里默认的那些padding、margin值是不是不能调整？
收获：
bootstrap的基本使用方法。
返回列表
评论