1.盒子模型=网页布局的基石,由四部分组成:

  边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)

2.设置顺序是顺时针:上、右、下、左。

  三个值(上、左右、下)

  两个值(上下、左右)

  一个值(上下左右)

3.盒子的层次模型(由上到下)

  边框(border)、盒子中的内容(content)+内边距(padding)、背景图像(background-image)、背景颜色(background-color)、外边距(margin)

  盒子模型的尺寸=边框(border)+外边距(margin)+内边距(padding)+盒子中的内容(content)

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平偏移量   horizontal

v-shadow:垂直偏移量   vertical

blur:虚化程度

border-radius: 1-4 length|% / 1-4 length|%;

1个参数:4个角
2个参数:左上 右下 // 左下 右上
3个参数:左上// 左下右上 // 右下
4个参数: 各个圆角

DIV盒子介绍的更多相关文章

  1. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  2. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  3. div盒子垂直水平居中

    div盒子,水平垂直居中. <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...

  4. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  5. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  6. html 中 div 盒子并排展示

    在项目中,遇到一个前端问题,觉得小问题就别去找前端工程师解决了,还是自己动动手吧. 相信不管小问题,大问题 都应该先自己尝试解决,google .度娘查查资料,这绝对是增加理解和记忆的好机会. ##问 ...

  7. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  8. day23—JavaScript实现DIV盒子拖拽(原生方式)

    转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...

  9. div盒子或者图片并排居中

    要使div总是找不到原因居中很简单,float和display都可以实现,float就不说了,这里说一下display:line-block,比如四个或者多个div盒子,明明设置好了宽度后,总有一个上 ...

随机推荐

  1. Appium之启用手机桌面APP的多种方法

    方法一: 其实之前的随笔 Appium之连续启动多个应用(APP)中已经介绍了可以用appium下的start_activity()方法来启动一个应用,那这里就不再说明啦. 方法二: 因为有时用sta ...

  2. Template Method Design Pattern in Java

    Template Method is a behavioral design pattern and it’s used to create a method stub and deferring s ...

  3. 初级 Web 开发人员的 Tomcat

    介绍使用 Tomcat 对 JavaServer Pages (JSP).servlet 和 Web 服务进行编程,Tomcat 是来自 Apache Foundation 的开源应用服务器.本教程引 ...

  4. EBS11i - 常用Profile

      Profile Name 说明 设置建议 FND: Enable Cancel Query 当执行一个超长时间的查询时,会出现一个 Cancel窗口,允许用户取消.比如我们在SO 界面没有输入条件 ...

  5. Oracle 程序中超好用的日志记录TYPE,可以直接Copy使用

    创建类型名称:LOGGER_FACTORY Type 说明: CREATE OR REPLACE TYPE "LOGGER_FACTORY" AS OBJECT( v_progra ...

  6. [Oracle]Oracle数据库CPU利用率很高解决方案

    Oracle数据库经常会遇到CPU利用率很高的情况,这种时候大都是数据库中存在着严重性能低下的SQL语句,这种SQL语句大大的消耗了CPU资源,导致整个系统性能低下.当然,引起严重性能低下的SQL语句 ...

  7. C#Encoding

    1.Encoding (1).如何生成一个Encoding即一种编码 Encoding位于System.Text命名空间下,是一个抽象类,它的派生类如下图: 要实例化一个Encoding一共有以下两种 ...

  8. FasterRunner在Centos7.6服务器部署

    前言: 测试工作,就是要保障软件产品质量,如何保障软件产品质量,是一个博大精深的问题.功能测试,性能测试,接口测试,安全测试等.而在现实的项目过程中,软件版本的快速迭代,给测试的时间会越来越少.特别是 ...

  9. JavaWeb -cookie&session&application

    cookie&session&application总结 Cookie[key-value](不是内置对象必须new): 1. Cookie 是由服务端生成的,在发送给客户端保存 2. ...

  10. “全栈2019”Java异常第八章:throw关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...