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. python3：实现字符串的全排列（有重复字符）

    抛出问题 求任意一个字符串的全排列组合,例如a='123',输出 123,132,213,231,312,321. 解决方案 #字符串任意两个位置字符交换 def str_replace(str, x ...

  2. 【FZSZ2017暑假提高组Day2】圆盘时钟

    [问题描述] 作为出题人的小Z相信大家对上图这样的圆盘时钟都不会陌生——在理想圆盘时钟上,秒针每一分钟转一圈,分针每一小时转一圈,时针每12小时转一圈,它们均是匀速转动的,在0点时三条针均指向表盘上的 ...

  3. Sql Server数据库之identity(自增)

    一.identity的基本用法 1.identity的含义: identity表示该字段的值会自动更新,通常情况下,不允许直接修改identity修饰的字段,否则编译会报错 2.基本语法 列名  数据 ...

  4. jquery中的callbacks之我见

    callbacks是jquery的核心之一. 语法如下: jQuery.Callbacks( flags )   flags 类型: String 一个用空格标记分隔的标志可选列表,用来改变回调列表中 ...

  5. 关于spfa

    关于spfa的一些事宜.... 刚开始学的时候只会跑最短路,代码都是背下来的.以下是背的代码... inline void spfa(int s) { queue<int>q;q.push ...

  6. Linux ssh命令

    SSH(远程连接工具)连接原理:ssh服务是一个守护进程(demon),系统后台监听客户端的连接,ssh服务端的进程名为sshd,负责实时监听客户端的请求(IP 22端口),包括公共秘钥等交换等信息. ...

  7. spring cloud 总结

    Finchley版本Spring Cloud Finchley; Spring Boot 2.0.3 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)(Fin ...

  8. python的条件语句

    Python程序语言指定任何非0和非空(null)值为true,0 或者 null为false. Python 编程中 if 语句用于控制程序的执行,基本形式为: if 判断条件: 执行语句…… el ...

  9. Codeforces Round #499 (Div. 2)

    Codeforces Round #499 (Div. 2) https://codeforces.com/contest/1011 A #include <bits/stdc++.h> ...

  10. laravel简书(2)

    用户注册 public function register() {         //验证         $this->validate(\request(),[             ' ...