day 40 文本属性 常用css属性 定位
一. 浮动的特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"字围"效果
4.收缩的效果
前提是标准文档流,margin的垂直方向会出现塌陷问题。 如果盒子居中:margin: 0 auto;如果盒子浮动了,margin: 0 auto;就不起任何作用 需求:让浮动的盒子居中
给浮动盒子,加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden; 设置该盒子margin: 0 auto;
.box{
width: 400px;
height: 300px;
background-color: red;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
float: left;
}
文本水平居中:text-align:center;
文本垂直居中:行高=盒子的高度 盒子如果浮动了,那么垂直方向上不会出现塌陷问题。 css中有三种方式让盒子'脱表'
1.浮动float
2.绝对定位
3.固定定位
二、常用css的属性
中心对齐
text-align: center;
两端对齐
text-align: justify;
首行缩进
text-indent: 2em; em代表1个字
字体大小
font-size: 14px;
修饰文本
text-decoration
none;没有线
underline;有下划线
文本的行高
line-height: 设置文本居中的方式
单行文本垂直居中: line-height = height 多行文本居中:
行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px; ff:
15*16+15 255
background-repeat:no-repeat
背景图片将仅设置显示一次
3.background-image
精灵图技术
四、定位
默认:position:static; 静态定位 position: relative; 相对定位
absolute;绝对定位
fixed;固定定位 - ralative:
如果仅仅设置标准文档流的盒子为相对定位,那么跟普通的盒子没有任何区别
不脱标
参考点:
相对于原来的位置 形影分离 作用:
1.层级提高,做压盖(不建议)
2.布局方案 "子绝父相"的参考 - absolute 1.脱标:不占位置
2.层级提高 参考点:
单个盒子
如果以top描述,是以页面的左上角为参考点(跟浏览器的左上角区分) 如果以bottom描述,是以浏览器的左上角为参考点 父子盒子之间 如果父辈盒子设置相对定位。子盒子设置绝对定位,以父辈盒子的0,0为参考点
day 40 文本属性 常用css属性 定位的更多相关文章
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...
- 常用css属性记录
CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: ...
- 常用css属性拓展
text-overflow:clip | ellipsis(默认值:clip)clip:当内联内容溢出块容器时,将溢出部分裁切掉.ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). ...
- 界面设计常用CSS属性
CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体 ...
- css基础--常用css属性01
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- 常用css属性总结
边框修饰:border------>top,bottom,left,right上下左右边框 分为:color,类型style{ groove,dashed,ridge,solid}一个值---- ...
- css属性(常用属性整理)
摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...
随机推荐
- SpringBoot与MybatisPlus3.X整合之动态表名 SQL 解析器(七)
pom.xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId& ...
- Mycat分布式数据库架构解决方案--配置defaultAccount属性报错解决方案
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 该文章 ...
- 【MySQL】MySQL数据类型
MySQL表数据存储大小说明 MySQL中规定,任何一条记录(数据表中每行数据)理论上的最大存储容量为 2^16 - 1 (Bytes) = 65535字节. MySQL数据类型思维导图 MySQL数 ...
- abp中将SqlServer切换为MySQL
一.移除默认SQL Server相关包 在EntityFrameworkCore项目下移除包Microsoft.EntityFrameworkCore.SqlServer.Microsoft.Enti ...
- Vue中错误图片的处理
在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片, 在这里写了两种方法, 第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值. 第二种问题, ...
- jieba分词基础知识
安装:pip install jieba 导包:import jieba 精确模式:试图将句子最精确地切开,适合文本分析(很像人类一样去分词) jieba.cut(字符串) --> 返回生成器 ...
- CSPS模拟 56
前十基本都A题了,只有$Dybala$.$Naito$和弱比$yxs$没有A题 $T1 Merchant$ 明明学过$nth element$但是由于不懂原理导致我用了个鬼畜的${U队}$来维护前$K ...
- Python实现群聊天小程序代码
群聊服务端 服务端Server.py代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/18 16:05 # @D ...
- 前端Vue中常用rules校验规则
前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...
- C/C++企业链表的实现
首先 先介绍企业链表 和Linux内核链表 和 之前我发的一篇单项链表的区别 结构体变量名是结构体的首地址吗? 这个问题会在待会链表实现中体现!! 答案:有些编译器 支持用结构体变量名做地址的方式但一 ...