HTML/CSS
最近报了一个学习前端的网上学院,百度ife。这段时间没有更新博客也是因为做任务加上找实习很忙,囧。近期做的小任务都是基础的HTML/CSS页面,没有涉及到JS。但是其实一些细节还是有难度的。通过这次学习还是了解到了很多新的东西。虽然截至日期过了还没有写完所有任务,但是后面的也会补上后上传到GitHub。
布局
用CSS布局的方法很多,比如float/position/flexbox等,以前只知道用前两种方法,这次的任务中有专门学习flexbox的部分。
- float:用float布局要注意父元素使用clear/overflow等来消除浮动对其他元素的影响
- position:absolute/relative/static/fixed
- flexbox:主轴侧轴的选择,是否多行,排列顺序的设置等。
插入水平(垂直)线
除了<hr />
标签,其实可以利用盒模型的border来插入水平(垂直)线,同时可以利用padding来调节线与盒子内容的距离等。
inline-*元素间的缝隙问题
- 最简单粗暴的方法是去掉所写的HTML中相邻inline-*元素间的空格
- 使用float
- 在父元素上设置
font-size: 0;
文字图片环绕问题
- 简单的环绕可以通过设置float和margin来实现。
- 复杂的文字挨着图片轮廓环绕需要用到shapes, 但其实兼容性不好