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. python读取excel表

    from xlrd import open_workbookimport re #创建一个用于读取sheet的生成器,依次生成每行数据,row_count 用于指定读取多少行, col_count 指 ...

  2. 浏览器局部打印实现，iframe打印

    const handleOk = () =>{ let ele = document.getElementById('printInfor'); let iframe=window.frames ...

  3. tp5文件上传展示

    //接收文件 $file = request()->file('image'); //将文件移动到框架应用根目录/public/uploads/ 目录下 $info = $file->mo ...

  4. 使用 C++ REST SDK 进行网络编程

    安装 C++ REST SDK $ brew install cpprestsdk $ brew install boost $ brew install libressl 创建工程 打开 Xcode ...

  5. maven pom.xml 项目报错

    Failed to read artifact descriptor for org.springframework.boot:spring-boot-starter-web:jar:2.1.0.RE ...

  6. suse linux安装lrzsz

    1.从下面的网站下载 lrzsz-1.12.20.tar.gz http://www.filewatcher.com/m/lrzsz-0.12.20.tar.gz.280938.0.0.html 2. ...

  7. 2017-11-03 Fr OCT 球体积的导数为球表面积

    上学期学立体几何时注意到这一点.去问林老师,没听明白(写完笔记后发现林老师讲得是对的,惭愧).今天下午考历史的时候突然想起来. 除了球体积的导数为球表面积外,还注意到圆体积的导数为圆周长.今天中午看w ...

  8. Junit介绍以及使用

    在介绍junit之前,把一些知识点提前了解一下 单元测试是一个对单一实体(类或方法)的测试. 测试用例(Test Case)是为某个特殊目标而编制的一组测试输入.执行条件以及预期结果,以便测试某个程序 ...

  9. Redis 高级特性

    Redis 数据结构 Redis 常用的数据类型主要有以下五种: String Hash List Set Sorted set Redis 内部使用一个 redisObject 对象来表示所有的 k ...

  10. 220. Contains Duplicate III 数组指针差k数值差t

    ［抄题］: Given an array of integers, find out whether there are two distinct indices i and j in the arr ...