2021-04-26

前端HTML5-04

1、盒子模型-内边距

内边距(padding)

                -内容区和边框之间的距离是内边距

                -一共有四个方向的内边距

                padding-top

                padding-right

                padding-bottom

                padding-left

                

padding-top: 100px;
            padding-left: 100px;
            padding-right: 100px;
            padding-bottom: 100px;

                -内边距的设置会印象到盒子的大小

                -背景颜色会延伸到内边距上

 

                一共盒子的可见框的大小，由内容区 内边框 和边框共同决定，

                所以在计算盒子的大小时，需要将这三个区域和到一起计算

                padding内边距的简写属性，可以同时指定四个方向的内边距规则和border-width一样

2、盒子模型-外边距

外边距(margin)

                -外边距不会影响盒子可见框的大小

                -但是外边距会影响盒子的位置

                -一共有四个方向的外边框

                margin-top

                    -上外边距，设置一个正值，元素会向下移动

                margin-right

                    -默认情况下设置margin-right不会产生任何效果

                margin-bottom

                    -下外边距，设置一个正值，其下边的元素会向下移动

                margin-left

                    -左外边距，设置一个正值，元素会向右移动

margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px;

                -margin也可以设置负值，如果是负值则元素会向相反的方向移动

 

                    -元素在页面中是按照自左向右的顺序排列的

                    所以默认情况下如果我们设置的左和上外边距则会移动元素自身

                    而设置下和右外边距会移动其他元素

 

                    margin的简写属性：

                    margin可以同时设置四个方向的外边框，用法和padding一样

 

                    -margin会影响到盒子实际占用空间

3、盒子的水平布局

元素的水平方向的布局：

            元素在其父元素中水平方向的位置由以下几个属性共同决定

            margin-left

            border-left

            padding-left

            width

            padding-right

            border-right

            margin-right

 

            一个元素在其父元素中，水平布局必须要满足以下的等式：

            margin-left+border+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度(必须满足)

 

            0+0+0+200+0+0+0=800等式不成立

            以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

            -调整的情况：

                -如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以等式情况

4、垂直方向的布局

默认情况下父元素的高度被内容区撑开

子元素是在父元素的内容区内排列的，如果子元素的高度超过父元素的高度，子元素就会从父元素中溢出。

使用 overflow 属性来处理溢出的子元素

 

overflow 属性值

　　visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示。

　　hidden：隐藏，溢出的内容会被裁剪不会出现。

　　scroll：滚动，生成两个滚动条，通过滚动条来查看完整的内容

　　auto：自动，根据需要自动生成滚动条。

 

 

overflow-x: 指定是否要剪辑的左/右边缘的内容

overflow-y：指定是否要剪辑顶部/底部边缘的内容

属性值：

　　visible：可见，不剪裁内容，可能会显示在内容框之外

　　hidden：剪裁内容，不滚动

　　scroll：剪裁内容，有滚动条

　　auto：自动

　　no-display：不显示，如果内容不适合内容框，则删除整个框。

　　no-content：如果内容不适合内容框，则隐藏整个内容。

 

overflow-wrap：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

(是按照空格来区分每个单词）

属性值：

normal：默认值，表示在正常单词结尾处换行

break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

 

overflow-block：溢出阻止功能被指定为

属性值：

none：不显示使程序段轴溢出的内容

scroll：滚动，拖动滚动轴可以看到溢出的内容

optional-paged：通过滚动块轴可以看到溢出的内容，但是可以手动触发分页符，使得以下内容现实在下一页上。

paged：内容被拆分为多个页面，在下一页上显示在块轴上溢出一页的内容。

 

overflow-anchor：溢出锚点CSS属性提供了一种退出浏览器滚动锚定行为的行为的方式，该行为会调整滚动位置以最大程度减少内容的偏移。

属性值：

auto：自动，调整滚动位置时，该元素将成为潜在的锚点。

none：该元素将不会被选作为潜在的锚点。

5、外边距的折叠

垂直外边距的重叠（折叠）

           相邻的垂直方向外边距会发生重叠现象

           兄弟元素

               -兄弟元素间的相邻垂直外边距会取两者之间的较大值

                特殊情况：

                    如果相邻的外边距一正一负，则取两者的和

                    如果相邻的外边距都是负值，则取两者中绝对值较大的

 

                -兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理   

           父子元素

                -父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

                -父子外边距的折叠会影响到页面的布局，必须要进行处理

6、行内元素的盒模型

-行内元素不支持设置宽度和高度

             -行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

             -行内元素可以设置border，垂直方向的border不会影响页面的布局

             -行内元素可以设置margin，垂直方向的margin不会影响布局

    display

用来设置元素显示的类型

            可选值：

                inline将元素设置为行内元素

                block将元素设置为块元素

                inline-block:将元素设置为行内块元素

                    行内块，就可以设置宽度和高度又不会独占一行

                table 将元素设置为一个表格

                none元素不会在页面中显示

 

    visibility

用来设置元素的显示状态

                可选值：

                    visible默认值，元素在页面中正常显示

                    hidden元素在页面中隐藏不显示，但是依然占据页面的位置

7、浏览器的默认样式

默认样式

            -通常显示，浏览器都会为元素设置一些样式

            -默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式

去除项目符号

 body{
            margin: 0;
        }
        p{
            margin: 0;
        }
        ul{
            margin: 0;
            padding: 0;

list-style: none;
margin-left: 20px;

8、盒子的大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定

 

            box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

            可选值：

                content-box默认值，宽度和高度用来设置内容区的大小

                border-box 宽度和高度用来设置整个盒子可见框的大小

                 width和height指的是内容区和内边框和边框的总大小

.box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 100px;
            border: 10px red solid;

9、轮廓阴影和圆角

      轮廓

outline 用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

      阴影

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动

第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动

第三个值 阴影的模糊半径

第四个值 阴影的颜色

.box1{
            width: 200px;
            height: 200px;
            background-color: crimson;
          
            box-shadow: 10px 0px 50px rgba(0, 0, 0, .3);

        }

    圆角

border-radius: 用来设置圆角 圆角设置的圆的半径大小

border-top-left-radius:

border-top-right-radius

border-bottom-left-radius:

border-bottom-right-radius:

border-radius 可以分别指定四个角的圆角

            四个值 左上 右上 右下 左下

            三个值 左上 右上/左下 右下

            两个个值 左上/右下 右上/左下