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优步司机奖励政策（4月6日）

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

  2. 北京Uber优步司机奖励政策（12月13日）

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

  3. Linux 下获取本机IP

    http://blog.csdn.net/K346K346/article/details/48231933 int main () { /* struct ifaddrs *ifap, *ifa; ...

  4. 一个只有十行的精简MVVM框架（上篇）

    本文来自网易云社区. 前言 MVVM模式相信做前端的人都不陌生,去网上搜MVVM,会出现一大堆关于MVVM模式的博文,但是这些博文大多都只是用图片和文字来进行抽象的概念讲解,对于刚接触MVVM模式的新 ...

  5. 【JUC源码解析】Exchanger

    简介 Exchanger,并发工具类,用于线程间的数据交换. 使用 两个线程,两个缓冲区,一个线程往一个缓冲区里面填数据,另一个线程从另一个缓冲区里面取数据.当填数据的线程将缓冲区填满时,或者取数据的 ...

  6. APP产品设计流程图

    产品设计流程(toB) 工作有半个月了,遇到了很多问题,也在不断学习和充实自己,让自己的工作变得更加清晰和流程化,所以整理了这么个设计流程. 收集整理一切有用或则以后可能会用的文档. 从文档里面提炼用 ...

  7. ISE 14.7安装教程最新版（Win10安装）——解决Win10安装完后打不开快捷方式的方法

    ISE 14.7安装教程最新版(Win10安装) Xilinx ISE是一款世界著名的硬件设计软件,它为设计流程的每一步都提供了直观的生产力增强工具,覆盖从系统级设计探索.软件开发和基于HDL硬件设计 ...

  8. fizzbuzz Python很有意思的解法

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

  9. TW实习日记：第20-21天

    为什么上周五没写呢,因为上周五一直在熟悉业务流程...根本不会写一些复杂的业务代码,因为没有业务流程图!!!在学校的上需求分析和UML建模课的时候,还有软件工程课的时候,想着这都什么鬼啊,听来干嘛,写 ...

  10. JAVA基础学习之路（八）[1]String类的基本特点

    String类的两种定义方式: 直接赋值 通过构造方法赋值 //直接赋值 public class test2 { public static void main(String args[]) { S ...