一. 关于 box model
来源W3School的截图
1. CSS主要分为：block and inline boxes
2. block、inline 和inline-block 的区别
block——块级元素及其特点
常用块级元素： <div>、<ul>、<ol>、<li>、<p>、<hr>、<h1-h6>、<form>、<table>、<header>、<auodio>、<footer>
1. 一个块级元素独占一行，对width、height、padding、margin、border属性值生效
2. 如果不给宽度，则将其默认为container(浏览器)的宽度，100%填充
inline——行内元素的特点
常用行内元素：<a>——锚点 、<b>、<span>、<button>、<strong>、<textarea>、<select>、<label> 、<em>、<i>
1. 可跟其他元素在同一行上，对width、height、padding、margin、border属性值不生效
2. 完全依靠内容撑开宽、高
inline-block——行内块元素的特点
常用行内块元素：<img>、<input >
1. 顾名思义，行内块元素结合了块级元素和行内元素的特点，既可以让 width、height、 padding、margin、border 属性值生效，也可以让其与其他元素都在同一行上
二. 关于浮动
1. 多列浮动布局
1. 两列布局
body 内容
<h1> This is about float</h1>
<div>
<h2>First colum</h2>
<p>这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分这个是的一部分</p>
</div>
<div><h2>First colum</h2><p>这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分这个是第二部分</p></div>
css内容
body{
width:90%; max-width:1000px;
margin:0 auto;(为了居中展示)
}
div:nth-of-type(1){ width:48%; float:left;}
div:nth-of-type(2){ width:48; float:right;}
多列浮动也是类似的方法。宽度采用百分比模式会更好地适应浏览器。
2. float 特点——被设置了float 的元素会脱离文档流
3.. 清除浮动
1. clear（不建议使用）
clear:left——停止左浮动
clear:right——停止右浮动
clear:both——停止左右浮动
2. 为父元素添加overflow:hidden——这样父元素就有高度了 ，父元素的高度便不会被破坏；
3. clearfix（常用）前端面试题-clearfix（清除浮动） - 前端の进行时 - SegmentFault 思否
更多请查看 CSS布局(四) float详解 - 柴小智 - 博客园
三. 关于position (定位)
position 属性
1. position: static(静态定位)
2. position: relative（相对定位——相对定位的作用方式，需要考虑一个看不见的力，把box推向你所定位的相反方向。例如： 指定 top:30px;则box向下移动30px）
3. position: absolute（绝对定位——绝对定位的元素不再存在于正常文档布局流中，它独立在自己的层中。可以通过z-index来设置它们的堆叠顺序（z-index值较大的元素将叠加在z-index值较小的元素之上） 。例如，弹出的信息框和控制菜单；翻转面板……）
4. position: fixed（固定定位——与绝对定位的工作方式完全相同，有一个主要区别：绝对定位固定元素是相对于<html>元素或与其最近的定位父元素，而固定定位固定元素是相对于浏览器本身。例如创建的固定UI项目：持久导航菜单。）
5. position：stickey (比较新的一个值，基本是相对定位和固定定位的结合。它的一种常用法：创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。)
网友评论