CSS基础知识总结二
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<div style="font-size: 48px">这是div加大字体</div>
<div>这是div正常字体</div>
<div style="font-weight: bolder">这是div加粗</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<!--style="margin: 0"代表使div边框紧贴上边缘和左边缘-->
<body style="margin: 0">
<div style="width: 100px; height: 100px;border: 1px red solid;"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<!--style="margin: 0"代表使div边框紧贴上边缘和左边缘-->
<body style="margin: 0">
<div style="width: 100px; height: 100px;border: 1px red solid;"></div><!--左上角的一个边框为红色的正方形-->
<div style="width: 100px; height: 100px; border: 1px blue solid">1</div><!--一个边框为蓝色的左上角有一个1的正方形-->
<div style="width:100%;height:100px;border: 1px pink solid; text-align: center; line-height: 100px">1</div><!--边框为粉色的宽度占满屏幕的整行的长方形，1字居住；heigh代表div的高度，line—height代表文字位于上下水平线的高度加起来为100px（所以为100px的高度平均分配显示）-->
<div style="width: 100px;height:100px;border: 1px pink solid; text-align: center; line-height: 100px">1</div><!--一个边框为粉色的正中间有一个1的正方形-->
</body>
</html>
float：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<div style="border: 1px blue solid">
<div style="width:80px; height: 48px; background-color: red ;float:left"></div>
<div style="width :80px;height: 48px; background-color: blue;float: left"></div>
<div style="width :80px;height:48px;background-color: pink;float: left;"></div> </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<div style="border: 1px blue solid">
<div style="width:80px; height: 48px; background-color: red ;float:left"></div>
<div style="width :80px;height: 48px; background-color: blue;float: left"></div>
<div style="width :80px;height:48px;background-color: pink;float: left;"></div>
<!--清除浮动效果-->
<div style="clear: both"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--1.float的div如果超过100宽度则自动换行-->
<!--2.float 不可以重叠-->
<div style="border: 1px blue solid">
<div style="width:80px; height: 48px; background-color: red ;float: left;"></div>
<div style="width :80px;height: 48px; background-color: blue;float:left;"></div>
<div style="width :80px;height:48px;background-color: pink;float:right;"></div>
<!--清除浮动效果-->
<div style="clear: both"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<div style="height: 48px; width:80%;background-color: #7FFFD4;float:left;"></div>
<div style="height: 48px; width: 20px;background-color: red;float:left;"></div>
</body>
</html>
display属性：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--display:inline 块级标签变为内联标签-->
<div style="display: inline;background-color:red ">123123123123</div>
<span style="width:80px;height:80px;background-color: #0000CC;display: block"></span>
<span style="width:80px;height:80px;background-color: #0000CC;display: inline-block"></span>
</body>
</html>
内外边距：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--外边距 不改变自身，改变的是与外层之间的距离-->
<div style="width: 100%; height:80px;border: 1px blue solid">
<div style="width:100%;height: 40px;background-color: #FF0000;margin-top: 10px"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<!--内边距 扩展自身-->
<div style="width: 100%; height:80px;border: 1px blue solid">
<div style="width:100%;height: 40px;background-color: #FF0000;padding-top: 10px"></div>
</div>
</body>
</html>
position：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--position：fixed存在时可以不需要width，直接指定-->
<div style="height: 48px;background-color: #7FFFD4;position:fixed;top:0 ;right: 0;bottom: 0;left: 0;"></div>
<div style="height: 10000px;"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--自动居中-->
<div style="width:200px;height:200px;border:1px red solid;margin:0 auto;position: relative">
<div style="width: 30px; height: 30px;background-color: #0000CC;position: absolute;bottom: 0;right: 0;"></div>
<div style="width: 30px; height: 30px;background-color: #0000CC;position: absolute;bottom: 0;left: 0;"></div>
<div style="width: 30px; height: 30px;background-color: #0000CC;position: absolute;left: 0;top: 0;"></div>
<div style="width: 30px; height: 30px;background-color: #0000CC;position: absolute;top: 0;right: 0;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--style="cursor: pointer"鼠标滑到按钮处变小手-->
<div><input type="button" value="按钮"style="cursor: pointer"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面-->
<div style="width: 100px; height:48px;border: 1px red solid;position: relative">
<div style="width: 100px;height: 48px;position: absolute;background-color: #0000CC;z-index: 10"></div>
<div style="width: 100px;height: 48px;position:absolute;background-color:pink;z-index: 9"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--hidden 根据div的大小进行切图，只取左上角的图片-->
<!--auto 自动增加滚动条，好处是如果图片小于div的话不会出现滚动条-->
<!--scroll 主动增加滚动，无论是否超过div的宽和高-->
<!--<div style="width: 100px;height:100px;overflow:hidden"></div>-->
<!--<div style="width: 200px;height:200px;overflow:auto"></div>-->
<div style="width: 200px;height:200px;overflow:scroll"></div>
<img src="c1.css">
</body>
</html>
<!--可切图时使用-->
<div style="width: 20px;height: 20px;border: 1px red solid;margin: 0 auto;background-image: url('hu.png');background-position-x: 1px;background-position-y: 1px;"></div>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
<style>
.c1{
width: 20px;
height: 20px;
border: 1px red solid;
margin: 0 auto;
background-image: url('timg.jpg');
background-position-x: 1px;
background-position-y: 1px
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>天蓝蓝</title>
</head>
<body>
<!--当背景图不够div的大小时，它会横向 纵向 堆叠-->
<!--<div style="width: 200px;height: 200px;border: 1px red solid;background-image: url('logo.jpg')"></div>--><!--铺满整个div-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('bg.png')"></div>-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('logo.jpg')"></div>--><!--铺满整个div-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('logo.jpg');background-repeat: no-repeat"></div>--><!--图片只在左上角展示一个-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('logo.jpg');background-repeat: repeat-x"></div>--><!--图片平铺x轴-->
<!--<div style="width: 100%;height: 1000px;border: 1px red solid;background-image: url('logo.jpg');background-repeat: repeat-y"></div>--><!--图片平铺y轴--> </body>
</html>
CSS基础知识总结二的更多相关文章
- HTML/CSS基础知识（二）
Q:HTML5是什么?为什么要用HTML5?有什么新特性?移除了哪些元素? HTML5是HTML的最新版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是替换1999年制定的HTML4.0 ...
- CSS基础知识笔记(二)之选择器
CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...
- (转)第一天 XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
随机推荐
- JS - 事件循环和任务队列
栈.堆和队列 栈:函数调用形成栈 堆:对象的内容分配在堆中 队列:一个 JavaScript 运行时包含了一个待处理的消息队列.在事件循环期间依次处理队列中的消息 事件循环 之所以称之为事件循环,是因 ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- FineTuning机制的分析
FineTuning机制的分析 为什么用FineTuning 使用别人训练好的网络模型进行训练,前提是必须和别人用同一个网络,因为参数是根据网络而来的.当然最后一层是可以修改的,因为我们的数据可能并没 ...
- vue组件生命周期
分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeM ...
- React-onsenui之RouterNavigator组件解读
var index = 1;// index的最外层初始值,亦是全局 var MyPage = React.createClass({ //构成工具栏组件,根据hasBackButton的值为back ...
- [19/05/05-星期日] JDBC(Java DataBase Connectivity，java数据库连接)_mysql基本知识
一.概念 (1).是一种开放源代码的关系型数据库管理系统(RDBMS,Relational Database Management System):目前有很多大公司(新浪.京东.阿里)使用: (2). ...
- Netty解码的艺术
什么是拆包/粘包: TCP 粘包/拆包: TCP 是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP 作为传输层协议并不了解上层业务数据的具体含义,它会根据TCP 缓冲区的实际情况进行数 ...
- 单片机BootLoader
http://bbs.elecfans.com/jishu_467138_1_1.html 作用:app程序,固件程序升级
- SA & SAM
后缀数组SA \(sa[i]\)与\(rk[i]\) \(sa[i]\) 表示排名为 \(i\) 的后缀是哪一个(在原串中开头位置). \(rk[i]\)(或\(rank[i]\))表示开头位置是 \ ...
- [BZOJ 1483] [HNOI2009] 梦幻布丁 (线段树合并)
[BZOJ 1483] [HNOI2009] 梦幻布丁 (线段树合并) 题面 N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1 ...