1.padding

有小属性

  1.  padding-top: 30px;
  2.  padding-right: 30px;
  3.  padding-bottom: 30px;
  4.  padding-left: 30px;

小属性

综合属性

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          *{
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          .box{
  12.              width: 200px;
  13.              height: 200px;
  14.              background-color: red;
  15.              /*单独一个上下左右*/
  16.              /*padding: 10px;*/
  17.              /*单独两个 上下 左右*/
  18.              /*padding: 10px 20px;*/
  19.              /*单独三个上 左右 下*/
  20.              /*padding: 10px 20px 30px;*/
  21.              /*单独四个 顺时针上右下左*/
  22.              padding: 10px 20px 30px 40px;
  23.          }
  24.  
  25.      </style>
  26.  </head>
  27.  <body>
  28.  <div class="box">alex </div>
  29.  </body>
  30.  </html>

综合

2.border

线框与三个属性 颜色 大小 样式

border-left-color:red

border-left-style :solid

border-left-width:10px

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          *{
  8.              padding: 0;
  9.              margin: 0;
  10.  
  11.          }
  12.          .box{
  13.              width: 200px;
  14.              height: 200px;
  15.              background-color: red;
  16.  
  17.              /*width  style color*/
  18.              /*根据方向来设置*/
  19.              /*border-left: 5px solid green;
  20.              border-right: 1px dotted yellow;
  21.              border-top: 5px double purple;
  22.              border-bottom: 1px dashed purple;*/
  23.  
  24.              /*border-left-style: solid;
  25.              border-left-width: 1px;
  26.              border-left-color: green;*/
  27.  
  28.              border-width: 5px 10px;
  29.              border-color: green yellow;
  30.              border-style: solid double;
  31.  
  32.              /*border: 5px solid green*/
  33.  
  34.          }
  35.      </style>
  36.  </head>
  37.  <body>
  38.      <!-- padding是标准文档流，父子之间调整位置 -->
  39.      <div class="box">alex</div>
  40.  
  41.  </body>
  42.  </html>

border 三元素

3.margin

进行兄弟之间的分块

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .s1{
  8.              background-color: red;
  9.              margin-right: 30px;
  10.          }
  11.          .s2{
  12.              background-color:rgb(0,128,0);
  13.              margin-left: 30px;
  14.          }
  15.      </style>
  16.  </head>
  17.  <body>
  18.  <!--span 永远是1行-->
  19.      <span class="s1">alex</span>
  20.      <span class="s2">wusir</span>
  21.  
  22.  </body>
  23.  </html>

兄弟距离

4.margin 的坑

在两个方块进行移动的时候 在上下模块下 一个上 一个下 两个快之间的间距不是位移相加 而是最大的那段位移

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .s1{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.              margin-bottom: 40px;
  12.          }
  13.          .s2{
  14.              width: 200px;
  15.              height: 200px;
  16.              background-color:rgb(0,128,0);
  17.              margin-top: 100px;
  18.  
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <!--  -->
  24.      <div class="s1"></div>
  25.      <div class="s2"></div>
  26.  
  27.  </body>
  28.  </html>

margin 的坑

4.1 在父子模型下 移动子盒子模型父模型也会改变

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .s1{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.              margin-bottom: 40px;
  12.          }
  13.          .s2{
  14.              width: 200px;
  15.              height: 200px;
  16.              background-color:rgb(0,128,0);
  17.              margin-top: 100px;
  18.  
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <!--  -->
  24.      <div class="s1"></div>
  25.      <div class="s2"></div>
  26.  
  27.  </body>
  28.  </html>

margin 父子模型的 坑

5.display

display 显示  必须是在标准文档下 (没有 float)

属性:

display:block  块级标签 -独占一行 -可以设置宽高 不设置默认100%宽

  1. inline 行内标签
          - 在一行内显示
          - 不可以设置宽高，根据内容来显示宽高
    inline-block 行内块
          - 在一行内显示
          - 可以设置宽高
  2.  
  3. none  不显示 隐藏 不在文档上占位置
  4.  
  5.   visibility：hidden;隐藏 在文档上占位置
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          .box{
  8.              width: 100px;
  9.              height: 100px;
  10.              background-color: red;
  11.              /*display: inline;*/
  12.              display: inline;
  13.              border: 1px solid yellow;
  14.          }
  15.          div a {
  16.              display: block;
  17.              width: 300px;
  18.              height: 300px;
  19.          }
  20.          span{
  21.              display:inline-block;
  22.              width: 300px;
  23.              height: 200px;
  24.              background-color: yellow;
  25.  
  26.          }
  27.      </style>
  28.  </head>
  29.  <body>
  30.  
  31.      <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
  32.      <div class="box">wusir</div>
  33.  
  34.      <div>
  35.          <a href="#">
  36.              <img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
  37.          </a>
  38.      </div>
  39.  
  40.      <input type="text">
  41.      <span>aaaaa</span>
  42.      <span>aaaaa</span>
  43.  
  44.  </body>
  45.  </html>

display 详细代码

6.浮动

关于浮动  优点是可以使块级标签在一行内显示

缺点是:没有高度的限制下 会重叠在一起 需要控制

盒子浮动:不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面会出现混乱

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.      *{
  8.          padding: 0;
  9.          margin: 0;
  10.      }
  11.      .father{
  12.          width: 500px;
  13.          /*height: 400px;*/
  14.  
  15.          height: 300px;
  16.      }
  17.      .box1{
  18.          width: 100px;
  19.          height: 100px;
  20.          background-color:red;
  21.          float: left;
  22.      }
  23.      .box2{
  24.          width: 100px;
  25.          height: 300px;
  26.          background-color:green;
  27.          float: left;
  28.      }
  29.      .box3{
  30.          width: 100px;
  31.          height: 100px;
  32.          background-color:blue;
  33.          float: left;
  34.      }
  35.      .father2{
  36.          width: 600px;
  37.          height: 200px;
  38.          background-color: yellow;
  39.      }
  40.      </style>
  41.  </head>
  42.  <body>
  43.      <div class="father">
  44.          <div class="box1">1</div>
  45.          <div class="box2">2</div>
  46.          <div class="box3">3</div>
  47.  
  48.      </div>
  49.  
  50.      <div class="father2"></div>
  51.  
  52.  </body>
  53.  </html>

浮动错误示例

如果父类不设置高度,则会不断撑大,会造成页面混乱

7.解决浮动方法

  1. 清除浮动：
       1.给父盒子设置固定高度（后期不好维护）
       2.clear:both;
          给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
          给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both
  2.  
  3.       问题：代码冗余
       3.   .clearfix:after {
             content: ".";
             display: block;
             height: 0;
             visibility: hidden;
             clear: both
          }
       4.overflow:hidden;
  4.  
  5. 要浮动一起浮动，有浮动，清除浮动
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.      *{
  8.          padding: 0;
  9.          margin: 0;
  10.      }
  11.      .father{
  12.          width: 500px;
  13.          /*height: 400px;*/
  14.  
  15.      }
  16.      .box1{
  17.          width: 100px;
  18.          height: 100px;
  19.          background-color:red;
  20.          float: left;
  21.      }
  22.      .box2{
  23.          width: 100px;
  24.          height: 500px;
  25.          background-color:green;
  26.          float: left;
  27.      }
  28.      .box3{
  29.          width: 100px;
  30.          height: 100px;
  31.          background-color:blue;
  32.          float: left;
  33.      }
  34.      .father2{
  35.          width: 600px;
  36.          height: 200px;
  37.          background-color: yellow;
  38.      }
  39.      /*这里是将clear：both 重新将浮点固定*/
  40.      .clearfix{
  41.          clear:both;
  42.      }
  43.      </style>
  44.  </head>
  45.  <body>
  46.  
  47.          <div class="father">
  48.              <div class="box1">1</div>
  49.              <div class="box2">2</div>
  50.              <div class="box3">3</div>
  51.              <!-- 内墙法 -->
  52.              <div class="clearfix"></div>
  53.  
  54.          </div>
  55.  
  56.      <div class="father2"></div>
  57.  
  58.  </body>
  59.  </html>

伪元素清除法

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.      *{
  8.          padding: 0;
  9.          margin: 0;
  10.      }
  11.      .clearfix:after{
  12.          content: '.';
  13.          clear:both;
  14.          display: block;
  15.          visibility: hidden;
  16.          height: 0;
  17.  
  18.      }
  19.      .father{
  20.          width: 500px;
  21.  
  22.          /*overflow: hidden;*/
  23.          /*height: 400px;*/
  24.          /*height: 300px;*/
  25.      }
  26.      /*.clearfix{*/
  27.          /*clear:both*/
  28.      /*}*/
  29.  
  30.      .box1{
  31.          width: 100px;
  32.          height: 100px;
  33.          background-color:red;
  34.          float: left;
  35.      }
  36.      .box2{
  37.          width: 100px;
  38.          height: 50px;
  39.          background-color:green;
  40.          float: left;
  41.      }
  42.      .box3{
  43.          width: 100px;
  44.          height: 100px;
  45.          background-color:blue;
  46.          float: left;
  47.      }
  48.      .father2{
  49.          width: 600px;
  50.          height: 200px;
  51.          background-color: yellow;
  52.      }
  53.      </style>
  54.  </head>
  55.  <body>
  56.      <div class="father clearfix" >
  57.          <div class="box1">1</div>
  58.          <div class="box2">2</div>
  59.          <div class="box3">3</div>
  60.  
  61.      </div>
  62.      <!--需要加入一个class类-->
  63.      <!--<div class="clearfix"> </div>-->
  64.  
  65.      <div class="father2"></div>
  66.  </body>
  67.  </html>

伪元素清除法

  1.  
  1.  

css 盒子下的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  3. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  4. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  5. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  6. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  7. CSS盒子的浮动

    web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...

  8. css盒子模型（3）

    盒子模型 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/      在讲理论之前,我们先要知道网页设计中常听的属性名:内容(co ...

  9. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

随机推荐

  1. 蓝桥杯dfs搜索专题

    2018激光样式 #include<bits/stdc++.h> using namespace std; /* dfs(i) 第i个激光机器 有两种选择:vis[i-1] == 0 时 ...

  2. C# WF 第12节 Timer控件

    本节内容: 1:Timer控件的简介 2:实例1  : 不停的弹出,恶意exe 3:实例2: :流水灯 4:实例3:给流水灯加上计时器和在规定的时间进行播放音乐 1:Timer控件的简介 2:实例1 ...

  3. Mybatis介绍（一）

    MyBatis本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .201 ...

  4. Paper | U-Net: Convolutional Networks for Biomedical Image Segmentation

    目录 故事背景 U-Net 具体结构 损失 数据扩充 发表在2015 MICCAI.原本是一篇医学图像分割的论文,但由于U-Net杰出的网络设计,得到了8k+的引用. 摘要 There is larg ...

  5. SQL 错误: ORA-65096: 公用用户名或角色名无效 65096. 00000 - "invalid common user or role name" *Cause: An attempt was made to create a common user or role with a name

    在Oracle SQL Developer中,试图创建RD用户时,出现了如下的错误: 在行: 上开始执行命令时出错 - 错误报告 - SQL 错误: ORA: 公用用户名或角色名无效 . - &quo ...

  6. fiddler 抓取winform wcf包

    修改客户端配置 <system.net> <defaultProxy> <proxy bypassonlocal="false" usesystemd ...

  7. 《一起学mysql》5

    基准函数   用于评估不同机器之间的性能差别   MariaDB [jason]> select benchmark(10000000,md5('test')); +-------------- ...

  8. 使用 jQuery.TypeAhead 让文本框自动完成 （一）（最简单的用法）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  9. linq 获取不重复数据，重复数据 var unique = arr.GroupBy(o => o).Where(g => g.Count() == 1) .Select(g => g.ElementAt(0));

    static void Main(string[] args) { int[] arr = { 1, 3, 3, 3, 3, 4, 5, 4, 5, 8, 9, 3 }; //不重复 var uniq ...

  10. abstract,virtual,override个人

    1.abstract 可以修饰类和方法,修饰方法时只声明不实现: 2.继承实现abstract类必须通过override实现abstract声明的方法,而virtual方法可选择override(重写 ...