day 46
CSS样式操作
给字体设置长宽
只有块级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yeah</title>
<style>
div {
width: 200px;
height: 100px;
}
span {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
div
</div>
<span>span</span>
</body>
</html>
字体颜色
color后面可以跟多种颜色数据
- 颜色英文：
red rgb(1,1,1)：可以利用截图软件获取三基色数字,数字范围只能是0~255- 直接使用 pycharm 提供的取色器
rgba(128,128,128,0.4)：最后一个数字可以调节颜色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 48px;
font-weight: lighter;
/*color: red;*/
/*color: rgb(156,59,24);*/
/*color: #c3ff69;*/
color: rgba(61,94,86,0.7);
}
</style>
</head>
<body>
<p>
鹅鹅鹅，曲项向天歌。
</p>
</body>
</html>
语义
a {
text-decoration: none;
}
取消a标签默认的下划线
背景图片
默认是铺满整个区域
通常一个页面上的一个个小图标，并不是单独的，而是通过一个非常大的图片，该图片上有网址所用到所有的小图标。
通过控制背景图片的位置，来显示不同的图标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YEAH</title>
<style>
#d1 {
height: 800px;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
background-attachment: fixed;
}
</style>
</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>
边框
后面跟三个参数
颜色，字体，样式
可以单独设置：样式，颜色，粗细
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以单独设置某一边的样式
border-top: 3px solid red;
border-left: 1px dotted green;
border-right: 5px dashed blue;
border-bottom: 10px solid pink;
也可以简写统一设置
display
inline 将块级标签变成行内标签
block 能够将行内标签设置成长宽和独占一行
inline-block 即可以设置长度，也可以在一行展示
display:none 隐藏标签，并且标签原来占的位置也消失了
visibility:hidden 隐藏标签，但是标签原来的位置还在
盒子模型
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离)
2.快递盒盒子的厚度(边框border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离)
4.物品的大小(文本大小)
margin: 10px; 只写一个参数，上下左右全是
margin: 10px 20px; 第一个控制的是上下，第二个则是左右
margin: 10px 20px 30px; 第一个控制的是上，第二个是左右。第三个是下
margin: 10px 20px 30px 40px; 第一个控制的是上，第二个是右，第三个是下，第四个是左
margin:0 auto; 左右居中，不能上下居中
浮动(**************)
float
在CSS中，任何元素都可以浮动。
浮动的元素，是脱离正常的文档流(原来的位置会空出来)
浏览器会优先展示文本内容(**********)
浮动带来的影响
会造成父标签塌陷
clear
可清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪一个父标签塌陷了，就给它加clearfix这个类属性值
overflow溢出属性
visible 默认值。内容不会被修改，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow属性的值
定位
所有的标签默认都是静态的，无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置，移动
绝对定位(购物车) absolute
相对于已经定位过(只要不是static都可以 relative)的父标签，再做定位(**************)
固定定位(回到顶部) fixed
相对于浏览器窗口，固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
opacity
既可以调颜色，也可以调字体
day 46的更多相关文章
- 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8 测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...
- 每天一个linux命令（46）：vmstat命令
vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...
- 1Z0-053 争议题目解析46
1Z0-053 争议题目解析46 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 46.What happens when you run the SQL Tuning Adviso ...
- mysql 5.0.46安装配置
http://os.chinaunix.net/a2008/0801/986/000000986346.shtml RPM包和源码包存放位置 /usr/local/src 源码包编译安装位置(pref ...
- LeetCode - 46. Permutations
46. Permutations Problem's Link -------------------------------------------------------------------- ...
- LeetCode39/40/22/77/17/401/78/51/46/47/79 11道回溯题（Backtracking）
LeetCode 39 class Solution { public: void dfs(int dep, int maxDep, vector<int>& cand, int ...
- 分享Kali Linux 2016.2第46周虚拟机
分享Kali Linux 2016.2第46周虚拟机该虚拟机使用Kali Linux 2016.2第46周的64位镜像安装.桌面为Gnome模式.该虚拟机配置如下:(1)支持VMWare 9以上的版本 ...
- 分享Kali Linux 2016.2第46周镜像文件
分享Kali Linux 2016.2第46周镜像文件Kali Linux官网在11月13日发布Kali Linux 2016.2的第46周镜像文件.这次还是保持以往的规模,总共提供了11个镜像文件. ...
- Search Ads 已经在美国区上线 - iOS 移动开发周报（46）
Search Ads 已经在美国区上线 - iOS 移动开发周报(46) 新闻 Search Ads 上线 苹果的 AppStore 搜索广告终于 正式上线了 https://developer.ap ...
- cocos2dx常见的46中+22中动作详解
cocos2dx常见的46中+22中动作详解 分类: iOS2013-10-16 00:44 1429人阅读 评论(0) 收藏 举报 bool HelloWorld::init(){ ///// ...
随机推荐
- leetcode622. 设计循环队列
设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为“环形缓冲器”. 循环队列的一个好处是我们可以利用这个队列 ...
- TP5导入EXCEL到数据库
前期准备工作: 1.下载PHPExcel放到vendor下 2.前端页面: <form action="save" method="post" encty ...
- [Android] Windows 7下 Android studio 安装 Genymotion 来调试 Android 遇到的问题总结
一.下载相关软件 1.Android studio 3.1.4 官网下载地址: https://dl.google.com/dl/android/studio/install/3.1.4.0/and ...
- H5 + 3D + AR/VR 综述
近年来,H5,3D,AR,VR逐步进入人们的视野,H5生动活泼,3D注重视觉效果,AR打造虚实结合,VR则更加注重虚拟现实的产生. 第一部分,案例展示: H5+VR案例: 故事<不要惊慌,没有辐 ...
- oracle--BBED (dump 深入实践三)
一,工具介绍 bbed是Block Browser and Editor(块浏览编辑器)的缩写,它是Oracle数据库在安装时一起附带的工具. 一般此工具倾向于仅作为Oracle内部使用,且Oracl ...
- 应用层协议：HTTP
1. HTTP定义 HyperText Transfer Protocol,超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络 ...
- 【springboot】【jasypt】加密密码
springboot的版本是 Spring Boot :: (v2.1.5.RELEASE) 依赖 <dependency> <groupId>com.github.ulise ...
- linux重定向 null和zero
文件描述符 linux下一切皆文件 文件描述符,是内核为了高效管理已经被打开的文件所创建的索引,用于指向被打开的文件,所有执行I/O操作的系统调用都通过文件描述符; 文件描述符是一个简单的非负整数,用 ...
- Lsyncd实时同步搭建指南
linux文件实时同步: inotify+rsync.sersync.lsyncd工具比较 一.inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify ...
- javascript的对象与字符串相互转换
因为对象不利于网络传输,因此要转换成字符串,转换成字符串之后又要考虑怎么将这个字符串转换回对象,以便取得对象中的属性. 常用的做法是将对象转换为JSON字符串,这里的转换方法也是用的JSON官方提供的 ...