css
来源:互联网 发布:lua和php 编辑:程序博客网 时间:2024/06/02 04:33
css
层叠样式表 (多个样式定义可层叠为一)
overflow溢出
当一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况
表格
border-collapse属性来去除单元格之间的空隙
<style type="text/css"> table,th,td{border:1px solid gray;} table{border-collapse:collapse;} </style>
border-spacing属性来定义表格边框间距
border-spacing:像素值;该属性指定单元格边界之间的距离。当只指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。
<style type="text/css"> table,th,td{border:1px solid gray;} table{border-spacing:5px 10px } </style>
CSS盒子模型
每个元素都看成一个盒子,盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。
内容区(content)
内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区而言,并不包括padding部分。当内容信息太多时,超出内容区所占范围时,可以使用overflow溢出属性来指定处理方法。
内边距(padding)
内边距,指的是内容区和边框之间的空间,可以被看做是内容区的背景区域。
关于内边距的属性有5种,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离
边框(border)
边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。
其中border-width指定边框的宽度,border-style指定边框类型,border-color指定边框的颜色。
“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”
外边距(margin)
外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。
外边距的属性也有5种,即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。
同时,CSS允许给外边距属性指定负数值,当指定负外边距值时,整个盒子将向指定负值的相反方向移动,以此可以产生盒子的重叠效果
定位布局简介position
固定定位(fixed)、相对定位(relative)、绝对定位(absolute)和静态定位(static)
固定定位(fixed)
固定定位其实很简单,就是使用“position:fixed”设置某一个元素为固定定位,接着使用top、bottom、left和right这4个属性来设置一下元素相对浏览器的位置就可以了。
相对定位(relative)
采用相对定位的元素,其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。
相对定位的容器浮上来后,其所占的位置仍然留有空位,后面的无定位元素仍然不会“挤上来”。
绝对定位(absolute)
一个元素变成了绝对定位元素,这个元素就完全脱离正常文档流了,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。
position:absolute会将元素转换为块元素
绝对定位是相对于外层第一个设置了position(除static外)的祖先元素来定位的。
静态定位(static)
没有指定元素的position属性值,也就是默认情况下,元素是静态定位.
选择器
m n 后代 (所有的后代)
m>n 子代 (只是子代这一个后代)
m~n 兄弟 (所有的兄弟)
m+n 相邻 (只是相邻的那一个兄弟)
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- 【BZOJ2142】【扩展lucas】礼物 题解
- android基础之适配器复习
- ZooKeeper安装配置
- 卸载(删除)Visual Studio Professional 2013 (VSPro2013)
- java:处理输入成绩异常
- css
- 完美世界前端笔试
- 螺旋队列问题
- Emacs 快速指南
- CSS特性
- Flask部署 —— nginx+gunicorn+supervisor
- <学习html>第二天笔记-标签分类、关系;开发工具;文档类型;标签语义化;HTML标签;问题“图像标签代码语法无误,但是图像显示不出来”
- GitHub -- GitHub配置与使用
- sqlalchemy位运算符的使用(与或非等)