Day06

本文主要是介绍Day06，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、背景
  1、背景颜色
         background-color 颜色色值   

  2、背景图片
   （1）background-image:url(路径)
   （2）路径的引入可以是绝对路径也可以是相对路径：外部css的路径
   （3）背景图必须要求元素具有宽高

   3、背景图和img的区别

      尺寸和角度

     img当中要具有自己的尺寸，不设置宽高，可以直接显示图片

     背景图必须设置宽度和高度 

    增加内容角度

     img 图片上不可以直接写文字，除非在 img 盒子外部定位

    背景图是可以在图片上写文字的，背景图其实和颜色一样

    功能角度

     img 一般用于产品展示，可以根据素材更新

    背景图一般左大背景或者更新小图标 icon

    4、背景图的平铺
    background-repeat: 默认值 横向纵向都
    background-repeat:no-repeat;  不平铺
    background-repeat:repeat-x;   x 轴平铺
    background-repeat:repeat-y;   y 轴平铺

4. 背景图定位

    background-position   可以改变背景图的默认的位置，默认位置在元素的左上角。

    调整背景图在元素中的位置，有 2 个方向：x 轴方向和 y 轴方向。

     background-position:x轴 y轴 两个方向

      background-position-x 单独定义 x 轴

     background-position-y 单独定义 y 轴

     background-position 取值

     可以使用长度单位，如：px、pt、em、%等

    关键字：top、bottom、center、right、left

    取值可以为正值和负值，正值向右移动负值向左移动

5. 背景图尺寸

   background-size`属性来控制背景图片的大小.在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值`background-size:x轴拉伸 y轴拉伸; 

   取值

   取 1 个值，这个值指定图片的宽度，图片的高度隐式的为 auto

    cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；

   contain:容器内至少有一张完整的图，no-repeat 情况下容器会有留白区域。    repeat 情况下留白区域则平铺背景图

6. 背景的简写方式

   background:color image repeat position;`简写属性，四组值用空格分开,没有顺序

    background 简写中不包括`background-size`，`size`需要单独写

    background 最简写法可以是 background：color 或者 background：url，其他不可以

    简写的弊端：简写的方式会覆盖上边定义好的

二、元素的特有样式
1。列表的样式
 List-style 属性是用来简写对列表的样式
List-style ：none 用来去掉列表的标点
List-style -type 列表的标记
List-style -image 设置列表表示为小图片
List-style -position:outside/inside
2.表单的样式
Outline 属性
Input 标签默认会有轮廓线
Outline:sidth style color
3.表格样式
Table的样式
Border-collapse:collapse:去掉边框之间的缝隙
Border-spacing:10px保证每个单元格之间要有一定的距离，前提是不能有上面的属性
Td:rowspan colspan
Td: vertical-align
三、溢出
1.溢出属性
  Overflow:hidden:溢出隐藏
  Overflow:scroll   默认在x轴和y轴方向出现滚动条，但子元素不超过父元素也会出现滚动条
  Overflow:auto   只有溢出的方向出现拖动条
  Overflow:visible   溢出默认展示

   单独设定 x 轴或者 y 轴的溢出

   overflow-x: auto;

   overflow-y: hidden;

   如果 overflow-x、overflow-y 的值相同，则等同于 overflow 设置了这个值。

   overflow-x：hidden；那么 overflow-y 就会被重置为 auto。

四、盒子模型
1.盒子尺寸
每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
一个元素实际占地宽度：

  左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
2. 元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

3. 内边距

 (1) 内边距的属性

   padding 指盒子的“内补间”，宽高之外到边框以内的距离。

   可以设置长度，如 px、em、rem 等,且不支持负值

   padding 有四个方向分别是上、右、下、左

   padding-top 上内边距

    padding-right 右内边距

    padding-bottom 下内边距

    padding-left 左内边距
Tips:内边距常用于调整元素自身的距离

4.外边距

外边距的使用场合：元素的位置微调，元素之间的距离调整

(1) 外边距的属性

  margin 指盒子的外边距，外边距是当前元素和其他兄弟元素之间的距离。

  可以设置长度，如 px、em、rem，%等,%取值都是父元素宽度的百分比取值。

  正值时是增大该方向外边距，负值时是缩小该方向外边距。

  margin 有四个方向分别是上、右、下、左

   margin-top 上外边距

  margin-right 右外边距

    margin-bottom 下外边距

   margin-left 左外边距

(2) margin 的无效情形

    1.外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。
    2.margin是设置同级元素间的间隔，并不是设置它在父元素中的位置。

    （3）margin 的 auto 取值
     margin 有一个特殊的取值是 auto，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中！！！
   1.块级元素在父元素中水平居中 margin:上下距离 auto;

   2. 上下距离在没有的时候可以写 0

   3. 内联素使用 margin：auto，不能完成居中效果

    （4）自带外边距的元素
一定要做样式重置
（5）外边距的合并现象
兄弟元素之间外边合并
两个在文档流中兄弟之间外边距同时存在的时候，则大取大
（6）外边距的溢出
   外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。

解决方案

    父元素增加padding-top缺点：增加了父元素实际高度

    增加父元素的边框，缺点：增加了父元素实际高度

    父元素增加overflow: hidden/auto;，缺点，父元素就不能溢出显示内容了
 
    使用空<table></table>放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

    使用 CSS3 伪元素::before`给父元素添加内容,源于增加空<table></table>
              .father::before {
    content: "";
    display: table;
               }

   (7)不同元素的盒子模型
    1.  内联元素盒模型

    内联元素的宽高是 auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

    宽度高度是 auto，靠内容撑开

    设置宽度高度无效

    设置上下内外边距无效

    排列方式，从左至右
