布局---前端学习第三part

一 文档流

二 盒子：

（1）边框宽框 颜色 样式

 

 （2）内边距

（3）外边距

（4）水平方向的布局：

 （5）垂直方向的布局

 （6）外边距的折叠

（7）行内元素的盒模型：

  （8）默认样式

（9）盒子的大小：

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

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

            可选值：

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

                border-box 来设置整个盒子可见框的大小（width height指内容区内边框边框总的大小）

（10）轮廓和阴影：

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

                    轮廓不影响可见框的大小

                box-shadow 阴影

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

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

                    第三个值：阴影的模糊半径

                    第四个值：颜色

                border-radius：圆角，圆的半径 水平 垂直

                    border-top-left-radius：

                    border-bottom-right-radius：  

                    border-radius：  

                        四个值：左上 右上 右下 左下

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

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

                设置圆形：

                    border-radius: 50%;​​​​​​​

 

三 浮动：

1、通过浮动可以使一个元素向其父元素的左或右移动 

可选值：

                    none 默认值，不浮动

                    left 向左

                    right 向右

特点：

                   （1）设置浮动后，会完全从文档流中脱离，不再占用文档流的位置

                    （2）元素向左侧或右侧移动

                    （3）浮动元素默认不会从父元素中移出

                    （4）元素设置浮动以后，水平布局的等式不需要强制成立

                    （5）浮动元素向左向右移动，不会超过它的其它浮动元素

                    （6）浮动元素不会超过它上面的浮动的兄弟元素，最多一样高

                    （7）浮动元素的上边是一个没有浮动的元素，则浮动元素无法上移

                总结：

                    让页面中的元素可水平排列，水平布局

                                

 （8）浮动元素不会盖住文字，文字自动环绕在浮动元素的周围

                元素设置浮动后，从文档流中脱离，元素的特点也会发生变化

                脱离文档流的特点：

                    块元素：

                        1.不会独占一行

                        2.宽度高度都会被内容撑开

                    行内元素：

                        与块元素变化后特点一样

                    脱离文档流后，块元素和行内元素无区别    

2、浮动缺点：

高度塌陷：

           在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，完全脱离文档流，

           无法撑起父元素的高度，导致父元素高度丢失，其下的元素自动上移，导致页面布局混乱，

            所以页面布局是浮动中常见问题，必须处理

3、BFC：

BFC(Block Formatting Content)块级模式化环境

                 是 CSS 中一个隐含的属性，可以为一个元素开启BFC，元素变成一个独立的布局区域

                    特点：

                        1.不会被浮动元素覆盖

                        2.子元素和父元素的外边距不会重叠

                        3.元素可以包含浮动的子元素

                    可以通过特殊方式开启 BFC：

                        1.设置元素浮动（不推荐）

                        2.设置行内块元素（不推荐）

                        3.将元素的 overflow 设置成一个非 visible (overflow:hidden)的值，使其包含浮动元素

4、clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过 clear 清除影响
        clear：
            清除浮动产生的影响
            left：清除左侧影响  right：清除右侧影响 both：清除两侧最大影响的那侧
        原理：设置清除浮动后，浏览器自动为元素添加一个上边框，使其位置不受其他元素影响 

5、高度塌陷的最佳解决方案

 

 最佳：

 四 定位（position）：

                    更高级的布局，通过定位可以将元素摆放到任意位置

                    可选值：

                        static：默认，没有开启定位

                        relative：相对定位

                        absolute：绝对定位

                        fixed：固定定位

                        sticky：粘滞定位

                偏移量（offset）：

                    元素开启定位后，可以通过偏移量设置元素的位置

                    垂直方向的位置由 top bottom决定 通常只使用一个

                    top：定位元素与定位位置上边的距离，越大越向下  bottom 下边

                    水平：left right

1.相对定位

                    特点：

                    1.如果不设置偏移量，元素不变

                    2.相对定位参考于元素在文档流中的位置进行定位

                    3.会提升元素的层级

                    4.不会脱离文档流

                    5.不会改变元素性质，块还是块，行内还是行内 

 2.绝对定位（absolute）：

                    特点：

                    1.如果不设置偏移量，元素的位置不变（其他有的变了）  

                    2.元素从文档流中脱离

                    3.改变元素性质  

                    4.使元素提升层级

                    5.相对于其包含块进行定位

                    包含块（containing block）：

                        正常：就是离当前元素最近的祖先块元素

                        开启绝对定位：离它最近的开启了定位的祖先元素，如果都没开，就相对于根元素

                        html（根元素、初始包含块）

