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 是"宽 ...
随机推荐
- c# 第一节 .net与c#区分
本节内容: 三个概念:1:.net 和c# 区分2:c# 可以做的事情3:.net 的两种交互模式 1:.net 和c# 区分 .net 一般指.Net Framework框架,是Microsoft为 ...
- 网络服务—NFS
什么是NFS ? NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作 ...
- day37_8_21表的查询
一.语法 表的查询一般使用select关键字,配合where筛选.顺序如下: # 先后顺序 from where select 二.where约束条件 首先先建立表: create table emp ...
- 总线宽度VS总线带宽
很多人把计算机总线宽度和总线带宽混为一谈,其实他们是不一样的. 总线宽度:总线宽度一般指CPU中运算器与存储器之间进行互连的内部总线二进制位数,影响吞吐量,即下面说的总线位宽. 总线带宽:总线的带宽指 ...
- [LeetCode] 321. Create Maximum Number 创建最大数
Given two arrays of length m and n with digits 0-9 representing two numbers. Create the maximum numb ...
- kubernetes-harbor 私有仓库 帐号与密码 配置
如harbor地址: harbor.qing.cn #docker login harbor.classba.cn #cat /root/.docker/config.json | base64 ...
- spring boot开启gzip
Web服务使用Spring Boot2X且运行在Tomcat或者Jetty中,支持gzip压缩可以 修改配置文件 application.properties server.compression.e ...
- 动手学深度学习9-多层感知机pytorch
多层感知机 隐藏层 激活函数 小结 多层感知机 之前已经介绍过了线性回归和softmax回归在内的单层神经网络,然后深度学习主要学习多层模型,后续将以多层感知机(multilayer percetro ...
- Scratch 3.6环境搭建(万江波实战记录)
1.Scratch官网在线环境 官方网址:scratch.mit.edu 进入后,点击“Create”建立 2. Scratch官网在线环境_简体中文(点击这个地球) 3-选择:创意 4-进入”创意“ ...
- nohup 启动后台应用
nohup java -Xmx1024M -Xms1024M -jar app.jar --logging.level=warn --logging.path=/var/log/app--server ...