2. 块级元素盒模型

  块级元素就可以设置宽度和高度，

  只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。

  宽度高度可以设置

  内外边距设置均有效果

  排列方式，从上至下

 (8)盒子模型的计算方式

     box-sizing: content-box;  标准盒子模型

    元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

    元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

    box-sizing:border-box  改变盒子模型计算方式

   设置的宽度 width = 左右 border + 左右 padding + 内容的宽度

   设置的高度 height = 上下 border + 上下 padding + 内容的高度

   注意：可能会导致内容溢出，需要谨慎使用

五、流

1. 默认文档流

  流就是文档布局的自身特性,而定位机制可以打破原有流的特性

  默认文档流,画格子,内联和块级

    1.内联元素，从左向右排列

    2. 块级元素，从上向下排列

2. 脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属性会导致元素脱离文档流：float 浮动position 定位

2. 浮动

- 子元素在父元素中浮动，会使其脱离文档流，

导致父元素对其的管理能力

- 浮动属性

    float：none`默认不浮动

    float：left 整体左浮动

    float：right 整体右浮动

    （1）过程
   脱离文档流不再撑起父元素
   不再自占一行
   在元素浮动的“当前行”向左或向右对齐

   （2）特点
1.元素浮动后对父级的高度有影响，不再撑起父级的高度
2.元素浮动后可以在父元素的左侧或右侧排列
3.元素浮动后不自占一行
4.元素浮动后会对后面的文档流中的兄弟元素产生影响会遮盖其后面的兄弟元素
5.内联元素浮动后，自动变成块级元素
6.浮动元素仍受父元素影响，还是在父元素的范围内
7.当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行
8.当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域
9.当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素和行内块）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素四周显示。解决方案包裹文字的元素浮动在前一个元素侧面。

3. 清除浮动

  清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

 浮动会造成父元素无高度

  父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

（1）利用高度解决

给父元素高度，弊端是未必知道子元素的高度

（2）父元素也浮动

父元素浮动，会影响父元素的兄弟元素

（3）父元素溢出隐藏

overflow：hidden/auto，父元素中的子元素可能会被隐藏（利用BFC 块级格式化上下文中，使用该属性可保证浮动元素也可以被计算入父级的高度）
（4）增加一个clear: both;的子元素
      clear: both;清除两侧浮动

（5）用伪元和clear属性素解决

给父元素增加一个在尾部的伪元素

clear：:after {
    content: "";
    display: block;
    clear: both
          }

这篇关于Day06的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！