css概括2
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的更多相关文章
- css概括
CSS:美化页面 层叠样式表 修改标签样式 1.分类:内联 内嵌 外部引用 (1)内联: 写在标签里面,以属性的形式表现 属性名为style (2)内嵌:写在head标签里面,以标签 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- MUI学习01-MUI概括、使用前引入CSS及JS
1.MUI含义 目标:追求性能体验,追求原生UI感觉 重要特征:轻量 优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分 ...
- 更愉快的书写CSS
我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- HTML+CSS知识点总结
转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...
- css书写规范及特殊样式
1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...
- css布局模型
---恢复内容开始--- 在清楚了CSS盒模型的基本概念,盒模型类型,我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是CSS最基本,最核心的概念.但布局模型是建立在盒型基础之上,又不同 ...
随机推荐
- redis集群相关
1.主从数据库配置 为master数据库添加slave数据库只需要在从数据库的配置中添加配置: slaveof 主数据库地址 主数据库端口 当然,也可以通过命令: redis-server --por ...
- Python高级技巧：用一行代码减少一半内存占用
我想与大家分享一些我和我的团队在一个项目中经历的一些问题.在这个项目中,我们必须要存储和处理一个相当大的动态列表.测试人员在测试过程中,抱怨内存不足.下面介绍一个简单的方法,通过添加一行代码来解决这个 ...
- [java,2017-05-16] java中清空StringBuffer的方法以及耗费时间比较
java中清空StringBuffer的方法,我能想到的有4种: 1. buffer.setLength(0); 设置长度为0 2. buffer.delete(0, buffer.length() ...
- rpc调用过程
在openstack中,各个组件之间的调用遵循RESTful风格,而组件内部各服务之间的相互调用采用rpc远程调用,比如nova-conductor和nova-compute rpc原理: 首先了解什 ...
- gdb 使用
2018年7月27日21:05:16 —— 多进程调试 1.follow_fork_mode 作用:在fork之后跟随父进程还是子进程 可以使用 show follow_fork_mode查看再for ...
- Jquery中addClass方法不起作用的解决方案
selected类是要在点击后添加上去的新样式,在点击后,发现没有变化,打开开发者工具,发现selected类已经添加成功了. 在这里没有显示成功的主要原因是后添加的样式表优先级更低,我暂时不清楚具体 ...
- python读取excel表
from xlrd import open_workbookimport re #创建一个用于读取sheet的生成器,依次生成每行数据,row_count 用于指定读取多少行, col_count 指 ...
- Win32API标准模板
#include<Windows.h> LRESULT CALLBACK WndProc //处理发送到窗口的消息的应用程序定义的函数.wndproc类型定义指向此回调函数的指针. //W ...
- RANSAC介绍（Matlab版直线拟合+平面拟合）
https://blog.csdn.net/u010128736/article/details/53422070
- 最适合入门的Laravel中级教程(三)表单验证
做开发有个原则是永远不能信任用户输入的数据: 即便前端已经做了验证: 在后端 php 也必须要再次验证: laravel 为表单验证提供了强大且简单的方案: 创建示例路由: routes/web.ph ...