1. display属性

display是CSS布局的第一站,它控制一个元素以什么“身份”出现在页面布局当中。它的值有很多个,常用的有block,inline,inline-block,table,none。如果你想把一个元素放在页面中,它的display需不需要重新设置是很重要的第一步。
 

2. 什么时候用width,什么时候用max-width
 
从我的角度看,理解了这两者有什么区别,也许你就能很容易的去选择该用哪个,因为它们的区别还是挺大的。
    - width:给元素设定一个绝对宽度,既然是绝对的,就是不可变的。
    - max-width:给元素设定一个有上限的相对宽度。这个上限就是你给max-width设置的值,比如设置为600px,那么这个元素的宽度就在0-600之间变化,当当前窗口的宽度大于600px时,就将宽度设置为600px,如果比600小,就相应的缩小该元素的宽度,我们还可以给它设置一个min-width,指定最小宽度。这个特性在适应不同分辨率的屏幕时特别有用。
明白了这两者的区别,基本上所有的以min和max开头的属性意思都差不多,应用也很广泛,比如媒体查询。
 

3. 盒模型中的计算问题
 
我们也许都遇到过这样的情况,在使用盒模型的时候,比如我们设定一个width:500px的div,这时,如果相应的border,padding都是0,那么整个div加上里面的内容的宽度就是500px,但是如果border,padding都有值的话,整个盒模型就变成了这个样子:

这样下来,我们看到的这个div其实已经不是500px,他变成了500+50*2+10*2=620px。也许这种效果并不是我们想要的。
解决方法有两种:
    (1)第一种比较粗暴,直接使用数学的力量,500-50*2-10*2=380px,然后把蓝色块的宽度换成380px,是可以的,但这样终归有点麻烦(需要计算T_T)。
    (2)另外一种方法就是使用box-sizing属性。别的都不用动,只需要加上:box-sizing:border-box;   即可,盒模型自动调整为:

这样,就达到了我们想要的效果。


4. position属性

position也是布局中使用极其频繁的一个属性。它的值包括static(默认值)、relative(相对定位)、absolute(绝对定位)以及fixed(固定定位)。
(1)static
如果我们不对一个元素的position重新赋值的话,那么它的position值就是static。也不会有什么特殊效果。
(2)relative
如果我们对一个元素的position赋值为relative,但不对top,bottom,left,right赋值的话,在显示上就和static没啥区别。
如果设置了那四个值的话,它的新位置是相对于它原本的位置而言的。它的相对即相对的是它的position值为static是的位置来确定它的新位置。
并且需要注意的一点是,如果一个position为relative的元素后面还跟着别的元素(position为static的),那么这个元素的位置也不会因为relative元素的位置的改变有任何改变。
(3)fixed
固定定位,假设一个页面内容太多,页面太长,我们把页面翻到底部的时候如果想要使用导航栏,还需要把页面重新滚动到最上面,这种做法的用户体验是很差的。所以我们在一些视频网站很容易发现,当你把页面滚动到一定位置时,浏览器窗口的顶部会出现一个导航条,并且它一直在那个位置,不论你滚动到页面的那个部分(也许当你回到顶部就会消失,取而代之的是另一个)。
(4)absolute
绝对定位。绝对定位也有一个参照对象,给绝对定位设置top,left等属性值会参照一个参照对象的左上角顶点进行重新定位。
并且它原先的位置不会被保留,它会漂浮在其他元素的上层,如果有背景颜色会覆盖下层的元素。
 

5. 清除浮动
 
清除浮动是个大坑。之前在网上找过资料,比较好的总结是stackoverflow上的一个答案,链接如下:
 

6. 使用百分比宽度

这个东西可以和前面的min、max配合起来使用,这个百分比单位是相对于包含块的计量单位。也就是相对于包含它的元素的宽度而定。具体使用场景看需求。

7. 媒体查询

刚开始注意到媒体查询是在使用BootStrap框架的时候,媒体查询其实就是类似于一个if...else判断,满足不同的条件下执行不同的样式设置操作。

 @media screen and (min-width:600px){
/*当浏览器宽度大于600px时执行*/
...
}
@media screen and (max-width:500px){
/*当浏览器宽度小于500px时执行*/
...
}

8. inline-block

有时使用inline-block能达到和float一样的效果。还避免了清除浮动的操作

CSS布局方面的一些小总结的更多相关文章

  1. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  2. css布局小技巧 2016.03.06

    偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...

  3. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  4. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  5. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  6. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  7. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  8. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  9. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...

随机推荐

  1. DIV固定宽度和动态拉伸混合水平排列

    1.效果图 2.源代码 html <h2>1.头部固定,尾部拉伸</h2> <div class="container" id="div1& ...

  2. thrift简介

    thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...

  3. mockito測試框架

    1. code package com.springinaction.knights; import static org.mockito.Mockito.*; import org.junit.Te ...

  4. 理解JS表达式

    表达式:是由运算元和运算符(可选)构成,并产生运算结果的语法结构. 基本表达式 以下在ES5中被称为基本表达式(Primary Expression) this.null.arguments等内置的关 ...

  5. 关于Array的操作

    使用Array创建数组 // 使用Array 构造函数 var colors = new Array(); // 预先给数组项数量 var colors = new Array(20); // 向Ar ...

  6. 转:hive-列转行和行转列

    1. 假设我们在hive中有两张表,其中一张表是存用户基本信息,另一张表是存用户的地址信息等,表数据假设如下: user_basic_info: id name 1 a 2 b 3 c 4 d use ...

  7. .NET开源工作流RoadFlow-流程运行-管理员干预

    在流程运行过程中管理员可以干预流程实例的走向,如管理加强制退回,指派和删除流程实例操作.在 流程管理-->实例管理 中查找到相应的流程实例,点击管理按钮即可管理该流程实例: 点击指派按钮,选择要 ...

  8. #学习tips——写给自己的语录

    用编程证明自己的观点! "我以为我懂了?"-- 花1/3的时间去学去记,剩下的时间应用做记忆实战. 记录一个转变 2018.6.7 (英文字幕-->无字幕!)good job ...

  9. 【Python之搜索引擎】(一)概述

    learning goal--search engine 1.Find datas - crawl 2.Index 3.page rank String操作 提取网络中的链接 Extracting a ...

  10. margin的auto的理解 top,left[,bottom,right] position

    auto auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the ...