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. Ansible 笔记 (1) - 安装和配置

    本文参考 <Ansible 自动化运维和最佳实践>,这两天刚读这本书,写写总结.主控机环境是 centos 7,被控机均是 centos 6.8 . 确保 python 版本大于 2.6 ...

  2. 移动lob类型索引到指定表空间

    WWWNEWSAD 为表名 USERS 为原表空间 CONTENT 为lob类型的字段 DATA_INDEX_WXZJ 指定的表空间 ALTER TABLE WWWNEWSAD MOVE TABLES ...

  3. PHP(十)字符串

  4. javascript 区分对象类型

    在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种.对于数组. ...

  5. [转]快速入门系列--WebAPI--01基础

    本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...

  6. Linux服务器使用XShell上传下载文件

    在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2:输入rz命令,看是否已经安装了lrzsz,如 ...

  7. Media change : please insert the disk labeled

    在Debian中使用apt-get安装软件包时经常会提示让你插入netinst的光盘: Media change: please insert the disc labeled 当没有时就无法进行安装 ...

  8. Django-DRF-视图的演变

    版本一(基于类视图APIView类) views.py: APIView是继承的Django View视图的. from .serializers import UserSerializers #导入 ...

  9. ubuntu下apache2使用的简单总结

        一. 修改apache2原80端口为90端口 1. 修改/etc/apache2/ports.conf, 将端口80改为90,443,改为444 2. 修改/etc/apache2/sites ...

  10. Error:(1, 1) 错误: 需要class, interface或enum

    这个东西在Ideal里面报的错误,在控制台提示: Error:(1, 1) 错误: 需要class, interface或enum 网上搜到说是编码问题,我的解决方式: 把出错的文件选中复制一份,再随 ...