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优步北京第一组奖励政策

    优步北京第一组: 定义为2015年6月1日凌晨前(不含6月1日)激活的司机(以优步后台数据显示为准) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机 ...

  2. 全国Uber优步司机奖励政策 (1月25日-1月31日)

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

  3. 一个例子说明substr(), mb_substr() 和 mb_strcut()之间的区别

    例子来自PHP官方文档,我只是翻译下. http://www.php.net/manual/zh/function.mb-strcut.php header( 'Content-Type:text/h ...

  4. Process Monitor工具找网吧广告

    很多网吧经常有遇到有一些客户机多了一些广告或者是可能是有中毒的情况.Process Monitor 软件可以方便的监视和记录系统各程序的进程线程,注册表,网络,文件读写等活动. 1,开超级用户,双击打 ...

  5. ASP.NET数据库连接

    启动Visual Studio,新建一个web工程 点开工程目录下web.config文件, 找到节点,新增数据库配置 aspx界面新建一个button和一个文本框用于测试数据库连接, 其中butto ...

  6. beauifulsoup模块的介绍

    01   爬虫基础知识介绍 相关库:1.requests,re  2.BeautifulSoup   3.hackhttp 使用requests发起get,post请求,获取状态码,内容: 使用re匹 ...

  7. fizzbuzz Python很有意思的解法

    写一个程序,打印数字1到100,3的倍数打印“Fizz”来替换这个数,5的倍数打印“Buzz”,对于既是3的倍数又是5的倍数的数字打印“FizzBuzz” 题目不难,解起来容易,用for循环做if,e ...

  8. qt qchart缩放后坐标轴间隔取整

    使用qt的qchart显示数据曲线,坐标轴QValueAxis可以设置刻度间隔数量,但每个刻度的数值是根据坐标的极值除以间隔数量得到的,不一定是整数,导致曲线控件的显示刻度不适合观察. 如图: 纵坐标 ...

  9. POJ 1921 Paper Cut（计算几何の折纸问题）

    Description Still remember those games we played in our childhood? Folding and cutting paper must be ...

  10. 11.24Daily Scrum（3）

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.1002 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.1003 实现视频浏览的功能 ...