文档流&文字&CSS常用命令
文档流
- 文档流就是文档内元素
流动
方向
流动方向
内联元素从左往右流
,宽度不够,之字形,且元素会被截断块元素从上往下流动
,一排一排
注意事项
- 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断
若想打断上述联结,请使用css属性
/*想打断的内联元素*/{
word-break: break-all;
display: inline-block;
}
脱离文档流
- 类似悬浮在页面上一样
- position: fixed;
- position: absolute;
关于字体
- 一般,页面默认字体大小16px
- 字体一般都分为
上部
、中部
、下部
文字(汉字、西文)都相对基线(下部)对齐 - 不同字体有自己规定的建议行高,可以自行
line-height
规定
CSS常用命令
字体相关
设定字体样式
/*各类选择器*/{
font-family: kai;
}字体加粗
/*各类选择器*/{
font-weight: bold;
}字体大写
/*各类选择器*/{
text-transform: uppercase;
}
背景相关
背景位置与自适应
/*各类选择器*/{
background-position: center center;/*水平方向*/ /*垂直方向*/
background-size: cover;/*背景自适应*/
background: url(背景图片地址);
}
设定内外边距padding
margin
/*各类选择器*/{
padding: 10px 20px 30px 40px;/*上 右 下 左*/
margin: 10px 20px 30px 40px;/*上 右 下 左*/
}
/*各类选择器*/{
padding: 10px 30px;/*上 右 下 左*/
margin: 10px 30px;/*上下 左右*/
}
margin
甚至可以调成负值,往反方向移呗- 内联元素
左右 padding
有用,上下 padding
不影响页面布局,位置不变。可以设置css:display: line-block;
,使上下左右padding都生效。
position
定位
(详细请阅读:https://developer.mozilla.org...)(๑•̀ㅂ•́)و✧
/*各类选择器*/{
position: relative/absolute/fixed/sticky/static;
}
fixed 元素的宽度会自动缩成最小、最紧凑的宽度
可以使用 width height 调整大小
可以使用 top left right bottom 调整位置
可以使用 left: 0; right: 0; 来使元素充满<body>
absolute 可以设置子元素 position: absolute;
父元素position: elative;
子元素相对父元素绝对定位
子元素居中
水平居中
/*想要子元素居中的元素*/{
text-align: center;
}垂直居中
/*使用vertical-align要求父元素必须有行高,如果没有的话,一定要手动添加:line-height: ;*/ /*想要居中的子元素*/{
verticle-align: center;
}使内联元素在页面中居中:用一个块元素包着它,然后加上css:
<div>
<span></span>
</div> div{
text-align: center;
}设置子元素高度
height: 100%;
,在父元素上加上上下等量的 padding
<div>
<span></span>
</div> div{
padding: 10px;
} span{
height: 100%;
}使用flex布局:左右居中,垂直居中。在父元素上加上如下 css:
/*某父元素*/{
display:flex;
align-items:center;
justify-content:center;
}
边框
边框圆角
/*想要圆角边框的元素*/{
border: 1px solid red; //设置元素边框
border-radius: 30px; //设置边框圆角30px
}
图标
- 可以登录网站:http://www.iconfont.cn/,添加网站生成的
<svg>
到 html 里 给
<svg>
添加 css属性改变样式svg{
width:
height:
fill: /*颜色*/
margin:
padding:
}
其它
鼠标悬停
/*各类选择器*/:hover{
color: red;
}继承父辈属性
并不是所有属性都能继承的
/*各类选择器*/{
color: inherit;
}
css碎碎念
<a>
标签去掉列表下划线a{
text-decoration: none;
}- 内联元素不能制定高度(
height
)和宽度(width
)
要转变为块级元素(display: block;
)或内联块级元素(display: inline-block;
) - 自己写的属性优先级比浏览器和默认的高
- 行高
line-height
可决定内联元素高度 - html编程中两行代码中间的
空格
和回车
都会变成一个空格
- 同样颜色不同字体上有不同颜色
- 设置上下 padding 一样就是居中,仅对块元素生效,内联元素无效
- 行高
line-height
和字高font-size
的差值会自动的填充在字体的上下 border 与 浮动
动画操作(如 :hover)border后,元素会左右浮动,
这是由于一开始没有 border,操作后多出来了,
将元素一开始就添加【透明 border】,坑先站好啊,之后动画 border 颜色的显现内联元素盒模型超过父辈
一些默认 display: inline; 的元素被包起来的时候,它的 padding 和margin 有时会超过父辈
需要设定 display: block; 解决 /*内联元素*/{
display: block;
}- div 高度由其内部文档流元素的高度总和决定
内联的高度任性,强行准确测量意义不大 设定元素的宽高
weight 锁定宽度,浏览器窗口变小,用滚动条的方式
max-weight 设定最大宽度,浏览器窗口变小,自适应窗口,推荐
当设定了宽度或是最大宽度,使用 margin-left:auto; margin-right:auto; 使元素居中- 内联元素不接受设定宽高,设定
display: inline-block;
不过支持padding
、margin
,可以用来代替 - 为防止在不同电脑上效果不一致,可以在
css
里再表示下元素的大小,用来确认
文档流&文字&CSS常用命令的更多相关文章
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 前端基础-CSS如何布局以及文档流
一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- C++智能指针 原理、使用与实现
目录 理解智能指针的原理 智能指针的使用 智能指针的设计和实现 1.智能指针的作用 C++程序设计中使用堆内存是非常频繁的操作,堆内存的申请和释放都由程序员自己管理.程序员自己管理堆内存可以提高了程序 ...
- 【监控笔记】【1.3】监控事件系列——SQL Trace(黑盒跟踪 BlackBox Trace)
[1]它跟踪了哪些事件? (1.1)存储过程执行(SP:Strating) (1.2)T-SQL执行(SQL:BatchString) (1.3)错误和警告(Exception,Attention) ...
- org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents mor
今天在用junit测试mybits程序是遇到一个问题,报错为: org.apache.ibatis.exceptions.PersistenceException: ### Error queryin ...
- Linux的磁盘配额详解(Quota)
1. 检查内核情况 检查当前内核是否支持quota,当前内核配置文件在/boot下 如果当前内核不支持quota,需要重新编译内核将quota support编译进核心: File systems ...
- 逆向工程 生成mapper 接口的 重要方法
@Test public void testSelectByExample() { ItemsExample itemsExample = new ItemsExample(); ItemsExamp ...
- tensorflow学习笔记七----------RNN
和神经网络不同的是,RNN中的数据批次之间是有相互联系的.输入的数据需要是要求序列化的. 1.将数据处理成序列化: 2.将一号数据传入到隐藏层进行处理,在传入到RNN中进行处理,RNN产生两个结果,一 ...
- osi七层模型??
1.应用层:提供用户服务,例如处理应用程序,文件传输,数据管理 (HTTP.RTSP.FTP) 2.表示层:做数据的转换和压缩,加解密等 3.会话层:决定了进程间的连接建立,选择使用什么样的 ...
- 解决arcgis10.5直连postgresql报错
软件版本: arcgis10.5 postgresql9.5.9 最近使用desktop直连postgresql,已经拷贝了类库文件到desktop及pgsql配置完成的前提下,但还是报以下错误: 解 ...
- vlan的三种模式access、trunk、hybrid
untag就是普通的ethernet报文,普通PC机的网卡是可以识别这样的报文进行通讯:tag报文结构的变化是在源mac地址和目的mac地址之后,加上了4bytes的vlan信息,也就是vlan ta ...
- Centos6.6安装MySQL5.6.24
1.首先需要编译器gcc 编译器和cmake yum -y install gcc+ gcc-c++ cd /usr/local/src wget http://www.cmake.org/files ...