2018-09-19 Day23 CSS布局

一、标准流

标准流：浏览器对标签默认的布局方式就是标准流。
标准流布局原则：

• 块级标签：
  a、块级标签一个占一行（不管标签的宽度是否是浏览器宽度）
  b、默认宽度是父标签的宽度，默认高度是内容的高度。
  c、直接设置宽高有效

• 行内标签：
  a、多个行内标签可以一行显示。
  b、默认宽高是内容的宽高。
  c、直接设置宽高无效。

• 行内块标签：
  a、多个行内块标签可以在一行显示。
  b、默认宽高是内容的宽高。
  c、直接设置宽高有效。

display属性：转换标签的性质
block：块级
inline：行内
inline-block：行内块

注意：行内块和其他标签之间默认会有个间隙，而且无法消除，所以一般不建议使用。

二、浮动 -- float

通过给float属性赋值为 left 或者 right 来让标签浮动。浮动会让标签脱流，脱流后原来的标准流布局方式不适用了。
float:left; 按照浏览器的左上角为起点。
float:right按照浏览器的右上角为起点。

浮动的目的：让竖着显示的可以横着来（针对块）

浮动的效果：
一行可以显示多个；默认的宽高是内容的大小；可以设置宽度和高度

注意事项：
a、如果同一级的标签，后面的需要浮动，前面的也需要浮动，否则可能会出现一些显示问题。
b、浮动的标签不占位置，不浮动的占位置。

利用浮动产生文字环绕效果
结论：被环绕的标签浮动，文字对应的标签不浮动。

清除浮动：不是将标签的浮动给去掉，而是清除因为浮动而产生的高度塌陷的问题。

高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

高度塌陷产生原因：父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷问题。

解决方案：
1、在后面添加一个div空盒子，设置样式为clear：both

<div id="" style="clear: both;">
</div>

2、给父标签添加样式，设置overflow的值为hidden。

3、万能清除法

            #father:after{
                display: block;
                clear: both;
                content: '';
                visibility: hidden;
                height: 0;
                
            }
            #father{
                zoom: 1;
            }

三、定位

CSS中可以通过left，right，bottom，top属性来设置标签上下左右的距离。但是要通过position属性设置参考对象。

absolute：相对第一个非static/initial(默认值)父标签进行定位。

relative：相对于自己在标准流中的位置来定位。（当标签本身不希望去定位，只是想让自己的子标签可以相对自己定位时使用。）

fixed：相对于浏览器定位。（滚动时位置相对于浏览器不变）

sticky：当网页的内容不超过一屏（不滚动），按照标准流定位；超过一屏就相对浏览器定位。

initial：默认值，没有相对定位。

技巧：当遇到某个方向的定位无效时，可以尝试让标签浮动然后定位。

四、盒子模型

html中所有可见的标签都是一个盒子模型：包括长和宽决定的content、padding、border、margin。
其中content、padding、border是可见的，margin是不可见的。

1、content（内容）：设置width 和height影响的就是内容部分的大小。添加子标签、内容都是放在内容部分的。

2、padding（内边距）：内容外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容一致。

padding-left: 20px;
padding:10px; /*所有*/
padding:10px 20px; /*上下和作业*/
padding:10px 20px 30px 40px; /*顺时针*/

3、border（边框）：border在padding的外围，如果没有padding，就在内容的外围，可以设置颜色。
border:宽度 风格 颜色
样式：solid（实线）、dashde（虚线）、dotted（点划线）double（双线）

4、margin（外边距）：不可见。主要用来占位。

五、其他常用属性

1、字体相关属性

• 字体颜色：color
• 字体大小：font-size
• 字体名：font-family
• 字体加粗：font-weight：bolder（更粗的）、bold（加粗）、normal（常规）、100-900
• 字体倾斜：font-style：italic、oblique、normal

2、文本修饰 -- text-decoration
none：取消修饰
underline：下划线
overline：上划线
line-through：删除线

3、对齐方式
text-align：left、right、center（文字水平方向居中）

margin：0px auto;（水平居中）
一行内容在垂直方向居中，可以通过将line-height的值设置为父标签的height值。（垂直居中）

height:40px;
line-height:40px;

4、首行缩进 -- text-indent
text-indent:2em
em代表一个空格的长度

5、字间距 -- letter-spacing
letter-spacing:2em

6、背景图片
格式：babackground-image:图片地址、是否平铺 x方向坐标 y方向的坐标 颜色
no-repeat/repeat/repeat-x/repeat-y(不平铺、平铺、x方向平铺、y方向平铺)

background-image: url(img/beauty.png) no-repeat center center yellow; center表示在水平或者垂直方向居中。
默认图片不够时，背景图片会平铺。

7、设置圆角

border-radius: 20px;
border-bottom-left-radius: 20px;

六、补充

制作网页首页title图标

一般写网页前一定要先将标签默认的margin值和padding值关闭。

*{ 
  margin:0;
  padding:0;
  position:relative;
}

实现元素居中
CSS中垂直居中的11种方式
CSS中元素6种水平居中