css的尺寸、display的属性、以及浮动和清除浮动的方法
css的尺寸
width height
line-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等。所以文字居中。
行高:一旦设置了行高,元素内部必须有内容。
line-height:3;行高是当前数字x当前字体大小就是行高的值。
Display
这个属性规定元素以某种形式显示
display:none;当前元素不显示,不占用当前的空间了
visibility:hidden;当前元素隐藏,还占用当前的空间。
display:block;当前元素以块级元素的形式显示出来,往往可以将行级元素转换成块级元素。
display:inline;当前元素以行级元素的形式显示出来,往往可以将块级元素转换成行级元素。
display:inline-block;当前元素以行级块显示出来,即不占用一行,也可以设置宽高。
Float
浮动 属性值有left/right
1、浮动的元素脱离文档流了
2、浮动的元素相互贴靠(流氏布局)
浮动的元素会紧紧贴靠在一起如果后面的窗口空间够这个浮动元素的宽,他会挨着前一个元素贴靠,如果窗口空间不够他的宽,他会去找前一个元素贴靠,如果还不够继续往前找,不会越级去贴靠,这种排列方式叫流氏布局。
3、浮动元素有文字环绕效果
用在图文结合上。
清除浮动
浮动元素脱离了文档流,不在占用文档空间,导致后面的元素会去紧跟着上一个元素的位置进行排列,我们清除浮动的目的就是杜绝这种现象的发生。
1、给父元素设置高度;
2、给最后一个浮动元素后面加一个空元素,设置属性 clear:both;
3、给浮动元素的父级设置一个类 叫 clearfix
.clearfix:after{
clear:both;
height:0:
visiblity:hidden;
content:"";
display:block;
}
css的尺寸、display的属性、以及浮动和清除浮动的方法的更多相关文章
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 重温前端基础之-css浮动与清除浮动
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- CSS浮动和清除浮动
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
随机推荐
- ppm
PPM图像格式是由Jef Poskanzer 在1991年所创造的. PPM(Portable Pixmap Format)还有两位兄长,大哥名叫「PBM」,二哥人称「PGM」,他们三兄弟各有所长,下 ...
- 剖析linux内核中的宏---------container_of
#define container_of(ptr, type, member) ({ \ const typeof(((type *)0)->member) * __mptr = (ptr); ...
- 201871010126 王亚涛 《面向对象程序设计JAVA》第十四周学习总结
内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/11 ...
- XSS小游戏
第一关 直接在URL输入 ?name=<script>alert('xss')</script> 第二关 找源码,输入test,value值变为test,我们可以在输入框尝试x ...
- 如何有效的清理yum缓存
如果遇到下面问题,请执行下面命令 yum clean all #清除缓存
- LoadRunner Controller集合点策略灰色问题 解决
1.脚本里已经添加了集合点,但是在Controller里集合点策略是灰色的无法点击 2.问题解决: 将下图的勾选项去掉即可(系统默认是勾选上的) 去掉勾选后可以选择了:
- SysML——CSE 599W: Systems for ML
CSE 599W: Systems for ML Assignments Materials Projects Schedule Schedule The schedule is tentative ...
- 关于gcd
内容: \(gcd(a,b)=gcd(b,a\% b)\) 用途: 这不废话嘛,当然是用来求最大公约数啊 证明:(这还是四月份的时候cdx巨佬给我讲的qwq) 设\(d=gcd(a.b)\) 则有\( ...
- 洛谷P2996 [USACO10NOV]拜访奶牛Visiting Cows
题目 树形dp 设f[i][j]表示走到第i号节点的最大权值 j为0/1表示这个点选或者不选 如果这个点不选 就从他的子树里的选或者不选选最大 如果这个点选 就加上他子树的不选 f[x][0] += ...
- CF1194F Crossword Expert(数论,组合数学)
不难的一题.不知道为什么能 $2500$…… 不过场上推错了一直不会优化…… 首先考虑 $f_i$ 表示恰好做完前 $i$ 道题的概率. 这样很难算.修改一下,$f_i$ 表示做完至少 $i$ 道题的 ...