CSS的布局

一、盒子模型（重点）

        css会把所有的html元素都看作盒子

        盒子组成部分：

影响盒子大小的不是外边距（margin），是边框、内边距、内容物（border  padding  content）

内边距

           内边距（padding）：内容区域到边框的距离，也叫留白

设置内边距：

     padding-top：20px；----上边框的内边距

     padding-left：20px；----左边框的内边距

                            -----------还有right / bottom属性值

内边距默认影响盒子的大小，相当于加到了盒子的宽高上

复合属性：

      padding：20px；-------四边都是20px

      padding：10px 50px；------两个值时，第一个代表上下的padding值，第二个代表左右的padding值。

      padding：10px 20px 30px;-------如果三个值，第一个是上，第二个是左右，第三个是下

      padding：10px 20px 30px;---------如果四个值，代表上、下、左、右

给行内元素加内边距：

               如果给span（行内元素）加padding：

Span{

      padding-left: 20px;

          }-------仍然可以设置，整个盒子总大小变大

注意：行内元素的左右padding可以设置，上下padding不行

避免padding将盒子撑大：

        加一个box-sizing：border-box；-------解决padding影响盒子大小-------内容物区域被影响变小了，整个盒子大小不变

外边距

            -------------外边距不改变盒子大小

               外边距margin：两个元素之间的距离

设置外边距：

box1{

    margin-left:20px;

    margin-right:20px;

}

        -------还有top / bottom属性值。

 margin四个值时代表：上、右、下、左，的外边距；

auto--------尽可能离远；

margin： auto；-------尽可能离远四边的外边距---------实现元素的水平居中，左右居中

外边距塌陷：

    父盒子里第一个子盒子的margin-top值会被父盒子抢掉

解决办法：

1、给父元素加边框：border：1px solid black；

2、给父元素加内边距：padding：10px ；

3、偏方，防文本溢出：overflow：hidd  ；

二、flex布局（重点）

    网页布局：表格-----不灵活

    flex-----使盒子变成弹性容器，使里面的元素变成项目

设置flex

        div--------块元素不能连着显示，

        在父级元素里加：display：flex；----------使父级变成弹性容器-------实现一行显示多个块元素

        块元素里，不止在div中，a中也可以

主侧轴：

    默认情况下：上面横着排列是主轴，左边竖着排列是侧轴。是相对的，可以改变

改变主侧轴——flex-direction：

     flex-direction：row-revers；-------------沿行翻转

     flex-direction：column-revers；--------沿列翻转

     flex-direction：column；     -------------相对翻转（对角交换）

改变主轴单行对齐方式（父元素中的各个子元素） justity-content：

    justity-content：space-between；-----两边贴边，中间平分剩余空间

    justity-content：space-around；--------平分在子项两边

    justity-content：space-evenly；---------均匀排列

    justity-content：center；    ---------------居中对齐

侧轴对齐——aligin-content：

align-content：center；

align-content：space-around；

align-content：space-evenly；

align-content：space-between；    

                        -------与主轴用法一样

改变侧轴单行：

     align-items：center-----居中，----不允许换行，子元素可能会被挤压

允许换行：flex-wrap：wrap；

     flex：20px；------占剩余空间的多少

排序：

    order：值越小，排列越靠前，未设置时默认为0，可以负值：order：-1；

、去除标签默认外边距

默认外边距：

      Body默认有8px的外边距

            去除默认外边距：margin：0；

无序列表默认：{

                        margin：16px；

                        padding：40px；}

       去除则内外边距值取0

用通配符选择器：

*{

margin：0；

padding：0；

}   -------用通配符去除所有默认样式

三、字体

使用的是存在的字体

添加字体——font-family：

@font-face{

       font-family：gouxin；

       src：url（./）；

}                 ----------@font-face指添加定义的字体

                  ----------gouxin指自定义的字体名字

使用字体：

div{

     font-family：gouxin；

}

四、渐变

颜色渐变——background-image：

div{

    background-image：linear-gradient（to right，red，pink，black）；-----------连续渐变，to+方向，后面加颜色

    background-image：repeating-linear-gradient（45deg，red，pink）---------重复线性渐变

background-image：radial-gradient（red，pink，blue）---------镜像渐变（环形）

  }

五、CSS的继承性

                例如：  给父元素设置颜色，子元素也能继承到整个颜色

属性分可继承性和不可继承性：

      1、会继承的属性：字体属性、文本属性（ver……除外）、文字颜色……

      2、不会继承的属性：边框、背景、内外边框、宽高……

六、浮动

文字环绕

最早用来：文字环绕图片

img {

       float：left；

} ------向左浮动，图片在左边，文字从图片右边包围

浮动后的元素脱离文档流--------文档流是文档中可显示对象在排列时所占用的位置

元素浮动特点：

1、脱离文档流；

2、无论元素类型，只要浮动，就按浮动的规则来：默认宽高都是被内容撑开的（尽可能小），而且可以设置宽高

3、和其他元素公用一行（一个在上面飘着，一个沉在下面）

4、不存在外边距塌陷

5、没有行内块元素的空白问题

也可以达到使块元素一行排列的效果（按浮动的顺序）

元素浮动后的影响：

1、对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素。

2、对兄弟元素的影响：后面的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟元素没有影响。

解决影响办法：

1、 clear：left/right/both--------清除浮动影响，接近完美的解决办法-------消除左浮动的影响，不能为行内元素，自身不能浮动

2、额外标签法：

p{

   clear：both；

}  ------清除浮动，在父元素里不被浮动的元素影响

七、盒子阴影

通过：

box-shadow：10px 10px 10px；-----第一个是水平偏移阴影（x轴的偏移量）、第二个代表y轴的偏移量、第三个代表模糊半径。

默认外阴影

内阴影设置：

box-shadow：inset 10px 10px 10px；

文字阴影：

P {

  text-shadow：10px 10px 2px；

 }

八、多列显示

把一段文字分为竖着几部分从左到右显示

P {

  column-count：3；-------划分的列数，以几列形式显示

  column-gap：30px；-------列与列之间的间距

}

媒体查询

视觉宽度screen，视觉窗口大于小于多少的时候是什么样式，更大于的时候又是什么样式

只能设置颜色字体大小等，不能设置宽高