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. Redis系列九 Redis集群

    1. redis-cluster架构图 redis-cluster投票:容错 架构细节 ①所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. ②节点的fai ...

  2. react-native windows系统 红屏报assets缺失 500错误

    指定版本,react-native是facebook用mac系统开发的,windows系统兼容较差,新版本更是问题很多, 相对老版本更加稳定 react-native init demo --vers ...

  3. 如何用istio实现应用的灰度发布

    Istio为用户提供基于微服务的流量治理能力.Istio允许用户按照标准制定一套流量分发规则,并且无侵入的下发到实例中,平滑稳定的实现灰度发布功能. 基于华为云的Istio服务网格技术,使得灰度发布全 ...

  4. Qt-QSplashScreen-程序启动动画

    多数大型应用程序启动时可会在程序完全启动前显示一个启动画面,在程序完全启动后消失,程序启动画面可以显示相关产品的一些信息,使用户在等待程序启动时同时了解产品的相关功能,这也是一种宣传方式. 首先运行界 ...

  5. 使用 Fiddler工具模拟post四种请求数据

    post请求主体详解: 对于get请求来说没有请求主体entity-body.对于post请求而言,不会对发送请求的数据格式进行限制,理论上你可以发任意数据,但是服务器能不能处理就是另一回事了.服务器 ...

  6. APP九宫格滑动解锁的处理

    写手机自动化测试脚本关于APP九宫格滑动解锁方面采用了appium API 之 TouchAction 操作. 先是用uiautomatorviewer.bat查询APP元素坐标: 手工计算九宫格每个 ...

  7. PHP正则相关

    描述字符串排列模式的一种自定义语法规则 如果可以使用字符串函数处理的任务 就不要使用正则 正则表达式 就是通过构建具有特定规则的模式,与输入的字符信息比较 在进行 分割 匹配 查找 替换 等工作   ...

  8. Java容器之List接口

    List 接口: 1. List 接口是 Collection 的子接口,实现 List 接口的容器类中的元素是有顺序的,而且可以重复: 2. List 容器中的元素都对应一个整数型的序号记载其在容器 ...

  9. Swift-map()跟flatMap()区别

    map()方法介绍 map() 是  Array 提供的方法,通过接收一个函数作为传入参数,对数组中每个元素进行函数变换得到新的结果值.这样只需要提供  X->Y 的映射关系,就能将数组  [X ...

  10. 3ds Max学习日记（二）

      搞了一天终于把第二章弄完了,虽然有点慢,但也是没有办法,毕竟中途学累了总得放松一下吧.   又get到了一个新知识点,是关于3ds max的捕捉工具的,详情见3DS MAX 学习笔记 一(捕捉工具 ...