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); 可以设置文本的居中 ...
随机推荐
- Jenkins之插件Publish HTML reports的使用
前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTM ...
- 扎西平措 201571030332 《面向对象程序设计（java）课程学习进度条》
<2019面向对象程序设计(java)课程学习进度条> 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序 阅读或编译让我 第一周 20/ ...
- HTML与CSS学习笔记(6)
1.flex弹性盒模型 在父容器中添加display:flex;把父容器变为弹性盒模型 作用(写)在flex容器上 作用(写)在flex子项上 flex-direction order flex-wr ...
- Chatbot：
讲清了一些最最基本的概念 - Intents(意图)和Entities(关键字) - 基于意图(Intent-based)的对话 和 基于流程(Flow-based)的对话 聊天机器人教学:使用Di ...
- SQL 错误: ORA-65096: 公用用户名或角色名无效 65096. 00000 - "invalid common user or role name" *Cause: An attempt was made to create a common user or role with a name
在Oracle SQL Developer中,试图创建RD用户时,出现了如下的错误: 在行: 上开始执行命令时出错 - 错误报告 - SQL 错误: ORA: 公用用户名或角色名无效 . - &quo ...
- 【转】pywinauto教程
一.环境安装 1.命令行安装方法 pip install pywinauto==0.6.7 2.手动安装方法 安装包下载链接:pyWin32: python调用windows api的库https:/ ...
- Linux socket program Demo1(client & server)
client and server Demo of socket. client send data to server. server send data to client. // this ...
- HTTPS 相关问题
什么是 HTTPS? HTTPS,是指超文本传输安全协议(Hypertext Transfer Protocol Secure),是一种在 HTTP 协议基础上进行传输加密的安全协议,能够有效保障数据 ...
- influxdb安装和学习
安装 https://docs.docker.com/samples/library/influxdb/ 先启动,创建admin用户 docker run -d --name influxdb -p ...
- [STL] UVA 10815 安迪的第一个字典 Andy's First Dictionary
1.set 集合 哦....对了,set有自动按照字典序排序功能..... 声明和插入操作 #include <cstdio> #include <vector> #inclu ...