一、CSS布局与定位
CSS布局主要是盒子模型的应用,而定位则由不同的定位机制实现。
这是一个典型页面的盒子模型
- 盒子模型——元素怎么样
页面元素的大小
边框
与其他元素的距离
- 定位机制——元素放在哪
文档流flow
浮动定位float
层定位layer
1、盒子模型
- 页面中所有元素都可以看作一个盒子,占据着一定的页面空间。
- 盒子模型组成:
content为盒子里的内容
height高度
width宽度
padding内边距——边框与内容的距离
border边框
margin外边距——盒子与其他盒子之间的距离
-
overflow属性
当内容溢出盒子框时,overflow属性的取值:
hidden 超出部分不可见
scroll 显示滚动条
auto 如果有超出部分,显示滚动条
-
border属性
border-width: px, thin, medium, thick
border-style: dashed, dotted, solid, double
border-color: 颜色
border: width style color
-
水平分割线
用以下代码可实现一条长为500px的水平分割线。
.line{
height: 1px;
width: 500px;
border-top: 1px solid #e5e5e5:
}
-
对浏览器默认的设置清零
*{
margin: 0;
padding: 0;
}
- margin取值
margin: 1px 2px 3px 4px; //四个值分别设置top,right,bottom,left
margin: 1px 2px; //等价于margin: 1px 2px 1px 2px;
margin:1px 2px 3px; //等价于margin: 1px 2px 3px 2px;
- margin的合并
垂直方向合并:两盒子间距取最高的高度。
水平方向不合并。
- 设置水平居中
图片文字水平居中:text-align: center;
div水平居中:margin: 0 auto;
2、定位机制
- 文档流flow
元素分类:block,inline,inline-block
block:独占一行,width,height,padding,margin属性都可设置。例如:<div>,<p>,<ol>,<table>等。将元素显示为block元素:display: block;
inline:不单独占一行,width,height属性不可设置。例如:<span>,<a>。将元素显示为inline元素:display: inline;两个inline元素之间默认带有间距。
inline-block:不单独占用一行,width,height,padding,margin属性都可设置。例如:<img>。将元素显示为inline-block元素:display: inline-block;
display: none; //元素不会显示
- 浮动定位float
float属性
left:左浮动
right:右浮动
none:不浮动
clear属性
both:清除左右两边的浮动
left:只清除左边的浮动
right:只清除右边的浮动
none:默认值,用于移除已指定的清除值
- 层定位layer
position属性
static:默认值
fixed:固定定位,相对于浏览器窗口
relative:相对定位,相对于其直接父元素
absolute:绝对定位,相对于第一个非static父元素
二、伪类与伪元素
1、伪类
依附于已存在的元素,使用冒号作为标识,描述元素在某特性或状态下的样式。
:hover | 悬停 |
:active | 激活 |
:focus | 获取焦点 |
:link | 未访问(链接) |
:checked | 勾选(表单) |
:first-child | 第一个子元素 |
:last-child | 最后一个子元素 |
:nth-child() | 指定索引的子元素 |
:not() | 不匹配给定选择器 |
2、伪元素
使用双冒号作为标识,用于创建虚拟元素并定义其样式。
::before | 虚拟元素(前) |
::after | 虚拟元素(后) |
::selection | 选中文本 |
::first-line | 第一行文本 |
::first-letter | 第一个字符 |
伪类选择器可以链式拼接。
li:hover:last-child::after{
content:"文本";
margin-left:20px;
}
可以使鼠标悬停在最后一行上时出现文本。