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); 可以设置文本的居中 ...
随机推荐
- Jmeter之BeanShell
在Jmeter中各种分类组件中都有相应的BeanShell组件,这里简单的说明一下Beanshell的使用. 一.概念 BeanShell是一种符合Java语法的脚本语言,也有自己的一些特定语法 二. ...
- linux passwd批量修改用户密码
linux passwd批量修改用户密码 对系统定期修改密码是一个很重要的安全常识,通常,我们修改用户密码都使用 passwd user 这样的命令来修改密码,但是这样会进入交互模式,即使使用脚本也不 ...
- Appium 定位
使用过 Appium 的都知道,元素的定位方式有很多种,具体使用哪一种,主要看业务的需要和自己的使用爱好.下面总结一下,Appium 到底有哪些定位方式,定位的元素以下面截图指定的元素为例子: 这 ...
- 42 在Raspberry Pi上安装dlib表情识别
https://www.jianshu.com/p/848014d8dea9 https://www.pyimagesearch.com/2017/05/01/install-dlib-raspber ...
- sql语句优化的30种方法
转载于:https://www.cnblogs.com/Little-Li/p/8031295.html 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的 ...
- Apache Maven 3.6.3配置安装
1.maven 3.5 下载地址:http://maven.apache.org/download.cgi 2.下载了解压到 3.配置环境变量 4.测试看是否安装成功 5.maven配置(全局配置,用 ...
- Oracle中TIMESTAMP时间的显示格式
Oracle中的TIMESTAMP数据类型很多人用的都很少,所以即使最简单的一个查询返回的结果也会搞不清楚到底这个时间是什么时间点. 例如: 27-1月 -08 12.04.35.877000 上午 ...
- Uboot启动流程分析(二)
1.前言 在前面的文章Uboot启动流程分析(一)中,链接如下: https://www.cnblogs.com/Cqlismy/p/12000889.html 已经简单地分析了low_level_i ...
- MongoDB副本集--Secondary节点实例恢复
场景描述 MongoDB副本集中有一台Secondary节点出现RECOVERING的状态 状态如下: arps:RECOVERING> rs.status() { "set" ...
- mysql8 安装
准备工作: 首先安装这些依赖 yum install -y flex yum install gcc gcc-c++ cmake ncurses ncurses-devel bison libaio ...