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 ...
随机推荐
- 微服务架构（Microservice Architect Pattern）综述——什么是微服务架构（读书笔记）
简单定义: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间相互协调,相互配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机制相互沟通(通 ...
- 能用程序解决的问题绝不BB之租房篇章...
项目缘起于高德API+Python解决租房问题, 修修补补之后上线了58公寓高德搜房(全国版)http://woyaozufang.live:8080. 经过了多次代码优化.内容改版.新增房源等... ...
- springBoot 自定义redisTemplate
package com.atirm.mybatismutiplesource.config.RedisConfig; import com.atirm.mybatismutiplesource.ent ...
- IAR调试cc2541串口遇到的Warning : Possible IDATA stack overflow detected
1. 遇到的错误如下,似乎是栈空间不够使用 2. 修改界面如下,增加IDATA的大小,不过最大似乎是0XFF.
- DSP5509的ADC实验
1. 本次使用esay5509开发板,具体做这个板子叫做大道科技. 2. 5509有2个ADC的输入引脚,就是2个采集通道 3. 看下ADC的寄存器 4. 看下代码中怎么引用ADC的寄存器的,这种写法 ...
- adb获取设备的序列号
用数据线连接手机, 打开开发者模式, 并赋予相关权限, 在CMD命令行输入: adb devices 第一个参数即为设备的序列号, 第二个参数device表示设备的状态是在线.
- python学习笔记03 --------------程序交互与格式化输出
1.读取用户输入内容 语法:input() 例: name = input('你的名字是?) print('你好'+name) 程序会等待用户输入名字后打印:你好(用户输入的名字) 注意:input接 ...
- lintcode407 加一
加一 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照大小进行排列,最大的数在列表的最前面. 您在真实的面试中是否遇到过这个题? Yes 样例 给定 [1,2,3] ...
- 56[LeetCode] .Merge Intervals
Given an array nums of n integers and an integer target, are there elements a, b, c, and d in nums s ...
- 深度学习笔记 (二) 在TensorFlow上训练一个多层卷积神经网络
上一篇笔记主要介绍了卷积神经网络相关的基础知识.在本篇笔记中,将参考TensorFlow官方文档使用mnist数据集,在TensorFlow上训练一个多层卷积神经网络. 下载并导入mnist数据集 首 ...