css 文本属性和字体属性
1.将浮动居中
这需要三个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.Bar{
width: 500px;
height: 500px;
background-color: yellow; }
/*这里利用将在Bar盒子后面加入father子盒子
因为只能放一个 所以会居中 然后在加入一个浮动的盒子
作为father的子盒子根据宽度一样添加进去*/
.father{
width: 100px;
height: 100px;
background-color: cornflowerblue;
overflow: hidden;
margin: 0 auto;
}
/*浮动的*/
.set{
width: 100px;
height: 150px; background-color: darkcyan;
margin: 0 auto;
float: left;
} </style>
</head>
<body>
<div class="Bar">
<div class="father">
<div class="set">
</div>
</div>
</div> </body>
</html>
浮动盒子居中
2.文本属性和字体属性
这里有两个特殊的属性 text 文本 font 字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tst{ width: 100px;
height: 100px;
background-color: darkorchid; /*字体的粗细 没有单位 400以下无效
范围100-900*/
/*font-weight: 900;*/
/*字体的大小*/
/*font-size: 50px;*/
/*文本行高 一行的行高 超过父类
向下*/
/*line-height: 500px;*/
/*文本下划线*/
/*text-decoration: underline;*/
/*文本首行缩进 一个字节14px长度*/
/*text-indent: 28px;*/
/*文本首行1em==14px*/
/*text-indent: 1em;*/
/*字体居中*/
/*text-align:center;*/ } </style>
</head>
<body>
<div class="tst">郭嘉算无遗迹</div> </body>
文本字体
3.关于行高
关于多行文本垂直 这要通过计算由给出的line-height 乘以得出总共几行
再用父类模块剪出总line-height 除以2
最后再用padding 向上加入结果
最后父类盒子长度再减去padding 的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 160px;
font-size: 20px;
background-color: red;
line-height: 40px;
padding-top: 40px;
}
</style>
</head>
<body>
<div>国家国家国家国家国家国家国家国家国家国家国家</div> </body>
</html>
行高
4.关于background
可以引用图片为背景 其他都是知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 1000px;
height: 1250px;
/*background-color: darkorchid;*/
/*这里指可以插入一个颜色 默认最近的*/ /*只允许一个图片*/
background: url(./qqq.jpg);
background-repeat: no-repeat; /*默认是repeat 全部显示*/
/*background-repeat: repeat;*/
/*只在一行显示*/
/*background-repeat: repeat-x;*/
/*只在一竖行显示*/
/*background-repeat: repeat-y;*/
/*固定位置*/
/*background-attachment: fixed;*/
/*横向移动*/
/*background-position-x:0;*/
/*向上移动150px*/
/*background-position-y:-150px ;*/ }
</style> </head>
<body>
<div class="box"> </div> </body>
</html>
知识点
5.关于透明度
background color;rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zq{
width: 200px;
height: 200px;
background-color: rgba(200,25,25,0.1);
}
</style>
</head>
<body>
<div class="zq"></div>
</body>
</html>
透明度
6.定位
相对定位 绝对定位 固定定位
position:reletive
相对定位只是将定位的盒子作为单独的移动 不会影响其他盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
/*可以使用 top left right bottom*/
top: 20px;
left: 100px;
z-index: 5;
}
.box3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
</style>
</head>
<body> <!-- -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> </body>
</html>
relative
绝对定位
绝对定位是将页脚作为原点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
/*这里的距离为离top有40px的是以左上角为坐标原点
进行移动的 而且后面的会覆盖前面的\*/
top:40px;
left:0;
}
.box3{
width: 250px;
height: 200px;
background-color: blue;
position:absolute ;
left: 0 ;
top: 50px;
}
</style>
</head>
<body style="height: 2000px;"> <!-- -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
absolute
7.关于父相子绝的例子
左右框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
.father{
width: 500px;
height: 500px;
background-color: darkorange;
position: relative;
}
.set{
width: 50px;
height: 50px;
line-height: 50px;
text-align:center;
background-color: darkorchid;
color: #ffffff;
position: absolute;
left: 0;
top: 50%;
}
.bar {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
/*字体颜色和背景颜色*/
background-color: darkorchid;
color: #ffffff;
top: 50%;
right: 0; } </style>
</head>
<body>
<div class="father">
<span class="bar"><</span>
<span class="set">></span> </div> </body>
</html>
左右框
css 文本属性和字体属性的更多相关文章
- CSS样式----CSS属性：字体属性和文本属性（图文详解）
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- css 01-CSS属性：字体属性和文本属性
01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...
- python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 文本属性和字体属性,超链接导航栏案例 background
文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...
- python全栈开发day40-浮动的四大特性，浮动带来的问题和解决问题，文本属性、字体属性和颜色介绍
一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- CSS中常用属性之字体属性
1,以下是CSS中常用字体属性: font-family 字体样式 font-size 字体大小 font-size-adjust 为元素规定 ...
- PHP全栈开发（八）：CSS Ⅳ 文本格式及字体
文本系列属性主要是设置文本格式的,例如.... 颜色 body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255); 可以设置文本的居中 ...
随机推荐
- 无法添加符号: 归档没有索引；运行 ranlib 以添加一个
这将告诉您对象文件的格式.如果对象文件是针对不同的平台编译的,则会导致无法为存档创建索引.要纠正这种情况,您需要重新编译这些文件.
- DRF视图功能介绍(2)
本帖最后由 杰哥,我就服你 于 2018-12-20 13:22 编辑 Django rest framework(DRF) D:是一个用于构建Web API强大又灵活的框架,基于Django框架二次 ...
- Mybatis工作原理（九）
mybatis工作流程: (1) SqlSessionFactoryBuilder 从 XML 配置文件或通过Java的方式构建出 SqlSessionFactory 的实例. (2) SqlSess ...
- luoguP4254 [JSOI2008]Blue Mary开公司
题意 李超树裸题,注意一开始截距是\(S-P\). code: #include<bits/stdc++.h> using namespace std; #define ls(p) (p& ...
- Kafka为什么不支持读写分离得原因？-干货
在 Kafka 中,出产者写入音讯.顾客读取音讯的操作都是与 leader 副本进行交互的,从 而结束的是一种主写主读的出产消费模型.数据库.Redis 等都具有主写主读的功用,与此同时还支撑主写从读 ...
- 支付宝AopSdk在dotnet core下的实现
随着项目都迁移到了dotnet core下,阿里的支付宝也需要随着项目迁移.之前在.Net Framework下用到了阿里提供的AopSdk和F2FPay两个程序集,支付宝官方提供的只支持Framew ...
- npm ERR! Cannot read property 'resolve' of undefined
一 .有可能是版本过低,或者软件损坏,重新安装一下试试 地址
- （三十二）golang--面向对象之封装
封装:把抽象出来的字段和对字段的操作封装在一起,数据被保护在内部,程序的其它包只有通过被授权的操作(方法),才能对字段进行操作. 封装的好处: (1)隐藏实际的细节: (2)可以对数据进行验证,保证安 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- python语法01
在某.py文件中调用其他.py文件中的内容. 全局变量的使用. 线程的使用. if name == 'main': 的作用 新建两个python脚本文件 f1File.py ""& ...