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 是"宽 ...
随机推荐
- K8s集群中设置harbor仓库认证
一,获取harbor的登陆用户名和密码(demo_user/demo_pwd) 二,使用kubectl命令生成secret(不同的namespace要分别生成secret,不共用) kubectl c ...
- 201871010131-张兴盼《面向对象程序设计(java)》第十三周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- Druid(数据库连接池) 学习资料
学习资料 网址 官方文档 https://github.com/alibaba/druid/wiki/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98 主流Java数据库连接池 ...
- opencv局限:cv::FileStorage读取中,xml文件的第一层节点不能超过4个
今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...
- Graph Embedding:
https://blog.csdn.net/hy_jz/article/details/78877483 基于meta-path的异质网络Embedding-metapath2vec metapath ...
- zz独家专访AI大神贾扬清:我为什么选择加入阿里巴巴?
独家专访AI大神贾扬清:我为什么选择加入阿里巴巴? Natalie.Cai 拥有的都是侥幸,失去的都是人生 关注她 5 人赞同了该文章 本文由 「AI前线」原创,原文链接:独家专访AI大神贾扬清:我 ...
- web框架--XSS攻击和CSRF请求伪造
XSS 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web ...
- mpich安装
1.简介与下载 MPICH是一种高性能的.可广泛移植的实现来自阿尔贡国家实验室的MPI-3.1标准. https://www.mpich.org/downloads/ 2.解压安装 tar xzvf ...
- <LinkedList> 160
160. Intersection of Two Linked Lists 分别从AB循环两次.如果第一次没循环到,第二次就会在节点相遇. public class Solution { public ...
- STL——sort函数的实现原理
实现原理 sort结合了快速排序.堆排序.直接插入排序三种排序方法. 根据不同的数量级别以及不同情况,能自动选用合适的排序方法.当数据量较大时采用快速排序,分段递归.一旦分段后的数据量小于某个阀值,为 ...