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. QQ第三方登录（完结篇）

    书接上回,上回说到:这篇是代码篇 首先我们先来看一下我的母鹿(目录)吧 Connect2.1  是我们从下载的SDK,内容包含 其他文件在配置之后全部删除了! index.html 是我们点击登陆的页 ...

  2. day44前端开发1之html基础

    web前端开发1一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签:由< ...

  3. Python 爬虫 Vimeo视频下载链接

    python vimeo_d.py https://vimeo.com/228013581 在https://vimeo.com/上看到稀罕的视频 按照上面加上视频的观看地址运行即可获得视频下载链接 ...

  4. java的环境配置

    java的安装 1,进入官网  https://www.oracle.com/index.html 2.Menu -> Downloads -> java ->  all Java ...

  5. pandas 存取数据小笔记

    import pandas as pd 1.   读取和保存 csv文件 #读 df = pd.read_csv(read_file_path, header=0) # 其中read_file_pat ...

  6. Http的那些事: Content-Type

    Content-Type 无疑是http中一个非常重要的属性了, request 中可以存在, 也可以不存在( request的Content-Type 默认是 */*, 实际上呢, 如果不存在Con ...

  7. java编程思想（1）--对象导论

    对象导论: 1.1 抽象过程 所有的语言都有抽象机制,抽象是解决复杂问题的根本方法.例如:汇编语言是对底层机器的轻微抽象.命令式语言(如:FORTRAN.BASIC.C)又是对汇编语言的抽象. jav ...

  8. 1. jdk内存配置

    -Xms256m -Xmx512m -XX:PermSize=256m -XX:MaxPermSize=512m

  9. __str__ 和 __repr

    #1 默认类里面默认提供的__str__方法,是返回类的内存地址class foo: def __init__(self): pass #2 修改类里面默认提供的__str__方法class fun: ...

  10. JUC详解

    一.Java多线程 -- JUC包源码分析1 -- CAS/乐观锁 乐观锁其实就是不加锁,用CAS + 循环重试,实现多个线程/多个客户端,并发修改数据的问题 使用AtomicStampedRefer ...