css布局

# CSS浮动

一、浮动前提

1-1 什么是文档流？

文档流：
	就是文档按照一定的流程来进行排列；
流程：	
	自上而下	【块级元素】
	从左往右	【行内元素】

1-2、为什么要浮动

因为它可以让块状元素在一行内显示，并且元素之间无间隙
注：display:inline-block也可以使块状元素在同一行内显示，但是元素之间有间隙存在。

二、浮动基础

2-1、浮动的基本语法

语法：
	选择器{float:属性值;}
	none	不浮动，默认
	left	左浮动
	right	右浮动

三、浮动特点

3-1、脱离文档流

	在没有脱离文档流之前，body中的所有写的代码都在文档流中，都是从上到下，从左到右的顺序。
	1)	设置浮动了的盒子，那么该盒子就脱离了文档流，在文档流的上面；
	2）	脱离文档流的盒子只会影响它后面的盒子，不会影响它前面的盒子；
	3）脱离文档流又叫脱离标准流（脱标）；

3-2、行内顶部对齐

3-3、父元素的宽度装不下浮动的子元素时会换行，而不是溢出；

3-4、浮动的盒子间无缝隙

3-5、会引起高度塌陷问题

浮动会脱离文档流
父元素在文档流 没有任何高度，之所以之前有高度只因为子盒子撑开的；
因为子元素脱离了文档流，导致没有高度，所以我们把这种情况叫高度塌陷。

3-6、外边距合并问题

浮动的盒子的上下左右外边距都是合并【相加】的；
正常的盒子上下外边距重叠【以属性值大的为准】，盒子的左右外边距会合并【相加】；

3-7、边界问题

左浮动的盒子不会超出父元素的左边界；
右浮动的盒子不会超过父元素的右边界；
所有浮动的盒子都不会超过父盒子的上边界；

3-8、顺序问题

文档中前面一个元素向左浮动，那么后面这个浮动的元素的左边界会紧挨前面这个浮动元素的右外边界；
文档中前面的一个元素向右浮动，后面这个浮动的元素的右外边界会紧挨着前面这个元素的左外边界；

3-9、不规则浮动

新起一行的元素的上边界不能超过它前面左浮动元素的下边界；
新起一行的元素它的上边界可以超过它前面右浮动的下边界；

3-10、父子浮动解决父元素的高度塌陷问题

			.box{
                width: 200px;
                /* 方法1  不推荐 因为不知道将来盒子中有多少数据 所以给定高就不合适 */
                /* height: 500px; */
                /* 方法2 */
                float: left;
                border: 1px solid red;
            }
            .box > div{
                float: left;
                width: 100px;
                height: 100px;
                background-color: aquamarine;
            }

3-11、行内元素的浮动

	如果给行内元素设置浮动的话，那么此时的行内元素就具有行内块元素的特性，此时给它设置宽高就会有效果。

3-12、浮动顶边

浮动的元素不会比它顶边高

四、浮动的影响

4-1、对后面元素的影响

浮动元素对它前面的元素没有任何影响，对后面的元素有影响。

4-2、对父元素的影响

子元素浮动会引起父元素高度塌陷

4-3、对父元素的兄弟元素的影响

例如：文字环绕

五、清除浮动

1）给父元素指定高度；
2）给父元素设置浮动；
3）用overfole属性;
4) 给父元素的最后添加一个空标签，并为其设置clear清除浮动；
5) 伪元素设置浮动【强烈推荐】
	:clearfix:after{
		content='';
		display='block';
		clear:both;
	}

css 定位

一、定位的组成

1）定位的基本格式：
	  定位：模式:边偏移量；	
2）定位的模式：
	  -> static:	
	  	静态定位 也就是定位的默认值，表示的是没有开启定位元素会按照正常的位置显示；此时的top	bottom	left	right四个定位的属性也不会被应用；
	  -> relative:
	  	相对定位	可以使用top bottom left right这四个值
	  -> absolute
	  	绝对定位	可以使用top	bottom	left	right这四个值；
	  -> fixed
	  	 固定定位	可以使用top	bottom	left	right这四个值，就是固定在页面不动的那个值；
	  -> sticky
	  	粘性定位	相当于relative和fixed的结合体；
 3）边偏移量属性
 	  -> top		顶部偏移；
 	  -> right		右便宜；
 	  -> bottom		底部偏移；
 	  -> left		左偏移；
	  

二、定位模式

2-1、静态定位 static

静态定位 position的默认值 没有开启定位，使用静态定位的时候元素会按照正常的位置显示，并不会受到top bottom  left  right等属性的影响
	特点：静态定位按照文档流的位置进行摆放，她没有偏移量

2-2 相对定位 relative

1）无论有没有标签，都是相对于元素自己的默认位置进行定位；
	同时使用left和right		left生效
	同时使用top和bottom		top生效
