CSS初体验2

css中元素分类

块状元素：

div、ul、ol、p、h、table、form
特点：独占一行
可以设置宽高、如果不设置宽度、默认是父标签的100%宽度

行内元素：

a、span、em、strong、label
特点：在一行内显示
不能设置宽高、默认的宽高为文本内容占据的宽高

行内块元素：

input、img
特点：在一行内显示
可以设置宽高

display

1、块级元素：display：block；
2、切换成行内元素：display：inline；
3、切换成行内块元素：display：inline-block；
4、隐藏：display: none;

盒子

盒子model：(块元素都具有盒子特性)

内填充 padding：内容到盒子边缘的距离

内边距上 下 左 右：padding-top/padding-bottom/padding-left/padding-right
设置两个值 padding: 20px 40px; ——上下为20px，左右为40px
设置三个值 padding: 20px 30px 40px;——上 左右 下
设置四个值 padding: 10px 20px 30px 40px;——上 右 下 左

外边距 margin：两个盒子的距离

margin:0 auto;——使用该方式保持水平居中
margin-left: 50px;
margin-top: 50px;
margin垂直方向上有塌陷：一个30px 一个100px;实际距离100px

外边框 border

属性：solid（实线） dotted（点点线） double（双线） dashed（虚线）
边框三要素：粗细（width）样式（style）颜色(color)
border: 1px dashed red;
例如：border-width:4px;
border-top-width:10px;

对于input边框一般要清除默认设置
border：none；（默认边框）
outline：none（高亮状态）
然后再设置样式：/使用padding-left使文本框内光标初始往右移动/
padding-left: 10px;

浮动

浮动的属性：none（默认不浮动），left，right，inherit（继承父元素）

清除浮动方式

1、固定父元素高度

缺点：不灵活，不易维护
应用：网页中固定高度区域，比如固定的导航栏

2、内墙法

在最后一个浮动元素的后面加一个空的块级元素`<div class="clear"></div>`，并且设置该属性.

clear{
	clear: both;
} 

缺点：结构冗余

3、伪元素（选择器）清除

.clearfix::after{
	content: "";
	display: block;
	clear: both;
}

4、overflow：hidden；

overflow: visible;——默认属性：超出部分可见
overflow: hidden;——超出部分隐藏
overflow: scroll/auto;——	超出部分形成滚动
overflow: inherit;——继承父级

清除浮动：overflow: hidden;
BFC（Block Formtting Context）区域的一个规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算BFC区域形成BFC的条件：除了overf:vistable的属性值

注意：哪些元素产生BFC？
1、根元素（HTML元素）
2、float元素不为none；
3、position为absolute或fixed
4、display为inline-block
5、overflow不为visible

定位

默认：static 静态定位

1、相对定位 position：relative

特点： 1、不脱离标准文档流
参考点：以自己本身原来的位置为参考点

	position: relative;
 	top: 50px;
	left: 50px;

2、绝对定位 position：absolute

特点： 1、脱离标准文档流，不在页面上占位置
2、层级提高 有压盖现象
参考点：相对于最近的非静态祖先元素，如果没有非静态的祖先元素 就以左上角为参考点（如果要是想依靠父级为参考点，就把父级设置为非静态定位）

 	position: absolute;
	top: 20px;

3、固定定位 position：fixed

特点： 1、脱离标准文档流
2、一旦设定固定定位，在网页中滚动页面，位置固定不变
参考点：以页面的左上角为参考点

  	position: fixed;
	top: 80px;
	left: 30px;

注意：浮动和定位对行内元素的影响
1、对行内元素进行浮动等于把行内元素转化成块元素
2、绝对定位、固定定位脱离标准文档流可以设置宽高

z-index（只能运用于定位元素上）

默认取值：auto
z-index取值（正整数）越大，等级越高
1、平铺方式 不平铺
background-repeat: no-repeat;/
2、在x方向上平铺
background-repeat:repeat-x;
3、可以使一张较大的图片水平格式显示
background-image: url(“E:/sublime/images/miui.jpg”);
background-repeat: no-repeat;
background-position: center top;

背景定位

x方向y方向
background-position: 50px 100px;
x方向定位
background-position-x: 50px;

关键字

属性：top right bottom left center
background-position: top center;上面中间
center left（中间的左边）
bottom left (左下)

百分比

0% 50% 100% 左 中 右
水平百分比=容器宽度的百分比-背景宽度百分比
background-position: 30% 60%;

制作边框

制作边框半圆角(水平方向、竖直方向)
border-top-left-radius: 15px 30px;
border-bottom-left-radius: 15px;
设置边框为一个圆
border-radius: 74px/50%;—宽度的一半或者50%；
制作圆环----加边框；
制作半圆----左上角、右上角为半圆角，高度为宽的一半；

边框阴影box shadow

属性：水平偏移方向 竖直偏移方向 阴影的模糊程度 阴影的颜色
外设：box-shadow: 20px 20px 25px red;
内设：box-shadow: 20px 20px 25px red inset;

行内元素水平居中

方式一

text-align: center;
line-height: 200px;（大小等于height）

方式二

/*改变成单元格形式*/
display: table-cell;
text-align: center;
/*三个属性：top、middle、bottom*/
vertical-align: middle;

块级元素水平居中

方法一：通过定位position+margin

position: absolute;
margin:auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

方法二：通过display table-cell

通过将父级改变成单元格

  display: table-cell;
  vertical-align: middle;（默认属性）
  text-align: center;

子级改变成行内块

display: inline-block;

方法三 ：纯定位

position: absolute;
top: 50px;
left: 50px;

或者

position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;