CSS布局

display常见用法属性:inline(可以在导航栏里把li标签变成水平),block,inline-block,none(隐藏元素,并且不会占据元素本该占据的空间),flex.

max-width属性。可以指定最大宽度,类似于百分之百的效果,也类似于响应式,让你的页面在手机上也能很好的展示。

人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}```
这样可以确保所有的元素都会用这种更直观的方式排版。

使用inline-block可以实现类似浮动的功能

position:absolute;相对于祖先中,最近的,已定位的元素定位,属性如果找不到满足条件的,就相对应最外面的的包含块定位<html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 参考资料: learn css layout 1. display 每个元素都有一个默认的 display 值,这...
    唐唐_sugar阅读 1,612评论 0 0
  • title: CSS布局date: 2016-09-14 22:55tags: CSS 0x00 display ...
    曼路x_x阅读 3,764评论 0 0
  • 以前对CSS布局有些接触,但是因为没有系统的学习过,导致每次在调整和修改起来都觉得比较困难,为了解决这个难啃的骨头...
    颭夏阅读 5,836评论 0 29
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,122评论 0 26