# Web20190510

**Repository Path**: GUOSD/Web20190510

## Basic Information

- **Project Name**: Web20190510
- **Description**: box
- **Primary Language**: HTML/CSS
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web20190510

#### 介绍
box

#### 软件架构
软件架构说明


#### 安装教程

1. box模型
       1.1 box模型
           box模型就是html元素在浏览器中解析显示时所构成模型；
           box模型以html元素的内容为中心由以下几部分构成：
               由中心向四周分别是：（平面的box模型）
                   内容区域、padding内边距、border边线、margin外边距；
               解析：
                   浏览器解析html元素时，每个元素都会包含这几部分，可以显示也可不显示；
                   
                   注意平面的box模型中，不同的浏览器对于html元素的width和heigh的定义不同；
                   在w3c的标准下：
                   html元素的width属性就是内容部分的width；
                   height就是内部部分的height；
                   那么，
                   整个盒子模型的宽是： margin*2 + border*2 + padding*2 + width（严格来说是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）
                   整个盒子模型的高是： margin*2 + border*2 + padding*2 + height（严格来说是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）
                   
                   两个html元素之间的margin部分可以产生重叠，但是二者之间的margin的最小值是二者的margin的最大值；
                   
               由里往外box模型构成部分分别是：（立体的box模型）
                   margin外边距；
                   background-color背景颜色；
                   background-img背景图片；
                   content内容和padding内边距；（二者在一个层次水平上）
                   border边线；     
                          
               box模型的作用：
                   平面的盒子模型可以控制html元素对象与元素对象之间的相对位置和决定位置；
                   平面的盒子模型可以调整html元素之间的位置关系；
                   平面的盒子模型在进行浏览器调试时，可以查找或确定html元素的样式属性之间的影响关系；
                   
                   立体的box模型可以在进行页面渲染时进行层次的调整；
                   类似于绘画的调色板，调整每个层次之间的显示渲染关系；
       1.2 margin和padding属性的赋值方式
           
           综合赋值；
           margin: top-value right-value bottom-value left-value;
           margin后面的值可以是1到4个；
           如果只有1个赋值，则上、右、下、左都是用这个值；
           如果是2 、 3 、4 个值，则依次从  上、右、下、左开始分配值，没有分配到的边使用对边的值；          
  
 2.浮动与清除
 
     2.1 浮动
         在html页面对元素进行位置布局时，可以不通过位置坐标确定元素的位置，而是通过元素的浮动特性进行自动的排列分布；
         排列方式是按照文档流的方式进行依次排列；类似于word文档中的文字对齐方式；
         文档流浮动的方式有两种：
             left：左对齐；流向文档对象的右边；
             right：右对齐；流向文档对象的左边；
             
     2.2 文档元素的分类
         元素根据display属性的不同的取值可以分为：块元素、行内元素、行内块元素等；（这是最常用的三种，还有none）
         
         块元素，display取值为 block，块状元素特征：
             (1)能够识别宽高；        
             (2)margin和padding的上下左右均对其有效；
             (3)可以自动换行；
             (4)多个块状元素标签写在一起，默认排列方式为从上至下，每个块元素的开头和结尾都有一个换行符，也就是独占一行；
         常见的块元素标签对象：
             div，p、nav、aside、header、footer、section、article、ul-li、address等等
         
         行内元素， display取值为 inline，行内元素特征：  
             (1)设置宽高无效，大小由内容或者内部元素的大小决定
             (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
             (3)不会自动进行换行，不会独占一行，默认采用左浮动的方式进行布局；
         常见的行内元素标签对象：
             span，<b>和<i>标签，还有<sub>和<sup>等等；
             
         行内块状元素，display取值为 inline-block ，行内块元素的特点：
             (1)不自动换行；
             (2)能够识别宽高
             (3)默认排列方式为从左到右
             
             注意，行内块元素除了不自动换行之外，具有块元素的所有的特定，使用频率最高；
             
         常见的行内块元素标签对象：
             一般是通过修改 display属性为inline-block来实现；
             
         注意：
             这三种常用的元素分为只是默认情况下的分类，此外可以通过修改 display属性设置元素的特点；
             也就是通过修改display属性可以将行内元素变为块元素，也可以将块元素变为行内元素；
     
     2.3 div+css布局
         根据div作为块域元素的特定以及块元素的浮动特性，可以使用div结合div元素的浮动特性进行布局；
         
         使用div进行布局的原则：
             使用div划分范围；
             使用css进行定位；
             
             尽可能多的使用div进行进行范围划分；
     
     2.4 元素居中
         margin:xpx auto;  
         auto是将左右的margin留白进行平局分配，也就是居中；
     2.5 !important的使用
         使用!important 可以提升css样式的优先级；提升权重；
         不建议使用，慎用；因为会打破浏览器对于不同选择器的默认的优先级顺序；
                         
#### 使用说明

1. xxxx
2. xxxx
3. xxxx

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)