Border-collapse | 学习笔记

简介: 快速学习 Border-collapse。

开发者学堂课程【CSS 快速掌握Border-collapse】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9206


Border-collapse


内容介绍

一、border-collapse 简介


一、border-collapse 简介

这个属性主要是用于来合并边框线 其值为:collapse

border-collapse : collapse;

例子:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<title>合并表格的边框线</title>

<style type=”text/css”>

table{

border-collapse:collapse;

/*给边框设置颜色*/

border-color:#ccc;

 

</head>

<body>

Table>tr*10>{&nbsp:}*10

</body>

</html>

 

< ! DOCTYPE htmI>

<html lang="en">

<head>

 <meta charset= "UTF-8">

  <title>使用CSS3 中的结构伪类选择器来实现隔行变色的表格</title>

<style type="text/css"> I

table{

 border- collapse: collapse;

}

table tr:nth- child(even){

background-color: #f00;

}

table tr:nth- child(odd){

background-color: #00f;

}

/*当鼠标移动到 tr 上面的时候显示背景颜色为#ccc*/

table tr:hover{

background-color: #ccc;

}

</style>

</head>

<body>

<table width="500” border="1" align="center">

相关文章
|
2月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
2月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
2月前
|
前端开发
content-box和border-box是什么?
content-box和border-box是什么?
150 0
|
6月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
554 44
|
7月前
|
前端开发
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
145 2
|
7月前
|
前端开发
如何将一个盒子模型变成border-box?
如何将一个盒子模型变成border-box?
44 0
|
7月前
|
前端开发
box-sizing: border-box;
box-sizing: border-box;
48 0
CSS 02 border-radius
html: <div class="demo"> </div> css: .demo{ width:200px; heigth:200px; border:1px solid #ccc; background-color:#f66; margin:50px auto; border-radius:50%; // border-radius: 50% 50% 50% 50%; } 画一个半圆 .demo{ width:200px; heigth:200px; border:1px solid #cc
你不知道的border-style border-radius background
你不知道的border-style border-radius background