当开启绝对定位后，

                    水平布局:left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

                        要加 left 和 right 两个值，规则与之前一样

                    当发生过渡约束后，如果九个值中没有 auto ，则自动调整 right，如果有 auto，调 auto

                    可设置 auto ：margin width left right

                    left right默认是 auto，如果不知道left right，等式不满足，会自动调整这两个值

                    垂直布局：

                        top+margin-top/bottom+padding-top/bottom+border-top/bottom+height-top/bottom

 

3.固定定位（fixed）：

                    也是一种绝对定位，大部分特点都与绝对定位一样

                    不同点：参考于浏览器的视口（固定不动）进行定位，不会随网页的滚动条滚动

4.粘滞定位（sticky）：

                    与相对定位相似

                    不同：在元素到达某一位置时，将其固定

 5.元素层级

对于开启了定位元素，可通过 z-index属性来指定元素的层级，

               z-index 需要一个整数作为参数，值越大元素层级越高，越优先显示

               如果层级一样，则优先显示靠下的元素

               祖先元素的层级再高，也不会盖住后代元素

 五 字体和背景：

1.字体

颜色：color

大小：font-size，相关单位：em（相对于当前元素），rem（相对于根元素）

字体族（格式）：font-family，指定字体的类别，浏览器会自动使用该类别下的字体，可以同时使用多个字体，逗号隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

        可选值：

        serif（衬线字体），sans-serif（非衬线字体），monospace（等宽字体）

        font-face：可以将服务器中的字体直接提供给用户去使用，font-family指定字体的名字，src服务器中字体的路径。问题：1.加载速度 2.版权

样式：

font 可以设置字体相关的所有属性

                    语法：

                    font：字体大小/行高  字体族 （行高可省略，不写使用默认值）

                    font-weight:字重 字体的加粗

                        可选：

                        normal 默认值，不加粗

                        bold 加粗

                        100-900 九个级别（没啥用）

                    font-style：字体风格

                         normal 正常

                         italic 斜体  

2.图标字体（iconfont）

图标，可以通过图片引入，但是图片本身大并且不灵活，所以使用图标时，直接将图标设置成字体，通过font-face的形式对字体进行引入，就可以通过字体的形式使用图标

(1)通过类名使用图标文字

class=“fas fa-bell”   class=“fab fa-accessible-icon”

优点：可以改大小颜色

(2)通过伪元素来设置图标字体：

        1.找到要设置图标的元素，通过before 或 after 

        2.在content中设置字体的编码

        3.设置字体的样式 font-family：

fab:

font-family：'Font Awesome 5 Brands'; 

fas

font-family：'Font Awesome 5 Free';

font-weight:900; 

(3)通过实体来使用图标字体

&#x图标的编码；

3.行高（line height）：

                    文字占有的实际高度

                    可以通过 line-height设置行高

                    可以直接指定一个大小（px em），也可以直接为行高设置一个整数，如果是一个整数，行高将会是字体指定的倍数，默认是1.33倍

                    还经常用来设置文字的行间距，行间距 = 行高 - 字体大小

                字体框：

                    字体存在的格子，设置 font-size 实际上就是在设置字体框的高度

                行高会在字体框的上下平均分配，可以将行高设置成和高度一样的值，使单行文字在一个元素中垂直居中

4.文本的水平和垂直对齐

 text-align 文本的水平对齐

                    可选值：

                    left左对齐  right右对齐  center居中对齐  justify两端对齐  

                vertical-align 设置元素垂直对齐的方式

                    可选值

                    baseline 默认 基线对齐

                    top 顶部对齐

                    bottom 底部对齐

                    middle 居中对齐

                    还可以直接指定值

 引入图片时，想要和边框对齐，用vertical-align

5.文本修饰

text-decoration(设置文本修饰):

                    可选值：

                    none 无

                    underline 下划线

                    line-through 删除线

white-space 设置网页如何处理空白

                    可选值：

                    normal 正常

                    nowrap 不换行

                    pre 保留空白

 6.背景

background-image设置背景图片

                    可以同时设置背景图片和背景颜色，背景颜色直接成为背景色

                    如果背景图片小于背景色，则背景图片会自动在背景中将元素铺满

                    大于，则图片无法完全显示

 background-repeat:设置图片的重复

                     repeat 默认值，背景沿着 x轴 y轴双方向重复  

                     repeat-x 沿 x轴方向重复

                     repeat-y 沿 y轴

                     no-repeat 不重复

