一、边框

<!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. libpcre.so.0 被删除怎么办？

    删除  #rpm -e --nodeps pcre-6.6-1.1 1> wget   http://mirror.centos.org/centos/6/os/i386/Packages/pc ...

  2. 斯坦福公开课：Developing IOS 8 App with Swift（1-3）心得体会

    最近开始学习Swift开发移动程序.跟随斯坦福大学的公开课进行自学. 这真是一个美好的时代,虽然不能在斯坦福求学,但是可以观看录制的授课录像.讲义,好似老师在给我们上课一样! 心得: 1.每节课信息量 ...

  3. HttpUtility.UrlEncode，Request.RawUrl，HttpUtility.UrlDecode，HttpUtility.UrlPathEncode，Uri.EscapeDataString

    碰到同样问题, 记录一下. 引自:https://www.cnblogs.com/ken-admin/p/5826480.html HttpUtility.UrlDecode(url),从Encode ...

  4. Ipython基础功能

    ipython:交互式的python命令行 直接在终端敲命令即可进入 安装:pip install ipython 使用:在终端敲“ipython” 与python解释器的使用方法一致 TAB键自动补 ...

  5. Ubuntu16.04 下docker部署web项目

    概念性的请戳 第一步:更新apt-get update 第二步:安装环境 apt-get install \ apt-transport-https \ ca-certificates \ curl ...

  6. hive编程入门课程（加精）

    hive编程入门课程 http://wenku.baidu.com/link?url=BfyZWjz48G_6UJImzWw39OLB0sUrIYEYxoxNpaFbADUQekmOvQy4FPY1f ...

  7. “懒”也要有境地---大部分程序猿都在的地方，再不来就out了。

    别人在玩.你也在玩,为什么别人天天进步,职业晋升. 而你则原地踏步. 事实上你和他的距离仅仅有一个微信公众号的距离. 假设你说.我根本没有时间学习,不想看书,我仅仅想睡觉.我想你要接着往下看,由于.谁 ...

  8. 继承的文本框控件怎么响应EN_CHANGE等消息

    继承的文本框控件如何响应EN_CHANGE等消息?我从CEdit继承了一个CMyEdit类,想在这个类里填写它的一些消息.我在消息映射表里写的是MESSAGE_HANDLER(EN_CHANGE, O ...

  9. 【BZOJ2161】布娃娃 扫描线+线段树

    [BZOJ2161]布娃娃 Description 小时候的雨荨非常听话,是父母眼中的好孩子.在学校是老师的左右手,同学的好榜样.后来她成为艾利斯顿第二代考神,这和小时候培养的良好素质是分不开的.雨荨 ...

  10. 2-3-4树的java实现

    一.什么是2-3-4树 2-3-4树和红黑树一样,也是平衡树.只不过不是二叉树,它的子节点数目可以达到4个. 每个节点存储的数据项可以达到3个.名字中的2,3,4是指节点可能包含的子节点数目.具体而言 ...