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(){ ///// ...
随机推荐
- python-分割url字符串
url = ' http://images.jupiterimages.com/common/detail/27/68/22986827.jpg' url.strip().split('/')[-1] ...
- Azure产品整理
Azure的文档真是够落地,简明易懂. 计算 Linux 虚拟机:为 Ubuntu.Red Hat 等预配虚拟机 Windows 虚拟机 为 SQL Server.SharePoint 等预配虚拟机 ...
- 2019 AI 100 Startups
- 循环控制语句if 、for、case、while
if 循环控制(单分支与多分支) (1)单个判断(单分支循环): if [ 条件判断 ]; then 执行动作 fi if [ 条件判断 ]; then 执行动作 else 执行动作 fi 写入tes ...
- 反射&异常
反射 通过字符串映射或修改程序运行时的状态.属性.方法.python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执 ...
- 卷积,reLu,池化的意义
1.卷积 提取局部特征 2.Relu 留下相关特征,去掉不相关特征,卷积之后的正值越大,说明与卷积核相关性越强,负值越大,不相关性越大. 3.池化 池化的目的: (1)留下最相关的特征,或者说留下最明 ...
- js replace方法第二个参数,远不止你想的那么强大
js replace() 方法,想必大家都不陌生. 定义和用法: replace()方法用于在字符串中用一些字符替换另一些字符,或者替换一个与正则表达式匹配的子串. stringObject.repl ...
- 知识点总结 VUE部分
1.v-show和v-if的区别 v-show 操作的是元素的display属性 v-if 操作的是元素的创建和插入 v-if有更高的开销,而v-show有更高的初始渲染开销,如果需要非常频繁的切换, ...
- Educational Codeforces Round 61 (Rated for Div. 2) E 多重背包优化
https://codeforces.com/contest/1132/problem/E 题意 有8种物品,重量是1~8,每种数量是\(cnt[i]\)(1e16),问容量为W(1e18)的背包最多 ...
- Educational Codeforces Round 57 (Rated for Div. 2) C 正多边形 + 枚举
https://codeforces.com/contest/1096/problem/C 题意 问是否存在一正多边形内三点构成的角度数为ang,若存在输出最小边数 题解 三点构成的角是个圆周角,假设 ...