background-position：设置图片的位置(九宫格)

                    设置方式：

                    方位词：通过 top left right bottom center 几个表示方位的词来设置

                        必须同时指定两个值，只写一个，第二个默认是 center

                    偏移量： 水平 垂直  

background-clip:设置背景范围

                    可选值：

                    border-box 默认值，背景会出现在边框下边

                    padding-box 背景不会出现在边框，只在内容区和内边距

                    content-box 只会出现在内容区

 background-origin：图片背景偏移量计算的原点  

                    可选值：

                    padding-box 默认值，background-position从内边距处开始计算

                    content-box 从内容区开始计算

                    border-box 从边框开始计算

background-size：设置背景图片的大小

                    第一个值表示宽度，第二个表示高度，如果只写一个，第二个默认 auto

                    cover 图片比例不变，将元素铺满

                    contain 图片比例不变，将图片完整显示

background-attachment:背景元素是否跟着元素移动

                    可选值：

                    scroll 默认值，跟随移动

                    fixed 背景图片固定在页面，不随元素移动

background:

                    背景相关的所有属性，所有样式都可以通过这个来设置，没有顺序要求，

                    但是 size要写在 position后面，并且使用/隔开，origin在前 clip在后

图片：

属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时按需加载。

解决图片闪烁问题，可以将多个小图片统一保存到一个大图片中，然后通过调整 background-position ，这样图片同时加载到网页中，可以有效避免闪烁问题。应用广泛，被称为 CSS-Sprite（雪碧图）

雪碧图的使用步骤：

（1）先确定要使用的图标 （2）确认图标大小 （3）根据图标大小创建一个元素 （4）将雪碧图设置成背景图片 （5）设置一个偏移量来显示正确的图片

特点：

一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验

渐变：

通过渐变，可以设置复杂的背景颜色，可以实现从一个颜色向其他颜色的过渡的效果，渐变是图片，需要通过 background-image 设置

线性渐变：

                linear-gradient()：颜色沿着一条直线变化

                    linear-gradient(red，yellow) 红色开头 黄色结尾 中间过渡

                    开头可以指定一个渐变的方向：to right，to left，to bottom, to top, xxxdeg(deg 表示度数)， 1turn表示一圈

                    可以同时指定多个颜色，默认平均分配，也可以手动指定分配情况

                可以平铺的线性渐变 repeating-linear-gradient()    

径向渐变 radial-gradient()：放射性效果

                    默认，径向渐变圆心的形状根据元素的形状来计算，正方形-->圆形，长方形-->椭圆形

                    可以手动指定径向渐变的大小 circle 正圆，ellipse 椭圆

                    可指定渐变的位置，radial-gradient(大小 at 位置，颜色 位置，颜色 位置，颜色 位置)

                        大小：circle 正圆，ellipse 椭圆，closet-side 近边，closet-corner 近角，farthest-side 远边，farthest-corner 远角

                        位置：top bottom left right center

六 表格表单 

1. 生活中需要表格来表示格式化数据，网页中也需要

        table 标签来创建一个表格，tr 表示一行，td 表示一格

        colspan 横向合并单元格 rowspan 纵向

2.长表格：可以将一个表格分为三个部分：

            头部：thead 主体：tbody 底部：tfoot

            th 表示头部的单元格

 3.边框

border-spacing 设置边框间的距离

            border-collapse 设置边框的合并

            如果表格中没有使用 tbody，直接使用 tr，浏览器会自动创建一个 tbody，并且将 tr 都放到 tbody中，

            tr不是 table的子元素

            默认情况下，元素在 td 中是垂直居中的，可以通过 vertical-align来修改

4.表单：

            现实用表单提交数据，网页表单用于将本地的数据提交给远程的服务器

            使用 form 标签创建表单

            属性：

                action 表单提交服务器的地址

                input 文本框，数据要提交到服务器中，必须为元素指定一个 name 属性值

                password 密码框

                radio 单选按钮，必须有一个相同的 name属性，像这种选择框，还必须指定一个 value 属性，最终作为用户填写的值传递给服务器

                    checked  将单选按钮设置为默认选中

                checkbox 多选框

                select 下拉列表，option

 普通按钮

       <input type="button" value="按钮">

 重置按钮，重置成默认值

       <input type="reset"><br><br>

  注重邮件的格式

       <input type="email"><br><br>

 autocomplete="off" 可以关闭自动补全

          readonly 将表单项设置为只读，数据会提交

          disabled 设置为禁用，不提交

          autofocus 设置表单项自动获取焦点，光标自动在设置的地方出现