目录
一、盒模型
1.元素尺寸
设置元素尺寸
div { width: 200px; height: 200px; }
auto 自适应 是默认值,width 在 auto 下是 100%的值;height 在 auto 下是自适应,就是有立马内容所需要的高度决定。
百分比方式 是相对于父元素长度来衡定的。
一个css里面写两个width等,后面的取值就会把前面的代替掉。
限制元素尺寸
div {
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px; }
这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它最大和最小的值。比如div设置宽高过下,内容太多就会溢出,添加这组限定后,之前的宽高取值就不起作用了。
2.元素内边距
padding
指元素距四周边框的距离。
会扩充div宽高。如height:200px; padding-top:10px; 则整个div高度变成了210px;
简写:
① padding :10px ;
上下左右10px 。
② padding:10px 20px:
上下10px,左右20px。
③ padding:10px 20px 30px;
padding 上10px 左右20px 下30px;不常用。
④ padding:10px 20px 30px 40px
上 右 下 左 顺时针转。
3.元素外边距
元素距周围元素的距离,长度不会算到元素的总长度里面去 ,这个范围内不会存在其它东西。
简写:
① margin: 10px;
上下左右10px 。
② margin: 10px 20px;
上下10px,左右20px。
③ margin: 10px 50px 200px;
上10px 左右50px 下200px;不常用。
④ margin: 10px 10px 10px 10px;
上 右 下 左 顺时针转。
4.处理溢出
当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。
溢出主要朝两个方向:右 侧和底部。我们可以通过 overflow 系列样式来控制它。
overflow-x 溢出值 设置水平方向的溢出
overflow-y 溢出值 设置垂直方向的溢出
overflow 溢出值 简写属性
5、元素可见性
visibility 属性可以实现元素的可见性,这种样式一般可以配合 JavaScript 来实现效果。
div { visibility: hidden; }
设置元素隐藏,但占位,原来多大的长宽,现在就会空出多大的长宽。
collapse
元素不可见,隐藏表格的行与列,但不占位, 如果不是表格,则和 hidden 一样。
6、元素盒类型
display 属性,可以更改元素本身盒类型。
①块级元素(区块)block
够设置元素尺寸、隔离其他元素功能的元素,即其它元素会换行。比如:<div>、<p> 等文档元素。
②行内元素(内联)inline
不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。
比如:<span>、<b>等文本元素。可以通过display转换成其它类型的元素,属性就会改变。
③行内-块级元素(内联块) inline-block
所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素的元素。其它元素会紧跟其后。可以实现两个块并列等,比如<img>。
④隐藏元素 none
div { display: none; }
将元素隐藏且不占位
7、元素的浮动
通过 float 属性建立盒子的浮动方向。
left 浮动元素靠左 , right 浮动元素靠右, none 禁用浮动 。
使用时容易出现的问题:一个元素盒子被浮动后,会处于上一层,下面的元素会自动堆叠处理,导致 元素不可见或部分不可见。
可以使用 clear 属性来处理。后面的元素加上clear之后,就不会堆叠,向原来一样处于下一行或者排列在后面。
clear:none 允许两边均可浮动
left 左边界不得浮动
right 右边界不得浮动
both 两边都不得浮动
8、盒子的阴影
box-shadow: 5px 4px 10px 2px gray;
给元素盒子增加阴影效果。
box-shadow: 5px 4px 10px 2px gray inset;
实现内部阴影。
二、边框
盒模型的尺寸可以通过两种方式实现可见性,一种是边框,一种是背景。
div的外围,设置了边框宽度,总长度会改变。
1.声明边框
默认宽度3px,默认颜色黑色,border-style:
2.边框样式
破折线就是虚线。
槽线边框:像相框一样,有立体感。
也可以对四条边中某一条边单独进行设置:
border-top-width
border-top-style
border-top-color
一般用简写形式:border-top:solid 10px red;
四条一致可以简写成:
border: 10px solid red;
3、圆角边框
border-radius长度值或百分数 四条边角
border-top-left-radius 长度值或百分数 左上边角
三、背景
简写顺序也是上面这个标签顺序。
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];
例如:background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
transparent 设置背景颜色为透明色。
background-size 五个值
auto 默认值,图像以本尺寸显示
cover 等比例缩放图像,使图像至少覆盖容器,但有可能超出容器
contain 等比例缩放图像,使其宽度、高度中较大者与 容器横向或纵向重合。就像QQ更换头像的原理。
长度值 CSS 长度值,比如 px、em
百分数 比如:100%
background-attachment
scroll 默认值,背景固定在元素上,不会随着内 容一起滚动
fixed 背景固定在视窗上,内容滚动时背景不动。
四、表格与列表
表格样式
独有样式有五个:
border-collapse
collapse 单元格之间无缝隙。
separate 默认值,单元格边框独立,有缝隙;
border-spacing 单元格的间距
不设置的话默认间距为2px
table { border-spacing:10px; }
border-collapse: separate;的状态下才有效。因为要设置间距,不能合并。0px时候效果比collapse有立体感。
caption-side: bottom;
设置表格标题
top 默认值,标题在上方
bottom 标题在下方
empty-cells: hide;
单元格内容为空是隐藏边框。
show 默认值,显示边框 。
table-layout
table { table-layout: fixed; }
内容过长后,不会拉伸整个单元格。但会在下一行显示文字,一行的行高会变高。
auto 默认值,内容过长时,拉伸整个单元格 。
直接在table下面写border是指整个表格的外边框样式,内边框写table tr td,tr th{}等。
列表样式
独有的有如下四种:
简写方式:list-style: lower-alpha inside url(bullet.png);
五、其它样式
opacity,可以设置元素的透明度。
outline 轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。可以实现一些立体感的样式,按钮会用。
cursor 光标样式
有很多样式,具体查看CSS手册。
cursor: move;
设置当前元素的光标为移动光标。
垂直对齐
text-align 属性水平对齐
vertical-align 属性用于垂直对齐,可以用这种方式做上下标。
vertical-align :middle;垂直中部对齐。