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 ...
随机推荐
- 一个体验好的Windows 任务栏缩略图开发心得
本文来自网易云社区 作者:孙有军 前言: 对于一个追求极致体验的软件来说,利用好系统的每一点优秀的特性,将会大大提高软件的品质. Windows vista以来任务栏缩略图,及Win + TAB的程序 ...
- NNLearning阶段性总结01
神经网络最基本的元素与计算流程: 基本的组网原则: 神经网络监督学习的基本步骤: 初始化权值系数 提取一个样本输入NN,比较网络输出与正确输出的误差 调整权值系数,以减少上面误差——调整的方法对应不同 ...
- Selenium 入门到精通系列：四
Selenium 入门到精通系列 PS:鼠标右键.鼠标悬停.键盘操作方法 例子 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2019 ...
- 转：vue生命周期流程图
- 【转】一款已上市MMO手游地图同步方案总结
转自游戏开发主席 1. 客户端地图格子的相关知识 在2.5D的MMO游戏里,角色是通过3D的方式渲染,2D的地图是通过2D的方式显示,所以在客户端一般会有三个坐标系: a) 3D坐标系:所有需要3D渲 ...
- CSP201509-2：日期计算
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- 使用Python客户端（redis-py）连接Redis--华为云DCS for Redis使用经验
使用Python连接Redis,需要先安装Python以及redis-py,以CentOS为例,介绍redis-py的客户端环境搭建. 第0步:准备工作 华为云上购买1台弹性云服务器ECS(我选了Ce ...
- java学习笔记-8.对象的容纳
1.Iterator(迭代器)和Enumeration(枚举类),都是用来遍历集合的,他们都是接口.区别是Enumeration只能读取集合的数据,而Iterator可以对数据进行删除,Iterato ...
- Python3 Tkinter-Checkbutton
1.多选按钮创建 from tkinter import * root=Tk() Checkbutton(root,text='python').pack() root.mainloop() 2.绑定 ...
- 使用树莓派实现(山寨)高清视频叠加(HDMI OSD)
项目需要在HDMI上叠加一些字符包括汉字和数值,要求不能使用台式机,本身也没有HDMI采集卡驱动开发能力,所以通过海思的HDMI编码器将HDMI编码为h.264网络视频流,然后通过树莓派解码显示,做字 ...