2018-09-19CSS布局

recode

1.HTML常用标签
form 标签
input标签
textarea标签
select标签
标签分类：块级、行内
2.css基础
内联：写在标签的，只针对某一个
内部：写在head中
外部：写在css文件中
内联的优先级最高
选择器{属性：属性值；属性：属性值；...}
选择器：选择标签
元素选择器、id选择器、class选择器、群组选择器、包含选择器、*通配符
伪类选择器（link、visited、hover、active、focus）

01-标准流和display属性

css中可以通过left、right、bottom、top属性来设置标签到上下左右的距离（但是默认情况下这些值不是都有效的）
想要让定位属性有效，必须通过position属性来设置参考对象。

1.position
inital:默认值,没有相对定位
absolute：相对第一个不是static父标签进行定位
relative:相对于自己在标准流中位置来定位（当标签本身不希望去定位，只是想要自己的子标签相对于自己来定位）
fixed：相对于浏览器来定位
sticky:当浏览器的内容超过一屏的时候，作用相当于fixed；没超过一屏（不滚动）的时候，就按照标准流定位
2.注意：如果想要设置right值时，相对标签的宽度要确定；设置bottom值，高度要确定
3.技巧：当遇到某个方向定位都是无效的时候，就可以先添加浮动，再定位

02-浮动

1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动。浮动会让标签脱流
浮动的目的就是竖着显示的可以横着来（针对块）
2.浮动效果：
a.所有的标签浮动后，一行可以显示多个；默认的宽高是内容的大小；可以设置宽高
b.一行显示不了的时候才会自动换行
3.注意事项：
a.如果同一级的标签后边的需要浮动，前面的也要浮动，否则可能会出现现实的问题
b.不浮动的标签占位置，浮动的标签不占位置（两个标签只有一个浮动，一个没有浮动）；如果两个都浮动，有位置就占位置，没有，位置就不变

03-浮动和文字环绕

文字环绕：
被环绕的标签浮动，文字对应的标签不浮动，就会出现环绕效果

04-清除浮动

**清除浮动：清除浮动不是将标签的浮动给去掉，而是清除因浮动产生的高度塌陷的问题
**高度塌陷：父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷的问题（父标签）
解决方案：

1.添加空盒子，在高度塌陷的标签（父标签）的最后添加一个空的div，并设置样式clear的值为both
2.给父标签添加样式设置overflow的值为hidden
3.万能法，选中标签：after{display：block；clean：both；content：""；visibility：hidden；height：0}再一次选中标签{zoom：1}

05-定位

1.position
inital:默认值,没有相对定位
absolute：相对第一个不是static父标签进行定位
relative:相对于自己在标准流中位置来定位（当标签本身不希望去定位，只是想要自己的子标签相对于自己来定位）
fixed：相对于浏览器来定位
sticky:当浏览器的内容超过一屏的时候，作用相当于fixed；没超过一屏（不滚动）的时候，就按照标准流定位
2.注意：如果想要设置right值时，相对标签的宽度要确定；设置bottom值，高度要确定
3.技巧：当遇到某个方向定位都是无效的时候，就可以先添加浮动，再定位

06-盒子模型

html中所有可见的标签都是一个盒子模型：包括长和宽决定的内容大小、padding、border、margin四个部分组成。
其中内容、padding、border是可见的，margin不可见

1.内容：设置width和height影响的就是内容部分的大小。添加子标签、添加内容都是放在内容部分的
2.padding:在内容的外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容一样
3.border:边框，border是在paddding的外围，如果没有padding就在内容的外围，可见部分，可以设置颜色和大小

07-其他属性

/*1.字体相关的属性
             *字体的颜色：color
             *字体大小：font-size
             *字体加粗：font-weight（bolder(更粗)、bold（加粗）、normal（常规））
             *字体倾斜：font-style（italic/oblique/normal )
             *对齐方式：text-align：left、right、center
             *垂直方向居中，只针对一行文字：line-height属性的值与高度设置一样
             *文本修饰：text-decoration（none、underline、overline、line-through）
             *首行缩进：text-indent（单位em）
             *字间距：letter-spacing（像素px/空格em/百分比%）
             *背景图片：background-image（url（）no-repeat（是否平铺）x方向的坐标 y方向的坐标 背景颜色）
             *设置圆角：border-radius