一、边框

<!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边框以及其他常用样式的更多相关文章

  1. css边框以及其他常用样式

    1. 边框是1像素,实体的,红色的. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  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. 移植alsa-lib遇到的问题

    移植alsa-lib遇到的问题 linux audio    alsa lib    VERSIONED_SYMBOLS 这两天移植alsa lib时遇到了一个问题,被困住了好久. 做个记录,以后再被 ...

  2. spring 接收_header 作为get请求的httpheader

    今天项目遇到一个问题,我们项目用户验证和权限验证的信息(licence)是在http头中设置的,百度了一下,只有ajax才能设置头信息,form表单是无法设置的,但是我突然想起springMVC关于f ...

  3. RabbitMQ安装和介绍

    简单的安装方式 yum安装erlang,下载rpm包安装rabbitmq 一.编译安装erlang 1. 官方下载包并解压 wget http://erlang.org/download/otp_sr ...

  4. makefile编写---.c .cpp 混合编译makefile 模板

    # c.cpp混合编译的makefile模板 # # BIN = client_system BASE_INSTALL_DIR := /opt/arm-2009q1 BUILD_TOOL_DIR := ...

  5. #include &lt;sys/socket.h&gt;找不到头文件

    ubuntu下socket编程涉及到头文件sys/socket.h 和sys/types.h.我是用的codeblocks编辑器,当我想查看socket,h头文件时编辑器提示找不到头文件. 我就想可能 ...

  6. Vmware虚拟机安装XP系统

    刚开始下载的雨林木风ghost镜像,首先是虚拟机无法自动识别系统版本.然后启动的时候也是无法从光驱启动,又接连下载了几个版本的系统镜像, 都是ghost的,都不好使,百度,偶然发现有人提了一句,需要用 ...

  7. SPOJ - GSS1&&GSS3

    GSS1 #include<cstdio> #include<iostream> #define lc k<<1 #define rc k<<1|1 u ...

  8. javascript 中 "undefined" 与 "is not defined" 分析

      var var1; console.log( typeof var0);//print "undefined",主要看下面对var0单独的输出 console.log( typ ...

  9. css常用总结

    1.固定一个层在页面的位置,不受滚动条影响, 属性position:fixed,如: .tbar{ height:200px;width:60px;background-color:#666;posi ...

  10. EasyDarwin开发的短视频拍摄、录制开源项目EasyVideoRecorder

    在前面的博客<EasyDarwin开发出类似于美拍.秒拍的短视频拍摄SDK:EasyVideoRecorder>和<美拍.秒拍中安卓.IOS短视频拍摄的一些关键技术>中我们简单 ...