3、css边框以及其他常用样式
一、边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red">abc</div>
<div style="border: 1px dotted blue">abc</div>
</body>
</html> #style="border: 1px //边框1像素
#solid //实线； dotted //虚线；还可以设置左、右；
#颜色
二、其他样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 45px; width: 80%; border: 1px solid red">abc</div> <div style="height: 45px;
width: 200px;
border: 1px solid red;
font-size: 20px;
text-align: center;
line-height: 45px;
font-weight: bold; ">abc</div>
</body>
</html> height //高度,百分比
width //宽度像素，百分比
text-align:ceter //水平方向居中
line-height //垂直方向根据标签高度居中
color //字体颜色
font-size //字体太小
font-weight //字体加粗
三、float样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%; background-color: red; float: left">1</div>
<div style="width: 80%; background-color: blue; float: right">2</div> </body>
</html> float //让标签飘起来，块级标签也可以堆叠；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
} </style> </head>
<body style="margin: 0 auto"> #去掉顶部空隙
<div class="pg-header">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div> <div style="width: 300px; border: 1px solid red;">
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div> #div会逐个拼接；
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="clear: both"></div>
</div> </body>
</html>
四、display样式
行内标签：无法设置高度，宽度，padding margin
块级标签：可以设置高度，宽度，padding margin display:none； //让标签消失
display:inline； //让块级标签变成行内标签
display:block； //让行内标签变成块级标签
display:inline-block；
//具有inline默认自己有多少占多少；
//具有block，可以设置高度，宽度，padding margin； <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red; display: inline">abc</div>
<span style="background-color: red; display: block">abc</span>
</body>
</html>
五、内外边距
margin //外边距
padding //内边距
3、css边框以及其他常用样式的更多相关文章
- css边框以及其他常用样式
1. 边框是1像素,实体的,红色的. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 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 ...
随机推荐
- MYSQL 5.6修改密码
忘记了超级用户root密码的时候怎么办呢? 1. 修改配置文件跳过密码 (1)编辑mysql主配置文件my.cnf # vim /etc/my.cnf 在[mysqld] 字段下添加参数 skip-g ...
- 使用Entity Framework和WCF Ria Services开发SilverLight之6：查找指定字段
对数据库表指定字段的查找,又是实际工作中的一项必要工作.SL客户端仅获取实际需要的指定的字段,好处很多,比如:有助于减少网络流量. 有两类这样的使用场景. 1:联表查询不需要外键表 在上一篇中,我们使 ...
- eclipse的maven、Scala环境搭建
最近重新搭建了一下maven+Scala的环境,发现很多东西都不记得了,于是重新记录一遍. 嫌搭建麻烦的话也可以直接下载Scala官方做好的环境http://scala-ide.org/downloa ...
- javascript fetch 跨域请求时 session失效问题
javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...
- Machine Learning in Action(6) AdaBoost算法
Adaboost也是一种原理简单,但很实用的有监督机器学习算法,它是daptive boosting的简称.说到boosting算法,就不得提一提bagging算法,他们两个都是把一些弱分类器组合起来 ...
- ORA-02298: 无法验证 (PNET.POST_CLOB_FK) - 未找到父项关键字
在运行以下语句的时候,报错如下: ALTER TABLE PN_POST ADD CONSTRAINT POST_CLOB_FK FOREIGN KEY (POST_BODY_ID) REFERENC ...
- SPOJ1811 LCS SAM
后缀自动机简单题. 其主要思路是,先对第一个字符串建立后缀自动机,把第二个串放在上面匹配, 若当前状态s有字符x的转移,直接转移len=step+1. 若当前状态s没有向字符x的转移,退回pres检查 ...
- CSU-1531 Jewelry Exhibition —— 二分图匹配（最小覆盖点）
题目链接:https://vjudge.net/problem/CSU-1531 Input Output Sample Input 2 1 5 3 0.2 1.5 0.3 4.8 0.4 3.5 4 ...
- IE浏览器没有加载CSS或js文件的秘密及解决办法
其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...
- haproxy参数解析
HAProxy工作于隧道模式,其仅检查每一个连接的第一个请求, 1. option abortonclose #当服务器负载过高时,将自动关闭队列中处理时间较长的连接请求 2. option http ...