css基本布局
1. 盒子
针对于块元素来说(比如div,ul,li,h1等)
基本属性:
外边距 margin(当前盒子与其他元素的距离)
margin-top
margin-right
margin-bottom
margin-left
基本用法:(margin:0 auto能让块级元素在父元素中居中显示)
margin:10px; 上右下左
margin:0 10px; 上下，左右
margin:0 10px 5px; 上 左右 下
margin:0 10px 5px 20px; 上 右 下 左
边框 border
盒子边框(border:1px solid #ccc;)分为以下三个
border-color(也可分为上下左右边框)
border-width(边框宽度)
border-style(边框样式)
内边距 padding(属性与margin相似)内边框距离内容的距离
padding:0 10px 5px;
盒子计算方式
1)box-sizing: border-box (边框盒子,border为边框宽度)
width = 2*border + 2*padding + 内容宽度
height = 2*border + 2*padding + 内容高度
2)box-sizing: content-box(内容盒子)
width = 内容宽度
height = 内容高度
2. 布局 :一般通过块元素进行布局，但是块元素的特点是独占一行空间，通过特殊的机制使得多个块元素能够在一行中显示
1) 行布局(利用块元素的特点来进行布局)一个块元素独占一行空间
<body>
<div class="header">
<ul>
<li></li>
</ul>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
2) 浮动布局(float:left使此元素下的子块级元素统一像左浮动)如果给块元素加，块元素的宽度就不再占据整个屏幕，而是由内容决定
<div class="list">
<div></div>
<div></div>
<div></div>
</div>
如果list的子元素都浮动，那么他们会排列在一行，如果当前行放不下，会自动换行
元素浮动后的特点：
1. 脱离文档流，原来的位置会被其他元素占据
2. 宽度默认由内容决定
3. 在同一父元素中的多个浮动元素会在一行中排布，如果放不下会自动换行
4. 元素浮动后不再对父元素起到支撑作用
1) 左右布局（方式一）
左侧元素浮动，右侧元素添加margin-left
左右元素不再同一个文档流中，不会相互挤压
2) 左右布局（方式二）
左侧元素浮动，右侧元素也浮动
商品列表
3) 定位布局
position:static;【默认】
如果position的取值为以下值之一
relative,absolute,fixed
那么当前元素就为【定位元素】，定位元素可以使用top/bottom/right/left属性来进行定位
1) 相对定位(position:relative;
相对点：相对于当前元素所在位置
特点：原来所在位置不会被其他元素占据。在变成相对定位的时候该元素的宽高还是符合块元素的特点，不脱离文档流
应用: 为其他子元素提供相对点
2) 绝对定位(position:absolute;
相对点：相对于距离它最近的父定位元素;如果父元素没有定位元素那么就相对于浏览器视口
特点：脱离文档流，不占据元素原先所在的空间。与float类似，如果脱离了文档流，宽度由内容决定
应用：二级菜单
3) 固定定位(position:fixed;
相对点：相对于浏览器视口
特点：脱离文档流，不占据元素原先所在的空间。与float类似，如果脱离了文档流，宽度由内容决定
应用:联系客服对话框
4). 粘性定位（position:sticky)超过一定的值为相对定位
相对定位与固定定位的一种结合
4) 伸缩盒布局(webapp)父元素【容器】
display:flex;
flex-direction:row;(方向:行或者列)
flex-wrap:nowrap;(是否换行)
子元素
flex-basis: 300px; 基准
flex-grow: 1; 剩余空间分配
flex-shrink: 1; 剩余空间垫付
flex: 1 1 300px;
flex: flex-grow flex-shrink flex-basis;
flex: 1;(只配置了flex-grow属性)
5) 栅格系统(Bootstrap 12栅格系统)
1. 下载
2. 引入
<link rel="stylesheet" href="">
