1.内边距（内边距在content外，边框内）
内边距属性：
padding          设置所有边距
padding-bottom     底边距
padding-left          左边距
padding-right          右边距
padding-top          上边距
 
2.边框
border-style   定义边框样式
单边框样式
border-top-style
border-left-style
border-right-style
border-bottom-style
 
border-top-width
border-left-width
border-right-width
border-bottom-width
 
边框颜色
border-color
 
css3边框
border-radius:    圆角边框
box-shadow:     边框阴影
border-image:     边框图片
 
3.外边距
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位，百分数值
margin     设置所有边距
margin-bottom     设置底边距
margin-left          设置左边距
margin-right          设置右边距
margin-top          设置上边距
 
外边距合并
当另个盒子合并在一起的时候，他们的边距会合并，（遵循多的一部分）
 
css3盒子相关样式
1.盒子的类型
inline       block     inline-block     inline-table(让别个变成行内元素)     list-item(变成列表形式的展现)
 
<style>
     div{
          display:list-item;
          list-style-type:circle;
          margin-left:30px;
     }
</style>
<body>
     <div>实例1</div>
     <div>实例2</div>
     <div>实例3</div>
     <div>实例4</div>
</body>
内联元素无法设置宽度和高度，希望设置它的高度，宽度，又希望按照内联样式显示，所以使用inline-block
 
2.对盒子中容纳不下的内容的显示
overflow : hidden(隐藏)     scroll(滚动)     auto(水平或垂直添加滚动条)     visible(直接超出显示)
overflow-x : hidden    scroll  ;
overflow-y : hidden    scroll  ;
 
white-space : nowrap ;(字体不允许换行)
 
3.盒子的阴影和大小计算方式
box-shadow : 10px 10px 5px #ccc ;
 
盒子大小根据盒子的box-sizing:(border-box , content-box , inherit)来决定
content-box  表示整个区域的宽度和高度不被包含在盒子的区域当中
border-box  表示整个盒子是包含你设置的边距的，边距指内边距和外边距

css盒子模型 css3盒子相关样式的更多相关文章

  1. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  2. js 盒子模型与盒子偏移量

    js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...

  3. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  4. 盒子模型(W3C盒子模型、IE盒子模型)

    盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...

  5. 盒子模型之margin相关技巧！

    废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并 指当两个垂直外边距相遇时,它们将形成一个外 ...

  6. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  7. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  8. CSS样式----盒子模型（图文详解）

    盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...

  9. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

随机推荐

  1. top查看CPU情况

    Linux查看CPU情况 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top ...

  2. C基础题-sizeof

    sizeof  C语言中判断数据类型或者表达式长度符:关键字:字节数的计算在程序编译时进行,而不是在程序执行的过程中才计算出来! 一.关于sizeof简单的总结 1.sizeof的使用形式:sizeo ...

  3. [matlab]bp神经网络工具箱学习笔记

    基本就三个函数: newff():创建一个bp神经网络 train():训练函数 sim():仿真函数 同时具有可视化界面,但目前不知道可视化界面如何进行仿真,且设置不太全 工具箱:Neural ne ...

  4. sklearn有关参数

    from sklearn import datasets from sklearn.linear_model import LinearRegression import matplotlib.pyp ...

  5. JavaScript学习系列5 ---ES6中的var, let 和const

    我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...

  6. Java异常处理的10个最佳实践

    本文作者: ImportNew - 挖坑的张师傅 未经许可,禁止转载! 异常处理在编写健壮的 Java 应用中扮演着非常重要的角色.异常处理并不是功能性需求,它需要优雅地处理任何错误情况,比如资源不可 ...

  7. java线程基础知识----线程基础知识

    不知道从什么时候开始,学习知识变成了一个短期记忆的过程,总是容易忘记自己当初学懂的知识(fuck!),不知道是自己没有经常使用还是当初理解的不够深入.今天准备再对java的线程进行一下系统的学习,希望 ...

  8. 【Java面试题系列】：Java中final finally finalize的区别

    本篇为[Java面试题系列]第三篇,文中如有错误,欢迎指正. 第一篇链接:[Java面试题系列]:Java基础知识常见面试题汇总 第一篇 第二篇链接:[Java面试题系列]:Java基础知识常见面试题 ...

  9. PPT2010学习笔记（共20讲）

    第1讲  商务PPT中的必备元素 # 设计需打破规范 第2讲  封面页设计(一) 大图型封面页 # 基础知识点: 插入矩形和圆形 设置半透明色 设置字体变形效果 图片增强工具 利用过渡色虚化图片边缘 ...

  10. PHP实现把MySQL数据库导出为.sql文件实例（仿PHPMyadmin导出功能）

    1. 首先要得到该数据库中有哪些表,所用函数 mysql_list_tables(),然后可以将获取的所有表名存到一个数组.----------------该函数由于被弃用   用show table ...