一、CSS表格属性
1.border:设置表格边框,语法:border:1px solid red; (粗细 边框样式 边框颜色)
2.border-collapse:设置表格边框是否折叠成一个单一的边框或隔开
collapse:表示折叠
separate:表示分开
3.width和height:表格的宽度和高度
4.text-align:设置表格内容水平对齐方式
5.vertical-align:设置垂直对齐方式
6.padding:控制边框和表格内容之间的间距,应使用td和th元素
7.background-color:设置背景颜色
二、CSS边框属性
1.border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。
2.border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
3.border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。
注: 1个值【4个边框都一样】,2个值【上下一组,左右一组】
3个值【左右一组,上边,下边】,4个值【4个边框各不相同】
上面这三个属性可以分为4组
border-top-color,border-right-color,border-bottom-color,border-left-color
border-top-style,border-right-style,border-bottom-style,border-left-style
border-top-width,border-right-width,border-bottom-width,border-left-width
我们可以通过border属性设置4边的边框
三、盒子模型
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
四、CSS display与visibility
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
五、CSS position(定位)
1.static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象;静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动,fixed定位使元素的位置与文档流无关,因此不占据空间。fixed定位的元素和其他元素重叠。
3.relative:相对定位元素的定位是相对其正常位置。移动相对定位元素,但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
4.absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>.;absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。
5.sticky:sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Sticky</title>
<style>
div.sticky {
position: sticky;
top: 100px;
padding: 40px;
text-align: center;
color: blue;
background-color: #cae8ca;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
<div class="sticky">我是粘性定位!</div>
</body>
</html>
六、CSS overflow(布局)
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
注意:overflow 属性只工作于指定高度的块元素上
overflow属性有以下值:
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
七、CSS float(浮动)
Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。[列表的每一项]。元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Float(浮动)</title>
<style>
ul{
margin-left: 0px;
list-style-type: none;
}
ul li{
float: left;
padding-left:15px;
}
ul > li > a{
text-decoration: none;
font-weight: lighter;
font-size: 10px;
color: #000;
}
a:hover{
text-decoration: none;
font-weight: lighter;
font-size: 10px;
color: blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">网盘</a></li>
</ul>
</body>
</html>