css盒子样式有哪些,css盒子模型 css3盒子相关样式

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(变成列表形式的展现)

div{

display:list-item;

list-style-type:circle;

margin-left:30px;

}

实例1

实例2

实例3

实例4

内联元素无法设置宽度和高度，希望设置它的高度，宽度，又希望按照内联样式显示，所以使用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  表示整个盒子是包含你设置的边距的，边距指内边距和外边距

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

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

js 盒子模型与盒子偏移量

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

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

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

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

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

盒子模型之margin相关技巧！

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

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

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

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

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

CSS样式----盒子模型(图文详解)

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

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

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

随机推荐

Fast Image Cache – iOS 应用程序高性能图片缓存

Fast Image Cache 是一种在 iOS 应用程序中高效.持续.超快速的存储和检索图像的解决方案.任何良好的 iOS 应用程序的用户体验都应该是快速,平滑滚动的,Fast Image Cac ...

Engineering Economics

相关简介 工程经济学 –-研究各种技术在使用过程中如何以最小的投入获得预期产出或者说如何以等量的投入获得最大的产出: –-如何用最低的寿命周期成本实现产品.作业以及服务的必要功能. 软件工程经济学 工 ...

程序员的自我修养九Windows下的动态链接

9.1 DLL简介 DLL即动态链接库的缩写,它相对于Linux下的共享对象. Windows下的DLL文件和EXE文件实际上是一个概念,它们都是有PE格式的二进制文件. 微软希望通过DLL机制加强软 ...

[转载] kill命令

转载自http://www.cnblogs.com/peida/archive/2012/12/20/2825837.html Linux中的kill命令用来终止指定的进程(terminate a p ...

MyBatis # $区别

方式一: SELEC ...

shell工具-sort

sort sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出 基本语法 sort [选项] [参数] 选项说明 选项 说明 -n 依照数值大小排序 -r 以相反的顺序排序 - ...

动态分析小示例| 08CMS SQL 注入分析

i春秋作家:yanzm 0×00 背景 本周,拿到一个源码素材是08cms的,这个源码在官网中没有开源下载,需要进行购买,由某师傅提供的,审计的时候发现这个CMS数据传递比较复杂,使用静态分析的方式不 ...

iOS 10 的一个重要更新-新的通知推送 API

iOS 10 最重要的变化可能就是通知 API 的重构了.本文用一个简单闹钟的例子介绍了 User Notification 的 API 变化和新功能. 简介 很久以前,开发者就可以在 iOS 里预约 ...

Android学习系列(16)--App列表之圆角ListView

有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈.甚至,有时觉得设计之殇是审美疲劳.直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone中 ...

git使用经验(一)

在使用Git Push代码到数据仓库时,提示如下错误: [remote rejected] master -> master (branch is currently checked out) ...