2) 不会脱离文档流 也不会对其他的元素产生影响，原来的位置依然在文档流中存在；
	top不会撑大原来的占位；
	可以和外边距一起使用，但不建议，因为外边距会影响原来的占位；
	也可以浮动但不允许写浮动；

2-3 绝对定位 absolute

相对于第一个非静态定位的父级元素进行定位；如果找不到符合条件的父级元素，就相对于初始包含块【浏览器的第一屏（它比body要小，比html更小）】进行定位；
脱离文档流【不占位】；
同时使用left 和 right的话 left生效，同时使用top 和 bottom的话	top生效；
实际企业开发中一般都使用子绝父相；

2-4 固定定位 fixed

脱离文档流【比占位】；
参照的是浏览器的可视化窗口  视口
同时使用left right的话	left生效
同时使用top bottom的话	top生效
跟父元素无关
不随着滚动条而滚动
ie8以下称为低级浏览器，ie6以下浏览器不支持固定定位；

2-5 粘性定位 sticky

粘性定位相当于相对定位和固定定位的结合；

三、定位的边偏移量

top	right	bottom	left	

四、定位的特殊情况

4-1、特殊情况1-层级

元素的显示层级会受到父元素显示层级的影响；

4-2、特殊情况2-定位元素的默认宽度

1) 小盒子和大盒子没有定位，小盒子的宽度默认是通过大盒子的宽度来计算的。
2） 小盒子有相对定位，大盒子没有定位，那么小盒子的宽度默认是通过大盒子的宽度来计算的
3） 小盒子是绝对定位，那么小盒子是通过内容来计算的。
4） 小盒子是绝对定位，并且想把大盒子左右撑满left 0,right 0
5)  小盒子是绝对定位，并且想把大盒子上下撑满top 0，bottom 0;
6)  left 0, right 0, top 0, bottom 0不能和宽高同时使用   宽高生效
7） 固定定位的效果和绝对定位的效果一样；

4-3、特殊情况3-元素的水平/垂直居中

1) 行内块元素的水平垂直居中对齐
	水平居中对齐		在其父元素上设置text-align:center
    垂直居中对齐		在其父元素上设置line-height
2)  块状元素的水平垂直居中对齐
	方案一：子绝父相，左顶各50%，margin-top/margin-left各一半，
	方案二：子绝父相，上右下左各为0，margin四边为auto

z-index属性

所有的定位元素都有z-index属性  默认情况下：z-index  auto
z-index的值 可以是正数也可以是负数和0，很多时候 都说默认值是0，但是底层实际是auto,值越大盒子越靠上。

css书写规范

1、CSS 书写的几点建议

• 去掉小数点前面的 0，0.5em →.5em` 。
• 颜色用小写，用缩写，如：#fff 。
• 不要随意使用Id，Id在JS是唯一的，不能多次使用，而使用 class 类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
• 0 不用加单位。
• 尽量缩写，margin: 5px 10px 5px 10px; → margin: 5px 10px; 。

2、CSS 属性书写顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

• Positioning 定位相关属性
• Box model 盒子模型相关属性
• Typography 文字字体相关属性
• Visual 视觉效果相关属性（背景等）

由于定位（Positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（Box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

3、Class 命名规则

• 推荐使用小写字母。
• class 名称应当尽可能短，并且意义明确，使用有意义的名称的名称。
• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• 允许多个单词组成类型，推荐 kebab-case 命名方式（短横线分隔符），如 btn-danger、col-md-hidden。
• 基于最近的父元素或基本 class 作为新 class 的前缀，如news-title

4、常见的命名

4.1、常见命名1

名称	用途
.wrap 或 .wrapper	用于外侧包裹
.container 或 .ct	包裹容器
.header	用于头部
.body	页面 body
.footer	页面尾部
.aside、.sidebar	用于侧边栏
.content	用于主要内容
.navigation	导航元素
.pagination	分页

4.2、常见命名 2

名称	用途
.tabs	tab 切换、选项卡
.breadcrumbs	导航列表、面包屑
.dropdown	下拉菜单
.article	文章
.main	用于主体
.thumbnail	头像、小图像
.media	媒体资源
.panel	面板
.tooltip	鼠标放置上去的提示
.popup	鼠标点击弹出的提示

4.3、常见命名 3

名称	用途
.button、.btn	按钮
.ad	广告
.subnav	二级导航
.menu	菜单
.tag	标签
.message 或者 .notice	提示消息
.summary	摘要
.logo	logo
.search	搜索框
.login	登录

4.4、常见命名 4

名称	用途
.register	注册
.username	用户名
.password	密码
.banner	广告条
.copyright	版权
.modal 或者 .dialog	弹窗

4.5、ID 命名规则

• ID 名称应当尽可能短，并且意义明确，使用有意义的名称的名称。
• ID 名称可以由多个单词组成，推荐 camelCase （小驼峰）命名法，如 #pageHeader。
• ID 不随意使用，一般页面中明确唯一的地方可以使用 ID 选择器，比如页头、页脚等。im