css边框以及其他常用样式
1. 边框是1像素，实体的，红色的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">come here</div>
</body>
</html>
在浏览器的--检查下面可以选择颜色条。修改样式，变成虚线。左边框，右边框。border-left
2.定义高度宽度：height（高度，百分比）,width（宽度，像素，百分比）, text-align:center;（水平方向居中） line-height（垂直方向根据div有多高去居中）, color（字体颜色）,font-size（字体大小）,font-weight：bold（字体加粗）。
width:80% 指的是占整行的80%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">come here</div>
<div style="height:48px;width:200px;border:1px solid red;">来来阿狸</div>
</body>
</html>
运行结果：定义了宽度以后，虽然看起来边框变小了，但是div还是块级标签，所以还是占一整行。后面的内容会从新的一行开始。
3.居中：把line-height定义为跟height一样的像素，这样文字就会上下居中了。看整体效果吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">come here</div>
<div style="height:48px;
width:200px;
border:1px solid red;
font-size:26px;
text-align:center;
line-height:48px;
font-weight:bold;">
来来阿狸</div>
</body>
</html>
运行结果：
css边框以及其他常用样式的更多相关文章
- 3、css边框以及其他常用样式
一.边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- CSS文字，文本常用样式
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
- CSS边框及常用样式
一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法 board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
随机推荐
- SpringBoot-07：SpringBoot整合PageHelper做多条件分页查询
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述如何在SpringBoot中整合PageHelper,如何实现带多个条件,以及PageInfo中的 ...
- springboot之RMI的使用
1.RMI 指的是远程方法调用 (Remote Method Invocation).它是一种机制,能够让在某个 Java虚拟机上的对象调用另一个 Java 虚拟机中的对象上的方法.可以用此方法调用的 ...
- 二 Hive分桶
二.Hive分桶 1.创建分桶表 create table t_buck (id string ,name string) clustered by (id) //根据id分桶 sorted by ( ...
- MySQL高级-全局查询日志
注意:全局查询日志不要在生成环境中启用 一.配置启用 二.编码启用
- FCL中你不得不知的几种委托
FCL中丰富的类库信息极大的方便了我们的编码,很多我们日常经常用到的类型,FCL中已经帮我们定义好,下面要介绍的就是FCL中定义好的几种委托类型,直接使用它们不仅能提高我们的编码效率,而且还能让我们的 ...
- react组件性能
一.渲染原理 二.性能优化 三.Immutable在性能优化中的作用
- 「日常训练」ZgukistringZ（Codeforces Round #307 Div. 2 B）
题意与分析(CodeForces 551B) 这他妈哪里是日常训练,这是日常弟中弟. 题意是这样的,给出一个字符串A,再给出两个字符串B,C,求A中任意量字符交换后(不限制次数)能够得到的使B,C作为 ...
- git基础（1）
一.获取git仓库(两种方法)1.现有目录初始化 git init目录有文件(非空文件)进行跟踪执行:git add+文件名提交:git commit -m(提交信息说明) 2.克隆现有代码仓库的代码 ...
- SpringMVC+mybatis+maven+Ehcache缓存实现
所谓缓存,就是将程序或系统经常要调用的对象存在内存中,以便其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. 缓存主要可分为二大类: 一.通过文件缓存,顾名思义文 ...
- Java开发工程师(Web方向) - 04.Spring框架 - 第3章.AOP技术
第3章--AOP技术 Spring框架 - AOP概述 笔记https://my.oschina.net/hava/blog/758873Spring框架 - AOP使用 笔记https://my.o ...