Css内容：

常用样式：字体、颜色、背景。。。

字体：大小、颜色、粗细、字体

Text-decoration：文本修饰{overline 上

Underline 下

Line-throung 中}

Text-indent：缩进

字体：

Font-family：

Font-style：italic

Font-size：

Font-weight：加粗

List-style-type： none（list-style：square url）取消图标

Background-image：图片

Line-height：设置居中  例30px

Cursor：设置鼠标光标形式

Background-repeat：no-repeat：不平铺

Background-position：位置

布局：浮动、定位、标签特性

Float：给要浮动的元素加父标签  设定父标签的宽高

img

{

    float:right;

}

Position： fixed  relative  absolute

Top  bottm   left  right：100px

Fixed：相对于窗口定位   定死  不在乎是否嵌套

没有本身位置

p.pos_fixed

{

    position:fixed;

    top:30px;

    right:5px;

}

Absolute：相对于标签定位body   在乎是否嵌套

相对于最近的有position属性的父标签定位

最终标签是body      没有本身位置

h2

{

    position:absolute;

    left:100px;

    top:150px;

}

 Relative：相对自身定位 位置还有 常用在微调上和父标签

　　

清除浮动：

<div style=”clear:both”></div>

<div id=”nav”>

.text_line

{

    clear:both;

}

隐藏Display：none   标题直接没有  位置没有

Visibility：hidden   标题没有  位置有

标签盒子模型：边距、边框

Box-sizing：border-box  不管像素多少 所占距离不变

Padding-top-bottom-left

Border-color- style -width

border:5px solid red;

Border：1px solid red；

Border-left：1px solid black

单独设置各边：

p

{

    border-top-style:dotted;

    border-right-style:solid;

    border-bottom-style:dotted;

    border-left-style:solid;

}

Margin：清除边框外的区域，外边距是透明的

Border-top-style：dotted

Border-radius:圆角

动画：旋转、渐变

子标签会继承父标签的样式（不是所有的样式都会被继承）

Line-height：垂直居中  行高（用的最多是导航）

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;

    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;
    • 四面边框是 dotted

盒子模型宽高实现：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

div {

    background-color: lightgrey;

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

</style>

</head>

<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>

</html>

运行结果：

css概括2的更多相关文章

  1. css概括

    CSS:美化页面 层叠样式表 修改标签样式 1.分类:内联    内嵌       外部引用 (1)内联: 写在标签里面,以属性的形式表现 属性名为style (2)内嵌:写在head标签里面,以标签 ...

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

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

  3. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  4. MUI学习01-MUI概括、使用前引入CSS及JS

    1.MUI含义 目标:追求性能体验,追求原生UI感觉 重要特征:轻量 优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分 ...

  5. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. HTML+CSS知识点总结

    转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...

  8. css书写规范及特殊样式

    1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...

  9. css布局模型

    ---恢复内容开始--- 在清楚了CSS盒模型的基本概念,盒模型类型,我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是CSS最基本,最核心的概念.但布局模型是建立在盒型基础之上,又不同 ...

随机推荐

  1. Bootstrap关闭当前页

       function doBack() {        var index = parent.layer.getFrameIndex(window.name);        parent.lay ...

  2. 如何在ORACLE中查询某一用户下所有的空表

    先分析表 select 'analyze table '||table_name||' compute statistics;' from user_tables; 把查询结果依次执行 把所有表分析一 ...

  3. expect login ssh

    #!/usr/bin/expect -f set pwffd [lindex $argv 0] spawn ssh cmesvr2i expect "*password:" sen ...

  4. django之signal机制再探

    djangobb中的signal post_save信号调用send函数时,为什么它会对与topic.post相关的其他models进行修改?同一个信号,例如post_save(保存过后的处理),是所 ...

  5. Jquery中父，子页面之间元素获取及方法调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  6. faster rcnn源码阅读笔记1

    自己保存的源码阅读笔记哈 faster rcnn 的主要识别过程(粗略) (开始填坑了): 一张3通道,1600*1600图像输入中,经过特征提取网络,得到100*100*512的feature ma ...

  7. Django提交文件的方式

    以上传图片为列, 提交图片文件后能在不刷新页面的前提下显示图片 首先写出一个简单的提交文件的页面: <h>文件上传</h> 选择文件<input type="f ...

  8. 突然发现用PHP做多条件模糊查询很简单

    原文:http://blog.csdn.net/suleil1/article/details/49471099 所使用的方法:$sqlArr=array();array_push();implode ...

  9. EasyUI datagrid单元格文本超出显示省略号，鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  10. RHCS(概念篇)

    一. 什么是RHCS RHCS是Red Hat Cluster Suite的缩写,也就是红帽子集群套件,RHCS是一个能够提供高可用性.高可靠性.负载均衡.存储共享且经济廉价的集群工具集合,它将集群系 ...