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); 可以设置文本的居中 ...
随机推荐
- 多线程时，请求执行不是按顺序的，可添加Critical Section Controller(临界部分控制器)，执行顺序是固定的，但执行一段时间后，该逻辑器下的请求不再循环，无解ing
- day70_10_16drf组件响应模块，异常模块和序列化模块。
一.解析模块 为什么要配置解析模块? 1)drf给我们通过了多种解析数据包方式的解析类. 2)我们可以通过配置来控制前台提交的哪些格式的数据后台在解析,哪些数据不解析. 3)全局配置就是针对每一个视图 ...
- 关于appium的简单理解
搭建好appium环境后,要学会定位app页面上的元素.下面是2款元素定位工具 uiautomatorviewer -- Android SDK自带的元素定位工具,由Google开发的 Inspe ...
- SpringBoot定时器任务
Spring Boot使用@Scheduled定时器任务 摘要: Spring Boot之使用@Scheduled定时器任务 假设我们已经搭建好了一个基于Spring Boot项目,首先我们要在A ...
- java程序：调用百度api进行情感分析
源码: package com.jeson.ceshi; import java.util.HashMap; import org.json.JSONObject; import com.baidu. ...
- 【2019.8.9 慈溪模拟赛 T1】数论（a）（打表找规律）
莫比乌斯反演 血亏! 比赛时看到这题先写了个莫比乌斯反演,然后手造了几组数据和暴力对拍的时候发现,居然答案就是\(nm\)... 吐槽数据范围太小... 下面给上出题人对此题的解释: 原式的物理意义, ...
- 洛谷P3723 [AH2017/HNOI2017]礼物
吴迪说他化学会考上十分钟就想出来了,太神了%%%不过我也十分钟 但是调了一个多小时啊大草 懒得人话翻译了,自己康吧: 我的室友(真的是室友吗?)最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决 ...
- pymysql的基本使用
序pymysql的语法sql注入问题数据的增删查改 TOC 序 当我们在写程序中需要使用到数据库的时候,尽量在代码层次实现一些限制,例如两张表,我们不再使用外键去关联表与表之间的关系,我们可以在程序层 ...
- Spring Cloud Feign 服务消费调用（三）
序言 Spring Cloud Netflix的微服务都是以HTTP接口的形式暴露的,所以可以用Apache的HttpClient或Spring的RestTemplate去调用 而Feign是一个使用 ...
- Java自学-集合框架 Collection
Java集合框架 Collection Collection是一个接口 步骤 1 : Collection Collection是 Set List Queue和 Deque的接口 Queue: 先进 ...