您的位置: 首页  >  文章  >  CSS学习，常用常记（列表，表格，盒子模型，边框border）

CSS学习，常用常记（列表，表格，盒子模型，边框border）

分类: 文章 • 2024-01-27 17:16:54

CSS 列表

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

ul {
	list-style-image:url('sqpurple.gif');
}

浏览器兼容性问题的解决；

ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}

列表 -简写属性

ul {
	list-style:square url("sqpurple.gif");
}

可以按顺序设置如下属性：

  • list-style-type
  • list-style-position (有关说明，请参见下面的CSS属性表)
  • list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

所有不同的列表项标记；

table,th,td{
	border:1px solid black;
}

表格有双边框，因为表和th/ td元素有独立的边界；

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
}

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开；

table,td,th{
	border:1px solid black;
}
table{
	width:100%;
}
th{
	height:50px;
}
td{
	text-align:right;<!--表格中文本 水平对齐方式-->
    vertical-align:bottom;<!--表格中文本 竖直对齐方式-->
}

td{
	padding:15px;<!--在表的内容中控制空格之间的边框-->
}
th{
	background-color:green;<!--表格的背景颜色-->
	color:white;<!--表格中的文本颜色-->
}

一个个性表格；

caption {caption-side:top;}<!--表格标题位置-->

CSS 盒子模型(Box Model)

  • 本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容；
  • 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素；

CSS学习，常用常记（列表，表格，盒子模型，边框border）

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
  • 指定一个CSS元素的宽度和高度时，只是设置内容区域的宽度和高度
  • 完全大小的元素，你还必须添加填充，边框和边距。.

300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
	<style>
		p.none {border-style:none;}
		p.dotted {border-style:dotted;}
		p.dashed {border-style:dashed;}
		p.solid {border-style:solid;}
		p.double {border-style:double;}
		p.groove {border-style:groove;}
		p.ridge {border-style:ridge;}
		p.inset {border-style:inset;}
		p.outset {border-style:outset;}
		p.hidden {border-style:hidden;}
	</style>
</head>

<body>
	<p class="none">无边框。</p>
	<p class="dotted">虚线边框。</p>
	<p class="dashed">虚线边框。</p>
	<p class="solid">实线边框。</p>
	<p class="double">双边框。</p>
	<p class="groove"> 凹槽边框。</p>
	<p class="ridge">垄状边框。</p>
	<p class="inset">嵌入边框。</p>
	<p class="outset">外凸边框。</p>
	<p class="hidden">隐藏边框。</p>
</body>
</html>

CSS学习，常用常记（列表，表格，盒子模型，边框border）

边框宽度

  • 可以通过 border-width 属性为边框指定宽度；
  • 两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)；
  • 或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin；
  • 注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px；
  • "border-width" 属性 单独使用则不起作用；要先使用 "border-style" 属性来设置边框；
p.one {
	border-style:solid;
	border-width:5px;
}
p.two {
	border-style:solid;
	border-width:medium;
}
p.three{
	border-style:solid;
	border-width:1px;
}

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

  • name - 指定颜色的名称，如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

p.one{
	border-style:solid;
	border-color:red;
}
p.two{
	border-style:solid;
	border-color:#98bf21;
}

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

p{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
p{
	border-style:dotted solid;
}

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;
    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;
    • 四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

边框-简写属性

你可以在"border"属性中设置：

  • border-width
  • border-style (required)
  • border-color
p{
	border:5px solid red;
}

border-style：属性1，属性2，属性3，属性4

上->右->下->左

border-style：属性1，属性2，属性3

上->左右->下

border-style：属性1，属性2

上下->左右

border-style：属性1

上下左右属性相同

 

相关推荐