【温故知新】CSS学习笔记(盒子边框介绍)
CSS盒子边框
CSS中其实就三个大模块:盒子模型、浮动、定位。
其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)构成。
看透网页的本质:把网页元素比如文字或者图片,放入盒子里面,然后利用CSS摆放盒子的过程,就叫做网页的布局。
其实CSS确实没有太多的逻辑可言,就好比下图中的例子,是不是就类似我们小时候玩的积木,可以自由随意的进行摆放,实现我们想要的效果。
盒子模型(Box Model)分为以下三个部分:
- 盒子边框(border)
- 内边距(padding)
- 外边距(margin)
这一节我们主要介绍盒子边框(border)。边框就好比外面的一层皮。
具体语法:
Border : border-width / border-style / border-color
1、border-width:边框的粗细(单位px)
2、border-color:边框的颜色
3、border-style:边框的样式(常用的如下)
- none:无边框(默认)
- hidden:隐藏边框
- dotted:点线边框
- dashed:虚线边框
- solid:实线边框(重点)
【实例】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框介绍</title><style>div {width: 200px;height: 200px;border-width: 2px;border-color: deeppink;border-style: solid;/*border-style: dashed;*//*border-style: dotted;*//*border: 2px solid deeppink; /*边框连写格式*/*/}</style>
</head>
<body><div>钓鱼岛是中国的!</div>
</body>
</html>
当然一条一条属性分开来写略显麻烦,这里也提供了连写的方式。
边框连写语法:
border: 2px solid deeppink;
其实盒子的边框四条线可以拆分开来显示,分为上、下、左、右:
- 上边框:border-top
- 下边框:border-bottom
- 左边框:border-left
- 右边框:border-right
去掉所有边框写法:border:0;
【实例】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框练习</title><style>input {border: 0; /*去掉所有边框*/border-bottom: 1px dashed deeppink;}button {width: 50px;height: 30px;border: 1px solid blue;}</style>
</head>
<body>账户:<input type="text"><br> <br> <br><button>提交</button>
</body>
</html>
盒子边框的扩展学习
之前在HTML的学习中我们接触过对表格边框的粗细进行设置,但是在CSS这里只需要一句话就可以搞定了。
我们给table和td属性加上这么一句是不是就可以了“border: 1px solid red;”,话糙理不糙,但是细心的朋友会发现这边框咋比正常的略微粗了一点,这是因为单元格与单元格之间设置了无缝隙,那么两个边框就紧挨在了一起,当然会比一般的边框看上去粗一点,这个时候就
用到下面这种写法:
Border-collapse:collapse;表示边框合并在一起(相邻边框合并)
【实例】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格细线边框</title><style>table {width: 450px;height: 300px;border: 1px solid red; }td {border: 1px solid red;text-align: center; /*内容居中对齐*/}table,td {border-collapse: collapse; /*相邻边框合并*/}</style>
</head>
<body><table cellpadding="0" cellspacing="0"><tr><td>京东京东我最强</td><td>京东京东我最强</td><td>京东京东我最强</td></tr><tr><td>淘宝淘宝我最棒</td><td>淘宝淘宝我最棒</td><td>淘宝淘宝我最棒</td></tr><tr><td>最牛还是拼多多</td><td>最牛还是拼多多</td><td>最牛还是拼多多</td></tr></table>
</body>
</html>
Tip:Sublime注释快捷键“CTRL+/”
【温故知新】CSS学习笔记(盒子边框介绍)相关推荐
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记(狂神-完整版)
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- CSS学习笔记(详细,不定期更新)
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS 学习笔记 - 网格布局(栅格系统)
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS学习笔记(详细)- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
最新文章
- ISAPI_Rewrite3.1相关知识
- C语言结构体里的成员数组和指针
- Stata 17 for Win 最新中文附详细安装教程
- python病毒usb文件自动安装_win7禁USB自动安装驱动功能避免木马病毒入侵
- 操作系统上机作业--实现mysys(多进程)
- 静态链接库与动态链接库的区别
- 开单大师(开源可定制的房产管理系统) v3.6.9学习版
- ROS在rviz中实时显示轨迹和点
- 大数据开发笔记(八):Sparkstreaming
- media recovery oracle,Oracle非归档模式MediaRecovery错误之--ORA-26040
- cant find python executable_gyp ERR! stack Error: Can't find Python executable 'python'
- php ckeditor 使用教程,织梦实现使用默认编辑器ckeditor上传视频功能( 详细)
- pip快速下载python包
- 极客公园:正版音乐的前路漫漫
- 文本溢出显示省略号效果
- Java Agent入门教程
- 爬虫写得好,牢饭吃得早
- How to make a ipcamera
- 春节后面试别人的经历总结之二,好岗位分享给还在找工作中的软件开发爱好者们
- 快排为什么不稳定 举例说明