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); 可以设置文本的居中 ...
随机推荐
- pushgateway
下载pushgateway wget https://github.com/prometheus/pushgateway/releases/download/v0.9.0/pushgateway-0. ...
- Appium左右、上下滑动（Java）
网上很多文章都说用swipe来左右滑动,你把代码一贴,结果报错,看半天,原来是java-client中swipe早就被废除了!!!下面介绍一种Java写法来左右上下滑动: 首先,创建一个Swipe类 ...
- day45_9_4前端（2）css
一.css的三种css导入: 1.在标签中内部定义(不推荐). 2.在head中的style总定义样式. 3.使用link链接外部的css文件. <!DOCTYPE html> <h ...
- python名片 项目
---恢复内容开始--- 综合应用 —— 名片管理系统 目标 综合应用已经学习过的知识点: 变量 流程控制 函数 模块 开发 名片管理系统 系统需求 程序启动,显示名片管理系统欢迎界面,并显示功能菜单 ...
- Python中文注释报错的解决方法
在Python的程序中加了中文注释会报错 解决方法是:在程序的最开始位置加入 # -- coding: utf-8 --
- 【2019.8.6 慈溪模拟赛 T2】树上路径（tree）（Trie）
从暴力考虑转化题意 考虑最暴力的做法,我们枚举路径的两端,然后采用类似求树上路径长度的做法,计算两点到根的贡献,然后除去\(LCA\)到根的贡献两次. 即,设\(v_i\)为\(i\)到根路径上的边权 ...
- 大话OI
本文将收录一切我认为对我十分有帮助的他人的博文以及我认为有价值的我自己的原创文章. 引言 有人说:程序=算法+数据结构,所以OI=程序=算法+数据结构. 在我看来,这句话的前半句是对的,但后半句则有本 ...
- IPv6 邻居状态迁移
- consul实现kubernetes-1.15集群master的高可用访问实现
1.准备consul环境,参考我之前的博客实现或参考consul的官网部署最新的consul. 2.本次测试使用的是kubernetes-1.15.0 3.初始化集群 1)准备初始化文件 contro ...
- python实现词云
一.安装使用命令[pip install wordcloud]安装词云 二.参数使用了OpenCV的数据格式进行读取,字体可以多试几种 def create_wordcloud_pic(): stop ...