给一个div加上边框，为了让他能看到边框，给他加上颜色

border: 2px solid;

border-color: #00a1e9;

solid表示实线边框。没有这个看不到边框。

{border-style: solid}

例子：

<html>

<head>

<style type="text/css">

p.dotted {border-style: dotted}

p.dashed {border-style: dashed}

p.solid {border-style: solid}

p.double {border-style: double}

p.groove {border-style: groove}

p.ridge {border-style: ridge}

p.inset {border-style: inset}

p.outset {border-style: outset}

</style>

</head>

<body>

<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>

</body>

</html>

2，给div中加上文字，为了让文字在一行出现：

规定文字不换行：white-space:按钮就是利用这个属性使得按钮里的文字在一条线上。

{

  white-space: nowrap

  }

3，为了使得边框离文字有距离，可设置padding，按钮也是利用这个。

padding: 4px 8px;

4，使得文章成为块！此元素将显示为块级元素，此元素前后会带有换行符

display:block

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

5，

overflow 属性

设置 overflow 属性：

div

  {

  width:150px;

  height:150px;

  overflow:scroll;

  }

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

position 属性

absolute  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed  生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative  生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

right 属性

把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：

img

  {

  position:absolute;

  right:5px;

  }

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

left同理。

CSS总结：的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. JavaScript中的Array数组详解

    ECMAScript中的数组与其他多数语言中的数组有着相当大的区别,虽然数组都是数据的有序列表,但是与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据.也就是说,可以用数组的第 ...

  2. 安卓 内存泄漏 MemoryAnalyzer

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 需要 获取 root 权限 步骤: 1,使用eclipse 自带的 DDMS 工具分析各线程的内 ...

  3. POJ2234 Matches Game 尼姆博弈 博弈论

    http://poj.org/problem?id=2234 尼姆博弈(Nimm's Game) 指的是这样一个博弈游戏:有任意堆物品,每堆物品的个数是任意的,双方轮流从中取物品,每一次只能从一堆物品 ...

  4. AGC 016 C - +/- Rectangle

    题面在这里! 结合了贪心的构造真是妙啊2333 一开始推式子发现 权是被多少个w*h矩形覆盖到的时候 带权和 <0 ,权都是1的时候带权和 >0,也就是说被矩形覆盖的多的我们要让它尽量小. ...

  5. 【动态规划】POJ3616-Milking Time

    [题目大意] 奶牛Bessie在0~N时间段产奶.农夫约翰有M个时间段可以挤奶,时间段[a,b]Bessie能挤到的牛奶量v.奶牛产奶后需要休息R小时才能继续下一次产奶,求Bessie最大的挤奶量. ...

  6. 【单调队列】POJ2823-Sliding Window

    单调队列经典题之一. [思路] 设置两个单调队列分别记录最大值和最小值.对于每一个新读入的数字,进行两次操作(对于求最大值和最小值中的某一个而言),一是若队首不在滑窗范围内则删去:二是删去队末比当前值 ...

  7. springmvc之文件上传、下载

    1.接收到的是图片的流时 //上传头像 @RequestMapping(value = "/uploadHeadSculpture", method = RequestMethod ...

  8. hdu 4071& poj 3873 & zoj 3386 & uva 12197 Trick or Treat 三分法

    思路: 看到这个题目就发现所需最短时间也就是房子和相遇点的最远距离具有凹凸性,很容易就想到了三分法枚举. 找出所有房子的X坐标的最小最大值作为上下界. 代码如下: #include<stdio. ...

  9. String类的compareTo()和compareToIgnoreCase()

    compareTo()的返回值是int,它是先比较对应字符的大小(ASCII码顺序) 1.如果字符串相等返回值0 2.如果第一个字符和参数的第一个字符不等,结束比较,返回他们之间的差值(ascii码值 ...

  10. 自制DEV皮肤

    1.打开DEV自带的皮肤制作工具 2.创建一个新的皮肤工程[File][New] 3.改变指定控件的颜色,比如背景色 4.改变控件边框的颜色.粗细