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边框以及其他常用样式的更多相关文章

  1. 3、css边框以及其他常用样式

    一.边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. CSS文字,文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  3. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

  4. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  5. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  6. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  7. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  8. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  9. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

随机推荐

  1. 成都Uber优步司机奖励政策(1月27日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 设置cell高度的两种方法(label高度的可变引起cell高度可变的情况)

    第一种:(iOS8以后可用) 在Xib或stroyboard中(代码也可以) 利用AutoLayout设置好label的约束(比如可以设置四个边都距离屏幕50等方式,必须四个边都要固定好). 在代码部 ...

  3. fastDFS 分布式文件系统应用

    环境准备 使用的系统软件 名称 说明 centos 7.x libfatscommon FastDFS分离出的一些公用函数包 FastDFS FastDFS本体 fastdfs-nginx-modul ...

  4. 关于iOS和Android的安装包更新笔记

    关于iOS和Android的安装包更新问题 1. Android更新apk 1)使用DownloadManager下载 2)使用HttpClient下载 apk的下载不能使用ssl,即不能使用http ...

  5. MySQL高级-慢查询日志

    一.慢查询日志是什么 1. 2. 3. 2.开启了慢查询日志后,什么样的SQL才会记录到慢查询日志里面呢? 3.案例 1.查看当前多少秒算慢 2.设置慢的阙值时间 3.为什么设置后看不出变化? 4.记 ...

  6. ES2015学习笔记

    ECMA6学习笔记 参考资料 ECMAScript6入门:http://es6.ruanyifeng.com/ 官方文档:https://babeljs.io/learn-es2015/ 开发软件:W ...

  7. Chromium添加一段新字符串

    参考:https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-dev/tclib%7Csort:relevance/chr ...

  8. uvaoj455Periodic Strings(枚举)

    A character string is said to have period k if it can be formed by concatenating one or more repetit ...

  9. Ubuntu安装netdata监控平台

    介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控有关CPU,内存,磁盘,网络,进程等指标. Netdata官网地址:https://my-n ...

  10. TPO-13 C2 How to use language lab

    TPO-13 C2 How to use language lab 第 1 段 1.Listen to a conversation between a student and the languag ...